Download presentation
Presentation is loading. Please wait.
1
Project Two Adding Scrolling Messages! Page 2.4 to 2.18 Today’s Agenda Look at scrolling message coding. Create a web page with a text box. Create a web page with a scrolling message. Review Vocabulary Words. Questions? Pop Quiz?? Tuesday!
2
Scrolling Message 4 basic components: The display object. The message. The position. The delay.
3
The display object: It defines where the scrolling message displays, which is in a form text box.
4
Form Name Beginning tag for a form End tag for a form Text box name Size attribute Hint: When creating the form text box, you must name the form and the text box object.
5
The message: Is a text string assigned to a variable. The text string is what the user sees when the message displays. var scrollMsg = “Mortgage Rates are at their Lowest!” Variable that string is assigned to. String – text!
6
The position: Is the starting location in which the message first displays in the display object. var beginPos = 0 beginPos = beginPos + 1 If (beginPos > scrollMsg.length) { beginPos = 0 }
7
Using an IF Statement!
8
The delay: The delay is the length of time between when the message ends and when it starts to appear again. We use the setTimeout( ) Method here to make the recursive call to the scrolling message. window.setTimeout(“scrollingMsg( )”, 200) The setTimeout( ) method pauses the scrolling message for 200 milliseconds and then again calls the scrollingMsg function.
9
Recursion Is a programming technique It is used to call the same function from within the function. Be careful when using a recursive call it can lead to an infinite loop or stack overflows which could lead to malfunction of your web site!
10
Creating a Form Text Box to Display a Scrolling Message To create a text enter the following code on the next slide.
11
Open notepad and enter the following: Scrolling Message Code This is an example of creating a text box to display a scrolling message. View the source code. Look, change the number – What happens?
12
Let’s create a user-defined function for a scrolling message. The scrollingMsg( ) function performs 3 tasks: –It assigns the message. –It checks for end of message. –It assigns the next character in the message to the text box, starting with the beginning of the message, in order to make the message scroll.
13
Don’t forget to add an Event Handler! Event Handler – Will start the scrolling message when the web page loads. Recall that an event is a user action. When the user clicks a button, an event handler triggers JavaScript code to work! Use onload( ) event handler to start the scrollingMsg( ) function. Place in the tag. <BODY onload = “scrollingMsg( )”
14
Don’t forget you can use Event Handler for other features!
15
Open Notepad and enter the following: <!--Hide from old browsers var scrollMsg = "Put your message here!" var msgSpace = "--- ---" var beginPos = 0 function scrollingMsg() { document.msgForm.scrollingMsg.value = scrollMsg.substring(beginPos,scrollMsg.length)+msgSpace+ scrollMsg.substring(0,beginPos) beginPos = beginPos + 1 if (beginPos > scrollMsg.length) { beginPos=0 } window.setTimeout("scrollingMsg()",200) } //-->
16
You should see the following:
17
Lets Review Vocabulary Words Scrolling Message Scrolling Msg( ) function If Statements Conditional Operators setTimeout( ) recursion
18
Any Questions
19
Quiz on Tuesday! Have a great 3-day weekend!
Similar presentations
