chapter4 javascript (2)

7/28/2019 Chapter4 Javascript (2)

1/46

2003 Prentice Hall, Inc.

All rights reserved.

CHAPTER 3

JavaScript

1


2/46

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


3/46

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.


4/46

What is JavaScript?

JavaScript was designed to add interactivity to

HTML pages

JavaScript is a scripting language A scriptinglanguage is a lightweight programming

language

JavaScript is usually embedded directly intoHTML pages

4


5/46

Are Java and JavaScript the same?

NO!

Java and JavaScript are two completely

different languages in both concept anddesign!

5


6/46

Some Browsers do Not Support

JavaScript

To prevent them from doing this, and as a

part of the JavaScript standard, the HTMLcomment tag should be used to "hide" the

JavaScript.

Just add an HTML comment tag

6


7/46

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

7


8/46


9/46


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.

9

1


10/46

10

1 2 4

5 6 7

8 9 10 A First Program in JavaScript11

12 13 17 18

19 20

1


11/46

11

welcome2.html

(1 of 1)

1 2 4

5 6 7

8 9 10 Printing a Line with Multiple Statements11

12 13 18 19

20 21

Si l P P i ti Li f T t i


12/46


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.

12



13/46


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 ");




Using document.writeln

document.writeln("1");




13

Spaces areneeded



14/46


Web Page

Line 15-16- Represents one statement.

Statements in Java are separated by

semicolons(;).JavaScript allows large

statements to be split over many lines byusing + operator.

14

1


15/46

welcome3.html

1 of 1

15

1 2 4

5 6 7

8 9 Printing Multiple Lines10

11 12 16 17

18 19

1


16/46

welcome4.html

1 of 1

16

1 2 4

5 6 7

8 9 Printing Multiple Lines in a Dialog Box10

11 12 15 16

17 18

19 20

Click Refresh (or Reload) to run this script again.
21 22


17/46

17



18/46


Web Page

18

Escape sequence Description\n Newline. Position the screen cursor at the beginning of the next line.

\t Horizontal tab. Move the screen cursor to the next tab stop.\r Carriage return. Position the screen cursor to the beginning of the current

line; do not advance to the next line. Any characters output after thecarriage return overwrite the characters previously output on that line.

\\ Backslash. Used to represent a backslash character in a string.\" Double quote. Used to represent a double quote character in a string

contained in double quotes. For example,window.alert( "\"in quotes\"" );

displays "in quotes" in an alert dialog.

\' Single quote. Used to represent a single quote character in a string. Forexample,

window.alert( '\'in quotes\'' );displays 'in quotes' in an alert dialog.

Fig. 7.5 Some common escape sequences.


19/46

Dynamic Welcome Page

A script can adapt the content based on

input from the user or other variables

19

1


20/46

welcome5.html

(1 of 2)

20

2 4

5 6 7

8 9 10 Using Prompt and Alert Boxes11

12 13 22

23


21/46

21

welcome5.html

(2 of 2)

24 25

26 27

28 29


22/46

Dynamic Welcome Page

22

Fig. 7.7 Prompt dialog displayed by the windowobjects 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.


23/46

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

23

1


24/46

Addition.html

(1 of 2)

24

2 4

5 6 7

8 9 10 An Addition Program11

12 13


25/46

Addition.html

(2 of 2)

25

25 secondNumber =26 window.prompt( "Enter second integer", "0" );27

28 // convert numbers from strings to integers29 number1 = parseInt( firstNumber );30 number2 = parseInt( secondNumber );31

32 // add the numbers33 sum = number1 + number2;34

35 // display the results36 document.writeln( "The sum is " + sum + "" );37 // -->38 39

40 41 42

Click Refresh (or Reload) to run the script again
43 44


26/46

26


27/46


28/46

Memory Concepts

28

number1 45Fig. 7.9 Memory location showing the name and value of variable number1.


29/46

Memory Concepts

29

number1 45number2 72

Fig. 7.10 Memory locations after values for variables number1 and number2 have been input.

M C


30/46

Memory Concepts

30

number1 45number2 72

sum 117Fig. 7.11 Memory locations after calculating the sum ofnumber1 and number2.

A ith ti


31/46

Arithmetic

Many scripts perform arithmetic

calculations

Expressions in JavaScript must be written in

straight-line form

31

A ith ti


32/46

Arithmetic

32

JavaScriptoperation

Arithmeticoperator

Algebraicexpression

JavaScriptexpression

Addition + f+ 7 f + 7

Subtraction - pc p - c

Multiplication * bm b * m

Division / x /y or orxy x / y

Remainder % rmods r % s

Fig. 7.12Arithmetic operators.

Operator(s) Operation(s) Order of evaluation (precedence)*, / or% Multiplication

DivisionModulus

Evaluated second. If there are several such

operations, they are evaluated from left to right.

+ or- AdditionSubtraction

Evaluated last. If there are several such operations,

they are evaluated from left to right.

