Introduction to Web built on a two-tier client/server system - - PowerPoint PPT Presentation

▶
introduction to web built on a two tier client server
SMART_READER_LITE
LIVE PREVIEW

Introduction to Web built on a two-tier client/server system - - PowerPoint PPT Presentation

Nov 08, 2022 682 likes •1.33k views

Introduction to Web built on a two-tier client/server system Requests and responses through which a Web browser and Web server communicate happen with HTTP Behavior W3C W3C The World Wide Web Consortium "The dream behind

slide-1
SLIDE 1

Introduction to

slide-2
SLIDE 2

 Web built on a two-tier client/server system

  • Requests and responses through which a Web

browser and Web server communicate happen with HTTP

slide-3
SLIDE 3

Behavior W3C

slide-4
SLIDE 4

 W3C –The World Wide Web Consortium  "The dream behind the Web is of a common

information space in which we communicate by sharing information."

slide-5
SLIDE 5

 W3C was created in October 1994  W3C was created by Tim Berners-Lee, the

inventor of the Web

 W3C is organized as a Member Organization  W3C is working to Standardize the Web  W3C creates and maintains WWW Standards  W3C Standards are called W3C

Recommendations

slide-6
SLIDE 6

 The most important W3C standards are

  • HTML
  • CSS
  • XML
  • XSL
  • DOM
slide-7
SLIDE 7

 ECMA - European Computer Manufacturers

Association

 ECMA, founded in 1961, in order to meet the

need for standardizing computer languages and input/output codes.

slide-8
SLIDE 8

 For Web developers, the most important

standard is ECMAScript, the standardization

  • f JavaScript.

 With JavaScript, DOM objects can be added,

deleted, or changed.

slide-9
SLIDE 9

 JavaScript is an implementation of the

ECMAScript language standard and is typically used to enable programmatic access to computational objects within a host environment.

slide-10
SLIDE 10

 JavaScript (brief) history

  • Developed by Brendan Eich as Mocha
  • First introduced in Navigator (LiveScript)
  • Navigator 2.0: name changed to JavaScript 1.0
  • Microsoft released Internet Explorer 4.0 version of

JavaScript (Jscript)

 ECMAScript

  • International, standardized version of JavaScript
  • Most recent version: edition 3
slide-11
SLIDE 11

 Executes in the browser on the user’s

computer after the page elements are downloaded

 Reduces processing load on the Web server,

taking advantage of the client machine

 Speeds up user experience

slide-12
SLIDE 12

 When HTML was first developed, Web pages

were static

  • Static Web pages cannot change after the

browser renders them

 HTML and XHTML could only be used to

produce static documents

 Javascript

  • Client-side scripting language that allows Web

page authors to develop interactive Web pages and sites

slide-13
SLIDE 13

 Adds dynamic behavior to Web pages  Used to “remember” state  Access to browser information, form

elements, images

slide-14
SLIDE 14

 Executes on the Web server before the page is

presented to the visitor

 Can handle file manipulation, document

creation and modification

 Database connectivity  More secure, more powerful  PHP, ASP, ColdFusion, Java, CGI, etc.

slide-15
SLIDE 15
slide-16
SLIDE 16

1 <?xml version = "1.0" encoding = "utf-8" 8"?> ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <! <!--

  • - Fig. 6.2: welcome.html --
  • ->

6 <! <!--

  • - Displaying a line of text. --
  • ->

7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>A First Program in JavaScript</title> 10 <script type = "text/javascript"> 11 <! <!--

  • 12

document.writeln( 13 "<h1>Welcome to JavaScript Programming!</h1>" ); ); 14 // // --

  • ->

15 </script> 16 </head><body></body> 17 </html>

slide-17
SLIDE 17

 The browser’s document object represents

the XHTML document currently being displayed in the browser. The document

  • bject allows a script programmer to specify

XHTML text to be displayed in the XHTML document.

 JavaScript is case sensitive.

slide-18
SLIDE 18

 The document object’s writeln method

writes a line of XHTML text in the XHTML document.

slide-19
SLIDE 19

 Firefox

  • Web Developer
slide-20
SLIDE 20

 Firefox

  • Web Developer
  • Firebug Addon
slide-21
SLIDE 21

 Firefox

  • Web Developer
  • Firebug Addon

 Chrome

  • Developer Tools
slide-22
SLIDE 22

 Inspect  Web Console  Responsive Design View  Style Editor  Debugger  Error Console

slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

