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

The scrolling message will appear in this text box

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

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

Incrementing the Position Locator Variable

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

Conditional Operands

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

The Mortgage Payment Calculator Form

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

Validating Data Criteria Using Built-in Functions

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()

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

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

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

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

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

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

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

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

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

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

Math.pow() Method

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

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

Saving and Testing the Web Page Type 69000 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

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

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

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

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

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

For Loop

While Loop

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

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

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

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

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

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

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

Adding a Pop-up Window

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

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

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

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

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

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

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)

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

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

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

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

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

What You Should Know

Project 9 Complete