CS 21A

1. CS 21A • Beginning JavaScript Programming Project 2 Creating Pop-up Windows, Adding Scrolling Messages, and Validating Forms Sonny Huang

2. Project 2 Creating Pop-up Windows, Adding Scrolling Messages, and Validating Forms • Outline • l  Explain the four basic components of a scrolling message • l 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 • 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

3. Project 2 Creating Pop-up Windows, Adding Scrolling Messages, and Validating Forms • Describe the math pow() method • 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

4. Introduction • Introduction We will create a Web page that will allow Home Finders Nationwide Realty customers to calculate the amount of their monthly mortgage payment, based on the amount of mortgage, interest rate, and the number of years. We will learn 1. how to add a scrolling message, which will introduce them to the substring() method and the If statement. 2.how to use JavaScript to validate forms.

5. Introduction 3.If…Else statements, the parseInt(), parseFloat(), and isNaN() built-in functions, as well as using the pow() method. 4. writing functions to calculate and display the resulting monthly payment amount using the currency format. 5. how to add a pop-up window to display information on using the mortgage payment calculator.

6. Introduction We all experienced using the Internet to purchase or searching something. Look for this web site homeadvisor.msn.comand otheronline lenders and realtors . Do you search for a house online? How do you feel about applying for loans online? What are the important issues?

7. Project Two — Home Finders Nationwide Realty We want to design a web page first loads a pop up windows to displays a message informing users of the new mortgage payment calculator.

8. Project Two — Home Finders Nationwide Realty The web page also includes a scrolling message that constantly displays to remind visitors of the current low mortgage rate.

9. Project Two — Home Finders Nationwide Realty The mortgage payment form allows users to calculate their monthly payment based on the amount of mortgage, interest rate, and years.

10. Project Two — Home Finders Nationwide Realty We will use functions to validate data, calculate monthly payment, and display the result in currency format. For the sense of up to date, we will have the last modification date displayed at the bottom of the page.

11. Project Two — Home Finders Nationwide Realty Data Validation Requirement: If the information inputted is not a number or not a valid form than we should use the alert message box to notify the user and position the insertion point in the appropriate text box. When all the entries are valid, the calculation function will be called to provide the monthly payment information.

12. Project Two — Home Finders Nationwide Realty Calculations: The formula for calculating a monthly payment is Monthly payment = loan * rate (1-(1/(1+rate)payments))

13. Project Two — Home Finders Nationwide Realty Starting Notepad and opening the home.htm file

14. Inserting a scrolling message on a Web page Microsoft create marquee html tag . <MARQUEE ...> creates a scrolling display and is an MSIE extension and will probably never be supported by any other browser. The basic use of <MARQUEE ...> is simple. Put most any kind of markup between <MARQUEE ...> and </MARQUEE>. <MARQUEE> Hi There! <IMG SRC="graphics/idocs.gif" HEIGHT=33 WIDTH=82 ALT="Idocs Guide to HTML"> </MARQUEE>

15. Inserting a scrolling message on a Web page By using a JavaScript user defined function can create the scrolling effect as marquee and can compatible with all the browsers. A scrolling message has four basic components: 1. The display object defines where the scrolling object displays(status bar, or form text box). 2. The message is a text string assigned to a variable. 3. The position is the starting location in which the message first displays in the display object. 4. The delay is the length of time between when a message ends and when it starts to appear again.

16. Inserting a scrolling message on a Web page Using the form’s text box to create the scrolling effect. <FORM Name="msgForm"> <INPUT Type="text" Name="scrollingMsg" Size="23"> </FORM> Form: An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

17. Inserting a scrolling message on a Web page Input(one of the form’s control types): We could create two types of controls that allow users to input text. The INPUT element creates a single-line input control and the TEXTAREA element creates a multi-line input control. Input tag’ Attribute definitions type = text This attribute specifies the type of control to create. The default value for this attribute is "text". name = name This attribute assigns the control name.

18. Inserting a scrolling message on a Web page size = number This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.

19. Inserting a scrolling message on a Web page Creating a form text box to display a scrolling message: Inserting the code in the section

20. Inserting a scrolling message on a Web page

21. Inserting a scrolling message on a Web page Creating a user-defined function for a scrolling message We will create function scrollingMsg() to perform 1. Assign message. 2. Check the end of the message. 3. It assigns the next character in the message to the textbox. The function requires three variables: var scrollMsg = "Mortgage rates are at their LOWEST!" var msgSpace = "--- ---" var beginPos = 0

22. Inserting a scrolling message on a Web page Put <SCRIPT LANGUAGE="JAVASCRIPT"> <!--Hide from old browsers var scrollMsg = "Mortgage rates are at their LOWEST!" var msgSpace = "--- ---" var beginPos = 0 after the Title tab.

23. Inserting a scrolling message on a Web page