1 <?xml xml vers version =

  • n = "1.0

1.0" encodin ncoding = g = "utf "utf-8" 8"?> ?> 2 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 5 <! <!--

  • - Fig.
  • ig. 6.3:

.3: welc welcome2. me2.html html --

  • ->

6 <! <!--

  • - Print

rinting o ng one l ne line w ne with ith multi ultiple ple state tatements nts. . --

  • ->

7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/

  • rg/1999

1999/xhtm xhtml" l"> 8 <head head> 9 <tit <title> e>Prin Printin ting a g a Line Line with with Mul Multiple iple Sta Statemen ements ts</t </title itle> > 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!--

  • 12

docume cument.w nt.write( ite( "<h1 <h1 sty style = le = \"colo color: mage magenta nta\">" >" ); ); 13 docume cument.w nt.write( ite( "Wel Welcome come to to JavaS avaScrip cript " " + 14 "Prog Program ramming ming!</h !</h1>" >" ); ); 15 // // --

  • ->

16 </sc </script> ipt> 17 </hea /head>< d><body body></b ></body> dy> 18 </html html>

slide-26
SLIDE 26

1 <?xml xml vers version =

  • n = "1.0

1.0" encodin ncoding = g = "utf "utf-8" 8"?> ?> 2 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 5 <! <!--

  • - Fig.
  • ig. 6.5:

.5: welc welcome4. me4.html html --

  • ->

6 <! <!--

  • - Alert

lert dial dialog d

  • g displa

splaying ying mult multiple iple line lines. . --

  • ->

7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/

  • rg/1999

1999/xhtm xhtml" l"> 8 <head head> 9 <tit <title> e>Prin Printin ting Mu g Multip ltiple Li e Lines nes in a n a Dial Dialog Bo g Box</ti /title> tle> 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!--

  • 12

windo indow.a w.alert lert( ( "We "Welcom lcome to e to\nJav nJavaScr aScript pt\nP nProgr

  • grammi

amming!" ng!" ); ); 13 // // --

  • ->

14 </sc </script> ipt> 15 </hea /head> d> 16 <body body> 17 <p> <p>Click ick Refr Refresh ( sh (or R

  • r Reload

load) to ) to run run this this scri script a pt again. ain.</p> </p> 18 </bod /body> y> 19 </html html>

slide-27
SLIDE 27

1 <?xml xml vers version =

  • n = "1.0

1.0" encodin ncoding = g = "utf "utf-8" 8"?> ?> 2 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 5 <! <!--

  • - Fig.
  • ig. 6.7:

.7: welc welcome5. me5.html html --

  • ->

6 <! <!--

  • - Promp

rompt box box use used on

  • n a we

a welcome come scr screen.

  • en. -->

7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/

  • rg/1999

1999/xhtm xhtml" l"> 8 <head head> > 9 <tit <title> e>Usin Using P g Promp rompt an t and Ale Alert B rt Boxes xes</tit /title> e> 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!--

  • 12

var var name name; ; // st / string ring ente entered red by th y the us e user 13 14 // rea read th d the nam name fr e from th m the pr e prompt mpt box box as a s a stri string 15 name = me = win window.p

  • w.promp

rompt( ( "Ple "Please ase ent enter y er your n ur name" ame" ); ); 16 17 docume cument.w nt.writel iteln( n( "<h1>H h1>Hello ello, " " + nam name + + 18 ", we , welco lcome t me to Ja

  • JavaScr

aScript ipt progr rogrammi amming!</ g!</h1>" h1>" ); ); 19 // // --

  • ->

20 </sc </script> ipt> 21 </hea /head> d> 22 <body body> > 23 <p> <p>Click ick Refr Refresh ( sh (or R

  • r Reload

load) to ) to run run this this scri script a pt again. ain.</p> </p> 24 </bod /body> y> 25 </html html>

slide-28
SLIDE 28

 Keywords are words with special meaning in

JavaScript.

 The keyword var is used to declare the

names of variables.

 A variable name can be any valid identifier

consisting of letters, digits, underscores ( _ ) and dollar signs ($) that does not begin with a digit and is not a reserved JavaScript keyword.

slide-29
SLIDE 29

 By convention, variable-name identifiers

begin with a lowercase first letter. Each subsequent word should begin with a capital first letter. For example, identifier itemPrice has a capital P in its second word, Price.

 Comment with //  Multiline comments begin with delimiter /*

and end with delimiter */

slide-30
SLIDE 30

 The window object’s prompt method displays

a dialog into which the user can type a value. The first argument is a message (called a prompt) that directs the user to take a specific action. The optional second argument is the default string to display in the text field.

slide-31
SLIDE 31

1 <?xml xml vers version =

  • n = "1.0

1.0" encodin ncoding = g = "utf "utf-8" 8"?> ?> 2 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 5 <! <!--

  • - Fig.
  • ig. 6.9:

.9: addi addition. ion.html html --

  • ->

6 <! <!--

  • - Addit

ddition s

  • n scrip

cript. . --

  • ->

7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/

  • rg/1999

1999/xhtm xhtml" l"> 8 <head head> 9 <tit <title> e>An A An Addi ddition tion Pro Program ram</tit /title> e> 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!--

  • 12

var var firs firstNu tNumber mber; ; // // firs first st t string ing ente entered b ed by us y user r 13 var var seco secondN ndNumbe umber; r; // s secon econd s d strin tring en g entered ered by by user ser 14 var var numb number1 er1; ; // f // firs irst nu t number mber to a to add dd 15 var var numb number2 er2; ; // s // seco econd n nd numbe umber to to add add 16 var var sum; sum; // sum sum of

  • f numbe

umber1 a r1 and nu d number mber2 17 18 // rea read in d in firs first nu t number ber from from us user a er as a s a str string ing 19 firstN rstNumbe umber = w = windo indow.pro .prompt( mpt( "Ent "Enter f er first rst inte integer" er" ); ); 20 21 // rea read in d in seco second n nd number mber fro from use user as r as a st a string ring 22 second condNumb Number = r = wind window.pr w.prompt

  • mpt( "Ente

Enter s r secon econd in d integer eger" ); ); 23 24 // con convert vert numb numbers f s from rom stri strings t gs to in

  • integer

egers 25 number mber1 = 1 = parse arseInt( Int( firs firstNum tNumber ) er ); 26 number mber2 = 2 = parse arseInt( Int( seco secondNu ndNumber ber ); ); 27 28 sum = m = numb number1 + r1 + num number2; er2; // a / add t dd the n he number mbers 29

slide-32
SLIDE 32

30 // dis display play the the resu results ts 31 docume cument.w nt.writel iteln( n( "<h1>T h1>The s he sum is m is " " + sum sum + + "</ "</h1>" h1>" ); ); 32 // // --

  • ->

33 </sc </script> ipt> 34 </hea /head> d> 35 <body body> 36 <p> <p>Click ick Refr Refresh ( sh (or R

  • r Reload

load) to ) to run run the the scrip cript ag t again in</p> </p> 37 </ </body>

  • dy>

38 </html html>

slide-33
SLIDE 33

 The null keyword signifies that a variable has

no value. Note that null is not a string literal, but rather a predefined term indicating the absence of value. Writing a null value to the document, however, displays the word “null”.

 Function parseInt converts its string

argument to an integer.

 JavaScript has a version of the + operator for

string concatenation that enables a string and a value of another data type (including another string) to be concatenated.

slide-34
SLIDE 34

JavaScript

  • peration

Arithmetic

  • perator

Algebraic expression JavaScript expression Addition + f + 7

F + 7

Subtraction

  • p – c

P - c

Multiplication * bm

b * m

Division / x / y or x ÷ y or x y

x / y

Remainder % r mod s

r % s

slide-35
SLIDE 35

Operator(s) Operation(s) Order of evaluation (precedence) *, / or % Multiplication Division Remainder Evaluated first. If there are several such

  • perations, they are evaluated from left to right.

+ or - Addition Subtraction Evaluated last. If there are several such

  • perations, they are evaluated from left to right.
slide-36
SLIDE 36

1 <?xml version = "1.0" encoding = "utf-8" 8"?> ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <! <!--

  • - Fig. 6.17: welcome6.html --
  • ->

6 <! <!--

  • - Using equality and relational operators. --
  • ->

7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>Using Relational Operators</title> 10 <script type = "text/javascript"> 11 <! <!--

  • 12 var

var name; // string entered by the user 13 var var now = new new Date(); // current date and time 14 var var hour = now.getHours(); // current hour (0-23) 23) 15 16 // read the name from the prompt box as a string 17 name = window.prompt( "Please enter your name" ); 18 19 // determine whether it is morning 20 if if ( hour < 12 12 ) 21 document.write( "<h1>Good Morning, " ); ); 22

slide-37
SLIDE 37

23 // det determi ermine wh e whethe ether the the tim time is is PM PM 24 if if ( hou hour > r >= = 12 12 ) 25 { 26 // co / conve nvert t rt to a

  • a 12-hour

hour cl clock

  • ck

27 hour

  • ur = h

= hour

  • ur - 12

12; 28 29 // de / deter termine mine whe whether her it i it is bef before

  • re 6 PM

PM 30 if if ( ho ( hour < r < 6 ) 31 docu document. ent.writ write( ( "<h1 "<h1>Go >Good A

  • d After

fternoon,

  • on, "

" ); ); 32 33 // de / deter termine mine whe whether her it i it is aft after 6 er 6 PM PM 34 if if ( ho ( hour >= r >= 6 ) 35 docu document. ent.writ write( "<h1 "<h1>Go >Good E

  • d Eveni

vening, " g, " ); ); 36 } } // e // end if if 37 38 docume cument.w nt.writel iteln( n n( name + me + 39 ", we , welco lcome t me to Ja

  • JavaScr

aScript ipt progr rogrammi amming!</ g!</h1>" h1>" ); ); 40 // // --

  • ->

