1.12k likes | 1.25k Views
Project 9. Creating Pop-up Windows, Adding Scrolling Messages, and Validating Forms. Objectives. Explain the four basic components of a scrolling message Write a user-defined function to display a scrolling message in a form text box Describe the If statement
E N D
Project 9 Creating Pop-up Windows,Adding Scrolling Messages,and Validating Forms
Objectives • Explain the four basic components of a scrolling message • Write a user-defined function to display a scrolling message in a form text box • Describe the If statement • Define conditionals and discuss the conditional operands • Define recursion
Objectives • Describe the focus() method • Write a user-defined function to calculate mortgage payments • Validate data entry using a nested If…Else statement • Describe the parseInt(), parseFloat(), and isNaN() built-in functions • Describe the math pow() method
Objectives • Write a user-defined function to format output in currency format • Discuss For and While loops • Use the open() method to display another Web page in a pop-up window • Use the lastModified property to display the date a Web page was last modified
Starting Notepad and Opening the Home.htm File • With the HTML Data Disk in drive A, click File on the menu bar and then click Open • Click 3½ Floppy (A:) in the Look in list box. Type *.htm in the File name text box, double-click the Project 9 folder, and then press the ENTER key • Double-click the document, home.htm • If necessary, maximize the window
Inserting a Scrolling Message on a Web Page • Display object • Defines where the scrolling message displays • Message • What the user sees when the message displays • Position • The starting location in which the message first displays in the display object • Delay • The length of time between when a message ends and when it starts to appear again
Creating a Form Text Box to Display a Scrolling Message • Scroll down to the BODY section and then click line 25
Press the SPACEBAR to indentthe lines as shown on the followingslide. Type <FORM Name=“msgForm”>and then press the ENTER key. Type<INPUT Type=“text” Name=“scrollingMsg” Size=“23”> and then press the ENTER key.Type </FORM> and then press the ENTER key
Creating a User-Defined Function for a Scrolling Message • The scrollingMsg() function performs three tasks: • Assigns the message and a space to the display object • Checks for the end of the message • Assigns the next character in the message to the text box, starting with the beginning position, to make the text box scroll
Creating the scrollingMsg() User-Defined Function • Click line 4
Creating the scrollingMsg() User-Defined Function • Type <SCRIPT LANGUAGE=“JAVASCRIPT”> and then press the ENTER key. Type <!—Hide from old browsers and then press the ENTER key. Press the SPACEBAR four times. Type var scrollMsg=“Mortgage rates are at their LOWEST!” and then press the ENTER key. Type var msgSpace = “--- ---” and then press the ENTER key. Type var beginPos = 0 and then press the ENTER key
Creating the scrollingMsg() User-Defined Function • Type function scrollingMsg() { and then press the ENTER key. Type document.msgForm.scrollingMsg.value=scrollMsg.substring(beginPos.scrollMsg.length)+msgSpace+scrollMsg.substring(0, beginPos) and then press the ENTER key
Entering an If Statement • You must determine if the current value of beginPos exceeds the length of the message
Entering an If Statement • A condition is anything that evaluates to True or False • Must place parentheses around the condition
Entering an If Statement • Click line 11. Press the SPACEBAR eight times. Type beginPos = beginPos + 1 and then press the ENTER key
Type if (beginPos > scrollMsg.length) {and then press the ENTER key. Type beginPos = 0 and then press the ENTER key. Type }and then press the ENTER key
Using the setTimeout() Method to Create a Recursive Function Call • The setTimeout() method calls a function or evaluates an expression after a specified amount of time has elapsed • Recursion • Used to call the same function from within a function
Adding the setTimeout() Method to Create a Recursive Function Call • With the insertion point on line 15, type window.setTimeout(“scrollingMsg()”, 200) and then press the ENTER key. Type } and then press the ENTER key three times • Type //--> and then press the ENTER key. Type </SCRIPT> and then press the ENTER key
Adding an Event Handler • Event handlers trigger when users perform an action • Event handlers are not case sensitive
Entering the Event Handler to Call the scrollingMsg() Function • Locate the <BODY> tag on line 24. Click between the word, BODY, and the > symbol. Press the SPACEBAR once. • Type onload=“scrollingMsg()” and do not press the ENTER key
Saving the HTML File on the Data Disk • With your HTML Data Disk in drive A, click File on the menu bar and then click Save As • Type a:\homefinders.htm in the File name text box, double-click the Project 9 folder, and then click the Save button in the Save As dialog box
Testing the Web Page • Start your browser. If necessary, click the Maximize button • Click the Address bar. Type a:\Project 9\homefinders.htm and then press the ENTER key
Assignment Statement • Used to assign a value to a text box within a form
Inserting an Event Handler in an Anchor Tag • Make sure Notepad is the active window. Scroll down to the BODY section. On line 41, click between the last quotation mark and the > symbol of the <A HREF=“#LoanCalc”> anchor tag
Press the SPACEBAR once.Type onclick=“doMort()”and do not press the ENTER key
Writing the doMort() User-Defined Function • Will clear all text boxes and set the focus to the Amount of Mortgage text box • Setting the focus means giving attention to an object
Writing the doMort() User-Defined Function • Click line 18 in the HEAD section • Enter the following JavaScript code
Saving and Testing the Web Page • With your HTML Data Disk in drive A, click File on the menu bar and then click Save • Click the browser button on the taskbar • Click the Refresh button on the browser toolbar • Click the Estimate Mortgage Payment link
Validating the Mortgage Payment Calculator Form • If…Else statements test a condition