 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1

Topics Introduction Simple Program: Printing a Line of Text in a Web Page Obtaining User Input with Prompt Dialogs Dynamic Welcome Page Adding Integers Memory Concepts Arithmetic Decision Making: Equality and Relational Operators

Learning Outcomes At the end of this lesson, students should be able to: Write simple JavaScript programs. Use input and output statements. Understand basic memory concepts. Use arithmetic operators. Understand the precedence of arithmetic operators. Write decision-making statements. Use relational and equality operators.

Introduction JavaScript scripting language –Enhances functionality and appearance –Client-side scripting Makes pages more dynamic and interactive –Foundation for complex server-side scripting –Program development –Program control 4

Simple Program: Printing a Line of Text in a Web Page Inline scripting –Written in the of a document – tag Indicate that the text is part of a script type attribute –Specifies the type of file and the scripting language use write method –Write a text in the document 5

Simple Program: Printing a Line of Text in a Web Page Escape character ( \ ) –Indicates “special” character is used in the string alert method –Dialog box –The comment tags are used for browser that does not support JavaScript. –The codes will not be displayed. 6

7

8 welcome2.html (1 of 1)

Simple Program: Printing a Line of Text in a Web Page Unlike writeln, write does not position the output cursor in the XHTML document at the beginning of the next line after writing its argument. 9

Simple Program: Printing a Line of Text in a Web Page Display the numbers 1 to 4 on the same line, with each pair of adjacent numbers separated by one space. Using document.write document.write("1 "); document.write("2 "); document.write("3 "); document.write("4 "); Using document.writeln document.writeln("1"); document.writeln("2"); document.writeln("3"); document.writeln("4"); 10 Spaces are needed

Simple Program: Printing a Line of Text in a Web Page Line Represents one statement. Statements in Java are separated by semicolons(;).JavaScript allows large statements to be split over many lines by using + operator. 11

welcome3.html 1 of 1 12

welcome4.html 1 of 1 13

14

Simple Program: Printing a Line of Text in a Web Page 15

Dynamic Welcome Page A script can adapt the content based on input from the user or other variables 16

welcome5.html (1 of 2) 17

18 welcome5.html (2 of 2)

Dynamic Welcome Page 19 Fig. 7.7Prompt dialog displayed by the window object’s prompt method. This is the prompt to the user. This is the default value that appears when the dialog opens. This is the text field in which the user types the value. When the user clicks OK, the value typed by the user is returned to the program as a string.

Adding Integers Prompt user for two integers and calculate the sum (Fig. 7.8) NaN (not a number) parseInt –Converts its string argument to an integer 20

Addition.html (1 of 2) 21

Addition.html (2 of 2) 22

23

Memory Concepts Variable names correspond to locations in the computer’s memory. Every variable has a name, a type, and a value. Read value from a memory location. 24

Memory Concepts 25 number145 Fig. 7.9Memory location showing the name and value of variable number1.

Memory Concepts 26 number145 number272 Fig. 7.10Memory locations after values for variables number1 and number2 have been input.

Memory Concepts 27 number145 number272 sum117 Fig. 7.11Memory locations after calculating the sum of number1 and number2.

Arithmetic Many scripts perform arithmetic calculations –Expressions in JavaScript must be written in straight-line form 28

Arithmetic 29

Arithmetic 30 y = 2 * 5 * * 5 + 7; 2 * 5 is 10 (Leftmost multiplication) y = 10 * * 5 + 7; 10 * 5 is 50 (Leftmost multiplication) y = * 5 + 7; 3 * 5 is 15 (Multiplication before addition) y = ; is 65 (Leftmost addition) y = ; is 72 (Last addition) y = 72; (Last operation—place 72 into y ) Step 1. Step 2. Step 5. Step 3. Step 4. Step 6. Fig. 7.14Order in which a second-degree polynomial is evaluated.

Decision Making: Equality and Relational Operators Decision based on the truth or falsity of a condition –Equality operators –Relational operators 31

Decision Making: Equality and Relational Operators 32  

Decision Making: Equality and Relational Operators 33

welcome6.html (1 of 3) 34

welcome6.html (2 of 3) 35

36 welcome6.html (3 of 3)

Sample Program 1 Write a script that gets from the user the radius of a circle and outputs XHTML text that displays the circle’s diameter, circumference and area. Use the constant value for PI. [Note: You may also use the predefined constant Math.PI for the value of PI. This constant is more precise than the value The Math object is defined by Java-Script and provides many common mathematical capabilities.] Use the following formulas (r is the radius): diameter = 2r, circumference = 2PIr, area = PIr2. INPUT: radius of a circle OUTPUT: circle’s diameter, circumference and area RELEVANT FORMULA: PI= diameter = 2r, circumference = 2PIr, area = PIr2 37

Application of JavaScript There are two parts of an HTML document; and. JavaScript scripts can appear in either part of a document, depending on their purpose. Scripts that produce content only when requested or that react to user interactions are placed in the head of the document. 38

Application of JavaScript Example: function definitions and code associated with form elements, such as buttons. Scripts that are to be interpreted just once, when the interpreter finds them, are placed in the document body. 39

Application of JavaScript Example: Simple Calculator Source: 40

Application of JavaScript Example: Text Area Max Length Script Source: 41

Application of JavaScript Example: Form validation (Source: JavaScript can be used to validate data in HTML forms before sending off the content to a server. Form data that typically are checked by a JavaScript could be: –has the user left required fields empty? –has the user entered a valid address? –has the user entered a valid date? –has the user entered text in a numeric field? 42

Web Resources script/index.htmlhttp://wp.netscape.com/eng/mozilla/3.0/handbook/java script/index.html al.htmlhttp://webdeveloper.com/javascript/javascript_js_tutori al.html 43