41 </sc </script> ipt> 42 </hea /head> d> 43 <body body> 44 <p> <p>Click ick Refr Refresh ( sh (or R

  • r Reload

load) to ) to run run this this scri script a pt again. ain.</p> </p> 45 </bod /body> y> 46 </html html>

slide-38
SLIDE 38

 JavaScript’s if statement allows a program to

make a decision based on the truth or falsity of a

  • condition. If the condition is met (i.e., the

condition is true), the statement in the body of the if statement is executed. If the condition is not met (i.e., the condition is false), the statement in the body of the if statement is not executed.

 Conditions in if statements can be formed by

using the equality operators and relational

  • perators.
slide-39
SLIDE 39

Standard algebraic equality operator

  • r

relational

  • perator

JavaScript equality or relational

  • perator

Sample JavaScript condition Meaning of JavaScript condition 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 or equal to y < <= x <= y x is less than or equal to y

slide-40
SLIDE 40

 We use JavaScript’s built-in Date object to

acquire the current local time.

 Create a new instance of an object by using

the new operator followed by the type of the

  • bject, Date, and a pair of parentheses.
slide-41
SLIDE 41

Operators Associativity Type * / % left to right multiplicative + - left to right additive < <= > >= left to right relational == != left to right equality = right to left assignment

slide-42
SLIDE 42

