8/17/2019 Lecture 4 Java Script.pptx
1/32
Introduction to Java Script
8/17/2019 Lecture 4 Java Script.pptx
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!
8/17/2019 Lecture 4 Java Script.pptx
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
// - - >
8/17/2019 Lecture 4 Java Script.pptx
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”);
8/17/2019 Lecture 4 Java Script.pptx
5/32
1
elcome!html
%, of ,&
1
8/17/2019 Lecture 4 Java Script.pptx
6/32
elcome2!html
%, of ,&
8/17/2019 Lecture 4 Java Script.pptx
7/32
3
elcome(!html
, of ,
1
8/17/2019 Lecture 4 Java Script.pptx
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”);
8/17/2019 Lecture 4 Java Script.pptx
9/32
:
elcome+!html
, of ,
8/17/2019 Lecture 4 Java Script.pptx
10/32
,;
Escape se
8/17/2019 Lecture 4 Java Script.pptx
11/32
,,
E*ample
JavaScript)document"riten( “
8/17/2019 Lecture 4 Java Script.pptx
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!
8/17/2019 Lecture 4 Java Script.pptx
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”;
8/17/2019 Lecture 4 Java Script.pptx
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”);
8/17/2019 Lecture 4 Java Script.pptx
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
8/17/2019 Lecture 4 Java Script.pptx
16/32
,
8/17/2019 Lecture 4 Java Script.pptx
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.
8/17/2019 Lecture 4 Java Script.pptx
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 )
8/17/2019 Lecture 4 Java Script.pptx
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”
8/17/2019 Lecture 4 Java Script.pptx
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
8/17/2019 Lecture 4 Java Script.pptx
21/32
2,
8/17/2019 Lecture 4 Java Script.pptx
22/32
22
9isplay Oloating $oint Bumber
toOi*ed%& function
E*ample)
var number = 2;document.writeln(“
8/17/2019 Lecture 4 Java Script.pptx
23/32
'rithmetic
Many scripts perform arithmetic calculations E*pressions in JavaScript must be ritten in straight-line form
8/17/2019 Lecture 4 Java Script.pptx
24/32
'rithmetic
--
8/17/2019 Lecture 4 Java Script.pptx
25/32
$recedence of arithmetic operators
8/17/2019 Lecture 4 Java Script.pptx
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 !.
8/17/2019 Lecture 4 Java Script.pptx
27/32
9ecision Making) E
8/17/2019 Lecture 4 Java Script.pptx
28/32
9ecision Making) E
8/17/2019 Lecture 4 Java Script.pptx
29/32
welco&e+.ht&l
,- of /
8/17/2019 Lecture 4 Java Script.pptx
30/32
welco&e+.ht&l
,0 of /
8/17/2019 Lecture 4 Java Script.pptx
31/32
8/17/2019 Lecture 4 Java Script.pptx
32/32
9ecision Making) E
Top Related