Lecture 4 Java Script.pptx

8/17/2019 Lecture 4 Java Script.pptx

1/32

Introduction to Java Script


2/32

2

Introduction

JavaScript scripting language Enhances functionality and appearance Client-side scripting

Makes pages more dynamic and interactive

Web broser contains a JavaScript interpreter!JavaScript is an "b#ect "riented $rogramming

%""$& language! 'ttributes %data& and behaviors %methods& are associated ith

the ob#ect!


3/32

(

Simple JavaScript $rogram

Inline scripting Written in the or of a document tag JavaScript Single-line comment symbol) //

E*ample)

script code here

// - - >


4/32

+

$rogramming ith JavaScript %,&

document ob#ect) the ./M0 document the broser is currently displaying

' statement should end ith a semicolon (;)!

JavaScript is case sensitive!riten method rites a line in the document

document"riten(“$ecome”);


5/32

1

elcome!html

%, of ,&

1


6/32

elcome2!html

%, of ,&


7/32

3

elcome(!html

, of ,

1


8/32

4

$rogramming ith JavaScript %2&

Escape character % \ & Indicates 5special6 character is used in the string

indo ob#ect ) a broser indo!

' Windo ob#ect is created automatically ith every instanceof a 7body8 or 7frameset8 tag

aert method creates a 9ialog bo* indo"aert(“ecome”);


9/32

:

elcome+!html

, of ,


10/32

,;

Escape se


11/32

,,

E*ample

JavaScript)document"riten( “


12/32

,2

>ariables

>ariables are used to store data! ?eyord ) var

' variable@s value can change during the script! Aou can refer to a variable by name to see its value or to

change its value!Bame of a variable ) a series of characters

letters digits underscores% D & and dollar signs %& no hite space not begin ith a digit not a keyord!


13/32

,(

Fse >ariables

9eclare a variable) var name; var siGe; var nameH siGeG

'ssign a value to a variable) name = “1isa”; siGe = I';

Combine to steps)

var name = “1isa”;


14/32

,+

9ynamic Welcome $age

' script can adapt the content based on input fromthe user or other variables

prompt method of indo ob#ect indo"prompt(“ease enter your name”H “1isa”);


15/32

,1

7html8 7head8

7title8Fsing $rompt and 'lert Ho*es7title8

7script type Kte*t#avascriptK8 7L-- var nameG string entered by the user

read the name from the prompt bo* as a string name indo!prompt% K$lease enter your nameK 5al'ntK &G

document!riteln% K7h,8.ello K N name NK elcome to JavaScript programmingL7h,8K &G

--8 7script8

7head8 7body87p8Click =efresh %or =eload& to run this script again!7p87body8

7html8


16/32

,


17/32

,3

Oig! 3!3 $rompt dialog displayed by the window ob#ectPs prompt method!

)his is the pro&pt

to the user.

)his is the default value that

appears when the dialog

opens.

)his is the text field in which

the user types the value.

*hen the user clic!s OK ' the

value typed by the user is returned

to the progra& as a string.


18/32

,4

'rithmetic

JavaScript performs arithmetic calculations! 'rithmetic operators) 'ddition) numberne B number+o Subtraction) numberne J E Multiplication) numberne K number+o 9ivision) number+o / L

=ules of operator precedence a K ( b J c )


19/32

,:

'dding Integers

$rompt user for to integers and calculate the sumparse2nt method Converts its string argument to an integer

'ssignment statement sum = number# B numberI;

If user types a non-integer value or clicks *ance button aruntime logic error ill occur! 8a8 %not a number&) “+he sum is 8a8”


20/32

2;

7html8 7head8 7title8'n 'ddition $rogram7title8

7script type Kte*t#avascriptK8 7L-- var firstBumber first string entered by user

secondBumber second string entered by user number, first number to add

number2 second number to addsumG sum of number, and number2

read in first number from user as a string firstBumber indo!prompt% KEnter first integerK K;K &G read in second number from user as a string secondBumber indo!prompt% KEnter second integerK K;K &G

convert numbers from strings to integers

number, parseInt% firstBumber &Gnumber2 parseInt% secondBumber &G

add the numbers

sum number, N number2G

display the results

document!riteln% K7h,8/he sum is K N sum N K7h,8K &G --8 7script8

7head8 7body8 7p8Click =efresh %or =eload& to run the script again7p8 7body8 7html8


21/32

2,


22/32

22

9isplay Oloating $oint Bumber

toOi*ed%& function

E*ample)

var number = 2;document.writeln(“


23/32

'rithmetic

Many scripts perform arithmetic calculations E*pressions in JavaScript must be ritten in straight-line form


24/32

'rithmetic

--


25/32

$recedence of arithmetic operators


26/32

'rithmetic

& = 2 ' ' * ' +;

2 ' is , (Leftmost multiplication)

& = , ' * ' +;

, ' is , (Leftmost multiplication)

& = , * ' +;

* ' is (Multiplication before addition)

& = , +;

, is -(Leftmost addition)

& = - +;

- + is +2 (Last addition)

& = +2; (Last operation—place 72 into y )

Step 1.

Step 2.

Step 5.

Step 3.

Step .

Step !.


27/32

9ecision Making) E


28/32

9ecision Making) E


29/32

welco&e+.ht&l

,- of /


30/32

welco&e+.ht&l

,0 of /


31/32


32/32

9ecision Making) E

Lecture 4 Java Script.pptx

Documents

Transcript of Lecture 4 Java Script.pptx