Fig. 7.13Precedence of arithmetic operators.

--

A ith ti


33/46

Arithmetic

33

y = 2 * 5 * 5 + 3 * 5 + 7;

2 * 5 is 10 (Leftmost mu lti plication)

y = 10 * 5 + 3 * 5 + 7;10 * 5 is 50 (Leftmost mu lti plication)

y = 50 + 3 * 5 + 7;3 * 5 is 15 (Multi plication before addition)

y = 50 + 15 + 7;50 + 15 is 65 (Leftmost additi on)

y = 65 + 7;65 + 7 is 72 (Last additi on)

y = 72; (Last operationplace 2intoy)

Step 1.

Step 2.

Step 5.

Step 3.

Step 4.

Step 6.Fig. 7.14 Order in which a second-degree polynomial is evaluated.

Decision Making: Equality and


34/46

Decision Making: Equality andRelational Operators

Decision based on the truth or falsity of acondition

Equality operators

Relational operators

34

Decision Making: Equality and


35/46


35

Standard algebraic

equality operator orrelational operator

JavaScript equality

or relationaloperator

Sample

JavaScriptcondition

Meaning of

JavaScriptcondition

Equality operators

= == x == y x is equal to y!= x != y x is not equal to y

Relational operators

> > x > y x is greater than y

< < x < y x is less than y

>= x >= y x is greater than orequal to y


36/46


36

Operators Associativity Type* / % left to right multiplicative+ - left to right additive< >= left to right relational== != left to right equality= right to left assignmentFig. 7.17 Precedence and associativity of the

operators discussed so far.

1 2


37/46

welcome6.html

(1 of 3)

37

2 4

5 6 7

8 9 10 Using Relational Operators11

12 13


38/46

welcome6.html

(2 of 3)

38

26 if ( hour >= 12 )27 {28 // convert to a 12 hour clock29 hour = hour - 12;30

31 // determine whether it is before 6 PM32 if ( hour < 6 )33 document.write( "Good Afternoon, " );34

35 // determine whether it is after 6 PM36 if ( hour >= 6 )37 document.write( "Good Evening, " );38 }39

40 document.writeln( name +41 ", welcome to JavaScript programming!" );42 // -->43 44

45 46

47 48


39/46

39

welcome6.html

(3 of 3)

48

49 50
S l P 1


40/46

Sample Program 1

Write a script that gets from the user the radius of a circle and outputs

XHTML text that displays the circles diameter, circumference and

area. Use the constant value 3.14159 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 3.14159. The Math object is defined by

Java-Script and provides many common mathematical capabilities.]Use the following formulas (ris the radius):

diameter = 2r, circumference = 2PIr, area = PIr2.

INPUT: radius of a circle

OUTPUT:circles diameter, circumference and area

RELEVANT FORMULA:PI= 3.14159

diameter = 2r, circumference = 2PIr, area = PIr2

40

A li ti f J S i t


41/46

Application of JavaScript

There are two parts of an HTMLdocument; and .

JavaScript scripts can appear in either

part of a document, depending on theirpurpose.

Scripts that produce content only when

requested or that react to user interactions

are placed in the head of the document.

41

Application of Ja aScript


42/46


Example: function definitions and codeassociated 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.

42



43/46


Example: Simple CalculatorSource: http://dynamicdrive.com/dynamicindex11/cal.htm

43

http://dynamicdrive.com/dynamicindex11/cal.htmhttp://dynamicdrive.com/dynamicindex11/cal.htm


44/46


Example: Text Area Max Length ScriptSource: http://www.dynamicdrive.com/dynamicindex16/maxlength.htm

44

http://www.dynamicdrive.com/dynamicindex16/maxlength.htmhttp://www.dynamicdrive.com/dynamicindex16/maxlength.htm


45/46


Example: Form validation(Source: http://www.w3schools.com/jS/js_form_validation.asp)

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 e-mail address?

has the user entered a valid date?

has the user entered text in a numeric field?

45

Web Resources
http://www.w3schools.com/jS/js_form_validation.asphttp://www.w3schools.com/jS/js_form_validation.asp


46/46

Web Resources

http://www.w3schools.com/js/default.asp http://wp.netscape.com/eng/mozilla/3.0/handbook/java

script/index.html

http://webdeveloper.com/javascript/javascript_js_tutori

al.html http://www.hotscripts.com

46
http://www.w3schools.com/js/default.asphttp://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.htmlhttp://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.htmlhttp://webdeveloper.com/javascript/javascript_js_tutorial.htmlhttp://webdeveloper.com/javascript/javascript_js_tutorial.htmlhttp://www.hotscripts.com/http://www.hotscripts.com/http://webdeveloper.com/javascript/javascript_js_tutorial.htmlhttp://webdeveloper.com/javascript/javascript_js_tutorial.htmlhttp://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.htmlhttp://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.htmlhttp://www.w3schools.com/js/default.asp

chapter4 javascript (2)

Documents