1. Project 9
Creating Pop-up Windows, Adding Scrolling Messages, and Validating Forms

2. 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

3. 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

4. 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

5. 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

7. 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

8. The scrolling message will appear in this text box

9. Creating a Form Text Box to Display a Scrolling Message
Scroll down to the BODY section and then click line 25

10. Press the SPACEBAR to indent the lines as shown on the following slide
Press the SPACEBAR to indent the lines as shown on the following slide. 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

12. 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

13. Creating the scrollingMsg() User-Defined Function
Click line 4

15. 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

17. 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

19. Incrementing the Position Locator Variable

20. Entering an If Statement
You must determine if the current value of beginPos exceeds the length of the message

21. Entering an If Statement
A condition is anything that evaluates to True or False
Must place parentheses around the condition

22. Conditional Operands

24. Entering an If Statement
Click line 11. Press the SPACEBAR eight times. Type beginPos = beginPos + 1 and then press the ENTER key

25. Type if (beginPos > scrollMsg
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

27. 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

28. 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

30. Adding an Event Handler
Event handlers trigger when users perform an action
Event handlers are not case sensitive

32. 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

34. 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

35. 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

37. The Mortgage Payment Calculator Form

38. Assignment Statement
Used to assign a value to a text box within a form

39. 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

40. Press the SPACEBAR once
Press the SPACEBAR once. Type onclick=“doMort()” and do not press the ENTER key

42. 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

43. Writing the doMort() User-Defined Function
Click line 18 in the HEAD section
Enter the following JavaScript code

45. 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

47. Validating the Mortgage Payment Calculator Form
If…Else statements test a condition

50. Validating Data Criteria Using Built-in Functions

51. Validating Data Criteria Using Built-in Functions
Calc() user-defined function converts and stores the text box values as integer or floating-point numbers in temporary variables
Uses parseInt() and isNaN()

53. Entering a Calc() User-Defined Function
If necessary, activate Notepad. Scroll up to the HEAD section. Click line 26
Enter the following JavaScript code

55. Entering the Else Portion of the Nested If…Else Statement
Click line 34
Enter the following JavaScript code and press the ENTER key

57. Entering the Else Portion of the Nested If…Else Statement
Click line 42
Enter the following JavaScript code and press the ENTER key

59. Adding the Event Handler to Call the Calc() Function
Scroll down to the BODY section inside the table. Click line 120, directly to the left of the rightmost > bracket
Press the SPACEBAR. Type onclick=“Calc(MortCalc)” and do not press the ENTER key

61. 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
When the Web page displays, click Estimate Mortgage Payment to display and set the focus to the Amount of Mortgage text box

62. Saving and Testing the Web Page
Enter test data set 1, as shown below. Press the TAB key to move to the next text box

63. Saving and Testing the Web Page
When you have entered test data set 1, click the Calculate button
When the message box displays, click the OK button
Click the Reset button on the Web page
Repeat the last four steps, using the remaining test data sets

65. Determining the Monthly Payment
Passing Values to the monthly() User-Defined Function
Scroll up to the HEAD section and then click line 52. Press the ENTER key to insert a blank line. Click the blank line

66. Type document. MortCalc. Payment
Type document.MortCalc.Payment .value=monthly(mortAmount, mortRate,mortYears) and then press the ENTER key

68. Creating the monthly() Function
Used to calculate the monthly payment amount
Requires the mortgage amount, the interest rate, and the number of years the payments will be made
JavaScript will use the pow method for this calculation

69. Math.pow() Method

70. Entering the monthly() Function
Click line 56, the line directly above the //--> tag
Enter the following JavaScript code and press the ENTER key

72. 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
If necessary, click the Amount of Mortgage text box to place the insertion point in the text box

73. Saving and Testing the Web Page
Type in the Amount of Mortgage text box and then press the TAB key
Type 7.9 in the Interest Rate as % text box and then press the TAB key
Type 30 in the Number of Years text box and then click the Calculate button

75. Formatting the Monthly Payment Output as Currency
Must write a dollarFormat() function which
Takes the string value and separates dollars from cents
Determines the location of the decimal point using the indexOf() method
Separates the value to the left of the decimal point from the value to the right of the decimal point

76. Formatting the Monthly Payment Output as Currency
Inserts commas every three positions in dollar amounts exceeding 999
Reconstructs the string value with two decimal places, inserts a dollar sign immediately to the left of the first digit without spaces, and then returns the completed formatted value

77. Using the indexOf() Method
Used to search a string for a particular value and returns the relative location of that value within the string

78. Entering the Dollars Portion
Click line 63
Enter the following JavaScript code and press the ENTER key

79. Using For Loops and While Loops
A series of statements that executes repeatedly until it satisfies a condition
JavaScript has two types of loops
For loop
Relies on a conditional statement using numeric values
While loop
Relies on a conditional statement that can use either a numeric value or a string

80. For Loop

81. While Loop

82. Extracting the Dollar Portion of the Output and Inserting Commas
Click line 69, the line directly below the statement, decipos=valuein.length
Enter the JavaScript code on the following slide, and then press the ENTER key

85. Extracting the Cents Portion and Defining the Decimal Amount
Click line 87
Enter the following JavaScript code and then press the ENTER key

87. Reconstructing the Formatted Output and Returning the Formatted Value
Click line 90
Enter the following JavaScript code and press the ENTER key

89. Passing the Monthly Payment Value to the dollarFormat() Function
Click line 53

91. Passing the Monthly Payment Value to the dollarFormat() Function
Type document.MortCale.Payment .value=dollarFormat(document .MortCalc.Payment.value) as the statement

93. 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
Enter the same test data in the text boxes: Mortgage Amount – 69000; Interest Rate as % - 7.9; and Number of Years – 30
Click the Calculate button

95. Adding a Pop-up Window Displays over the current browser window
Use the open() method

96. Adding a Pop-up Window

97. Entering the open() Method to Open a Pop-up Window
Click line 94, the line directly above the //--> tag

98. Type open(“notice.htm”,”noticeWin”, “WIDTH=400,HEIGHT=220”) and then press the ENTER key

100. Adding the Date Last Modified
Click line 171, the line directly above the end </BODY> tag
Type <SCRIPT LANGUAGE=“JAVASCRIPT”> and then press the ENTER key
Type <!-- Hide from old browsers and then press the ENTER key

101. Adding the Date Last Modified
Press the SPACEBAR four times. Type document.write(“<CENTER><FONT COLOR=‘maroon’><H5>This document was last modified “+document.lastModified+” </H5></FONT></CENTER>”) and then press the ENTER key

102. Adding the Date Last Modified
Type //--> and then press the ENTER key
Type </SCRIPT> and then press the ENTER key

104. Saving and Testing the Finished Web Page
With the 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

105. Saving and Testing the Finished Web Page
Click the Close Window button to close the pop-up window
If necessary, scroll down to verify that the last line displays the date the page was last modified (the date and time the file was saved on the disk)

106. Printing the HTML File Using Notepad
If necessary, click the Notepad button on the taskbar to activate the Notepad window
Click Print on the File men

107. Closing Notepad and your Browser
Click the Close button on your browser title bar
Click the Close button on the Notepad window title bar

108. Summary 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

109. Summary 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

110. Summary
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

111. What You Should Know

112. Project 9 Complete