if (condition) { …. } else if (condition) { … } else { … }

slide-43
SLIDE 43

while (condition) { … }

slide-44
SLIDE 44

1 <?xml xml vers version =

  • n = "1.0

1.0" enco encodin ding = g = "utf "utf-8" 8"?> ?> 2 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC C "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 5 <! <!--

  • - Fig.
  • ig. 8.1:

.1: Whil WhileCoun Counter. ter.html tml --

  • ->

6 <! <!--

  • - Count
  • unter-cont

control rolled led repe repetitio ition.

  • n. --
  • ->

7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/

  • rg/1999

1999/xhtm xhtml" l"> 8 <head head> 9 <tit <title> e>Coun Counter ter-Contr

  • ntroll
  • lled R

ed Repet epetition tion</ti </title> le> 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!--

  • 12

var var coun counter ter = = 1; ; // // init initiali ializatio ation 13 14 while ile ( co ( counter nter <= <= 7 ) ) // re / repetit etition ion condi

  • ndition

tion 15 { 16 docum

  • cument

ent.wri .writeln teln( "<p s <p styl tyle = e = \"fon font-size size: " : " + + 17 coun counter + er + "ex ex\">XH ">XHTML TML font

  • nt size

size " + co + count unter + er + 18 "ex< "ex</p>" p>" ); ); 19 ++cou +counte nter; r; // // inc increme rement nt 20 } } //en //end wh d while le 21 // // --

  • ->

22 </sc </script> ipt> 23 </hea /head>< d><body body></b ></body> dy> 24 </html html>

slide-45
SLIDE 45
slide-46
SLIDE 46
slide-47
SLIDE 47

1 <?xml xml vers version =

  • n = "1.0

1.0" enco encodin ding = g = "utf "utf-8" 8"?> ?> 2 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC C "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 5 <! <!--

  • - Fig.
  • ig. 8.2:

.2: ForC ForCounte unter.ht r.html l --

  • ->

6 <! <!--

  • - Count
  • unter-cont

control rolled led repe repetitio ition wi n with t h the fo e for sta stateme tement.

  • t. --
  • ->

7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/

  • rg/1999

1999/xhtm xhtml" l"> 8 <head head> 9 <tit <title> e>Coun Counter ter-Contr

  • ntroll
  • lled R

ed Repet epetition tion</ti </title> le> 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!--

  • 12

// Ini Initial tializati zation,

  • n, repet

epetitio ition con conditi dition an n and d 13 // inc increme rementing ting are are all all incl included ded in t in the fo e for r 14 // // state tatemen ment he t header ader. 15 for for ( ( var var count

  • unter =

er = 1; cou counte nter <= r <= 7; + ; ++cou +counter nter ) 16 docum

  • cument

ent.wri .writeln teln( "<p s <p styl tyle = e = \"fon font-size size: " : " + + 17 coun counter + er + "ex ex\">XH ">XHTML TML font

  • nt size

size " + co + count unter + er + 18 "ex< "ex</p>" p>" ); ); 19 // // --

  • ->

20 </sc </script> ipt> 21 </hea /head>< d><body body></b ></body> dy> 22 </html html>

slide-48
SLIDE 48

1 <?xml version = "1.0" encoding = "utf "utf-8" 8"?> ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <! <!--

  • - Fig. 8.6: Interest.html --
  • ->

6 <! <!--

  • - Compound interest calculation with a for loop. --
  • ->

7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>Calculating Compound Interest</title> 10 <style type = "text/css"> 11 table { { width: 100% } 12 th th { { text-align: left } 13 </style> 14 <script type = "text/javascript"> 15 <! <!--

  • 16 var

var amount; // current amount of money 17 var var principal = 1000.0; ; // principal amount 18 var var rate = .05 .05; ; // interest rate 19 20 document.writeln( 21 "<table border = \"1 "1\">" ">" ); ); // begin the table 22 document.writeln( 23 "<caption>Calculating Compound Interest</caption>" ); ); 24 document.writeln( 25 "<thead><tr><th>Year</th>" >" ); // year column heading 26 document.writeln( 27 "<th>Amount on deposit</th>" ); ); // amount column heading 28 document.writeln( "</tr></thead><tbody>" ); ); 29

slide-49
SLIDE 49

30 // output a table row for each year 31 for for ( ( var var year = 1; year <= 10 10; ++year ) 32 { 33 amount = principal * Math.pow( 1.0 + rate, year ); 34 document.writeln( "<tr><td>" + year + 35 "</td><td>" + amount.toFixed(2) + 36 "</td></tr>" ); ); 37 } //end for 38 39 document.writeln( "</tbody></table>" ); ); 40 // // --

  • ->

41 </script> 42 </head><body></body> 43 </html>

slide-50
SLIDE 50

switch (variable) { case op1: …. break; Case op2: … break; … default: … break;

slide-51
SLIDE 51
slide-52
SLIDE 52

do { … } while (condition);

slide-53
SLIDE 53

 The break statement, when executed in a

while, for, do…while or switch statement, causes immediate exit from the

  • statement. Execution continues with the first

statement after the structure.

 The break statement is commonly used to

escape early from a loop or to skip the remainder of a switch statement.

slide-54
SLIDE 54

 The continue statement, when executed in

a while, for or do…while statement, skips the remaining statements in the body of the statement and proceeds with the next iteration of the loop.

  • In while and do…while statements, the loop-

continuation test evaluates immediately after the continue statement executes.

  • In for statements, the increment expression

executes, then the loop-continuation test evaluates.

slide-55
SLIDE 55

function function-name( parameter-list ) { declarations and statements }

slide-56
SLIDE 56

1 <?xml xml vers version =

  • n = "1.0

1.0" " enco encodin ding = g = "utf "utf-8" 8"?> ?> 2 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 5 <! <!--

  • - Fig.
  • ig. 9.2:

.2: Squa SquareInt eInt.htm .html --

  • ->

6 <! <!--

  • - Progr

rogrammer mmer-defi efined ned func function ion squa square.

  • e. -->

7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/

  • rg/1999

1999/xhtm xhtml" l"> 8 <head head> 9 <tit <title> e>A Pr A Progr

  • gramme

ammer-Def Defined ined squ square F re Funct unction

  • n</ti

</title tle> 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!--

  • 12

docume cument.w nt.writel iteln( n( "<h1>S h1>Squar quare the the num numbers ers from from 1 1 to 1 to 10</ 0</h1>" h1>" ); ); 13 14 // squ square are the n he numbe umbers fr s from 1

  • m 1 to 1

to 10 15 for for ( ( var var x = = 1; x ; x <= = 10 10; x+ ; x++ ) ) 16 docum

  • cument

ent.wri .writeln teln( "The The squ square are of "

  • f " + x

+ x + " i " is " s " + + 17 squa square( x e( x ) ) + + "<br "<br />" />" ); ); 18 19 // The The fol followin

  • wing sq

g square are func function ion defi definitio ition is n is exec executed uted 20 // onl

  • nly wh

y when th n the fu e functio ction is n is expl explicit icitly ca y called lled. 21 22 // squ square are funct unction ion defin efinitio ition 23 functi nction

  • n square

uare( y ( y ) 24 { 25 return turn y * y; * y; 26 } // end end fu functi nction s

  • n square

uare 27 // // --

  • ->

28 </sc </script> ipt> 29 </hea /head>< d><body body></b ></body> dy> 30 </html html>

slide-57
SLIDE 57

 Arrays are data structures consisting of

related data items (sometimes called collections of data items).

 JavaScript arrays are “dynamic” entities in

that they can change size after they are created.

slide-58
SLIDE 58
slide-59
SLIDE 59

Operators Associativity Type () [] . left to right highest ++ -- ! right to left unary * / % left to right multiplicative + - left to right additive < <= > >= left to right relational == != left to right equality && left to right logical AND || left to right logical OR ?: right to left conditional = += -= *= /= %= right to left assignment

slide-60
SLIDE 60

1 <?xml xml vers version =

  • n = "1.0

1.0" " enco encodin ding = g = "utf "utf-8" 8"?> ?> 2 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 5 <! <!--

  • - Fig.
  • ig. 10.3:

0.3: Ini InitArra Array.ht y.html l --

  • ->

6 <! <!--

  • - Initi

nitializi lizing t ng the el e elemen ements of s of an an arra rray. . --

  • ->

7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/

  • rg/1999

1999/xhtm xhtml" l"> 8 <head head> 9 <tit <title> e>Init Initial ializin izing an g an Arra Array</ti /title> tle> 10 <sty <style ty e type = pe = "tex "text/cs t/css"> 11 table ble { { wid width: th: 10em 10em } 12 th th { { tex text-alig align: n: left left } 13 </st </style> le> 14 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 15 <! <!--

  • 16

// cre create ate (decl declare) are) two two new new array rrays 17 var var n1 = n1 = new new Arra Array( y( 5 ); ); // a / alloc llocate ate five ive-elem element A nt Array rray 18 var var n2 = n2 = new new Arra Array() y(); ; // a // allo llocate cate emp empty Ar y Array ray 19 20 // ass assign ign value alues to s to each each ele element ent of A

  • f Array

ray n1 n1 21 for for ( ( var var i = = 0; i ; i < n1. n1.leng length; + h; ++i ) +i ) 22 n1[ i 1[ i ] ] = i; = i; 23 24 // cre create ate and i nd initi nitialize lize fiv five ele element ments in in Arra Array n2 n2 25 for for ( i ( i = = 0; i ; i < < 5; ++i ++i ) 26 n2[ i 2[ i ] ] = i; = i; 27 28

  • utput

tputArra Array( ( "Arr "Array ay n1:" n1:", n1 , n1 ); ); 29

  • utput

tputArra Array( ( "Arr "Array ay n2:" n2:", n2 , n2 ); ); 30

slide-61
SLIDE 61

31 // output the heading followed by a two-column table 32 // containing subscripts and elements of "theArray" 33 function outputArray( heading, theArray ) 34 { { 35 document.writeln( "<h2>" + heading + "</h2>" ); ); 36 document.writeln( "<table border = \"1 "1\"" "" ); ); 37 document.writeln( "<thead><th>Subscript</th>" + + 38 "<th>Value</th></thead><tbody>" ); 39 40 // output the subscript and value of each array element 41 for for ( ( var i = 0; i < theArray.length; i++ ) 42 document.writeln( "<tr><td>" + i + "</td><td>" + + 43 theArray[ i ] + "</td></tr>" ); 44 45 d document.writeln( "</tbody></table>" ); ); 46 } } // end function outputArray 47 // // --

  • ->

48 </script> 49 </head><body></body> 50 </html>

slide-62
SLIDE 62
slide-63
SLIDE 63