24. Inserting a scrolling message on a Web page Put the the user define function, scrollingMsg(), after the variable declaration. function scrollingMsg() { document.msgForm.scrollingMsg.value = scrollMsg.substring(beginPos,scrollMsg.length)+msgSpace+scrollMsg.substring(0,beginPos)

25. Inserting a scrolling message on a Web page The scrollMsg and msgSpace are concatenated and assigned to the scrollingMsg text box through the following statement document.msgForm.scrollingMsg.value = scrollMsg.substring(beginPos,scrollMsg.length)+msgSpace+scrollMsg.substring(0,beginPos) Mortgage rates are at their LOWEST! --- ---

26. Inserting a scrolling message on a Web page The form, msgForm, becomes property of document object. The text box, scrollingMsg, become property of document.msgForm object. The property value is the property of document.msgForm.scrollingMsg.

27. Inserting a scrolling message on a Web page Increment the Position Locator Variable beginPos = beginPos + 1

28. Inserting a scrolling message on a Web page Entering an If Statement

29. Inserting a scrolling message on a Web page if (condition) {statements1 } else {statements2 } The condition can be any JavaScript expression that evaluates to true or false. The statements to be executed can be any JavaScript statements, including further nested if statements. If you want to use more than one statement after an if or else statement, you must enclose the statements in curly braces, {}.

30. Inserting a scrolling message on a Web page

31. Inserting a scrolling message on a Web page

32. Inserting a scrolling message on a Web page Example. In the following example, the function checkData returns true if the number of characters in a Text object is three; otherwise, it displays an alert and returns false. function checkData () {          if (document.form1.threeChar.value.length == 3) {                    return true          } else {                    alert("Enter exactly three characters. “ +  document.form1.threeChar.value + " is not valid.")           return false           }}

33. Inserting a scrolling message on a Web page If the beginning position is greater than the message length then set the beginning position to zero. beginPos = beginPos + 1 if (beginPos > scrollMsg.length) { beginPos = 0 }

34. Inserting a scrolling message on a Web page If the beginning position is greater than the message length then set the beginning position to zero. beginPos = beginPos + 1 if (beginPos > scrollMsg.length) { beginPos = 0 }

35. Using the setTimeout() Method to create a Recursive Function Call Recursion A programming method in which a routine calls itself. Recursion is an extremely powerful concept, but it can strain a computer's memory resources Using the setTimeout function to call itself to create Scrolling Effect. window.setTimeout("scrollingMsg()",200)

36. Using the setTimeout() Method to create a Recursive Function Call

37. Using the setTimeout() Method to create a Recursive Function Call Adding an Event Handler We will place an onload() even handler in the <Body> tag to create the scrolling message when the web page is load.

38. Using the setTimeout() Method to create a Recursive Function Call

39. Using the setTimeout() Method to create a Recursive Function Call Insert the following statement <BODY onload="scrollingMsg()">

40. Saving the HTML file and Testing the page

41. The Mortgage Payment Calculator Form To Assign a value to a text box object within a form, we need to use the form name, the text box name and the value attribute.

42. The Mortgage Payment Calculator Form Inserting an Event Handler in an Anchor Tag A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web. A link has two ends -- called anchors -- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).

43. The Mortgage Payment Calculator Form An anchor name is the value of either the name or id attribute when used in the context of anchors. Anchor names must observe the following rules: • Uniqueness: Anchor names must be unique within a document. Anchor names that differ only in case may not appear in the same document. • String matching: Comparisons between fragment identifiers and anchor names must be done by exact (case-sensitive) match.

44. The Mortgage Payment Calculator Form Thus, the following example is correct with respect to string matching and must be considered a match by user agents: <P><A href="#xxx">...</A> ...more document... <P> <A name="xxx">...</A>

45. The Mortgage Payment Calculator Form We will use the onclick event handler within the <A> tag to triger a user defined function, doMort(). The doMort() function will clear the text box and place the insertion point in the Amount Mortgage box. In an Html file the following statement should match with each other. <A HREF="#LoanCalc" onclick="doMort()">Estimate Mortgage Payment</A> <A NAME="LoanCalc"></P>

46. The Mortgage Payment Calculator Form

47. The Mortgage Payment Calculator Form

48. Writing the doMort() User-Defined Function We will use the onclick event handler within the <A> tag to triger a user defined function, doMort(). The doMort() function will clear the text box and place the insertion point in the Amount Mortgage box. In an Html file the following statement should match with each other. <A HREF="#LoanCalc" onclick="doMort()">Estimate Mortgage Payment</A> <A NAME="LoanCalc"></P>

49. Writing the doMort() User-Defined Function focus Method. Gives focus to the specified object. Syntax 1. fileUploadName.focus()2. passwordName.focus()3. selectName.focus()4. textName.focus()5. textareaName.focus()6. frameReference.focus()7. windowReference.focus()

50. Writing the doMort() User-Defined Function Parameters fileUploadName is either the value of the NAME attribute of a FileUpload object or an element in the elements array. passwordName is either the value of the NAME attribute of a Password object or an element in the elements array. selectName is either the value of the NAME attribute of a Select object or an element in the elements array.