1 / 112

Project 9

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

aizza
Download Presentation

Project 9

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

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

  7. The scrolling messagewill appear in thistext box

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

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

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

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

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

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

  14. Incrementing the Position Locator Variable

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

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

  17. Conditional Operands

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

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

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

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

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

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

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

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

  26. The Mortgage Payment Calculator Form

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

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

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

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

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

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

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

  34. Validating Data Criteria Using Built-in Functions

More Related