8 9 10 11 12 13 14 15 16 17 18 · fig. 10.2 counter-controlled repetition with the for structure ....

Chapter 10 JavaScript/JScript: Control Structures II 289

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

10JavaScript/JScript: Control Structures II

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD> 6 <TITLE> Counter-Controlled Repetition </TITLE>78 <SCRIPT LANGUAGE = "JavaScript" >9 var counter = 1; // initialization

1011 while ( counter <= 7 ) { // repetition condition12 document.writeln( "<P><FONT SIZE = '" + counter +13 "'>HTML font size " + counter + "</FONT></P>" );14 ++counter; // increment15 }16 </SCRIPT>1718 </HEAD><BODY></BODY>19 </HTML>

Fig. 10.1 Counter-controlled repetition.

IW3HTP_10.fm Page 289 Thursday, April 13, 2000 12:32 PM

290 JavaScript/JScript: Control Structures II Chapter 10


1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Counter-Controlled Repetition </TITLE>78 <SCRIPT LANGUAGE = "JavaScript" >9 // Initialization, repetition condition and incrementing

10 // are all included in the for structure header. 11 for ( var counter = 1; counter <= 7; ++counter ) 12 document.writeln( "<P><FONT SIZE = '" + counter +13 "'>HTML font size " + counter + "</FONT></P>" );14 </SCRIPT>1516 </HEAD><BODY></BODY>17 </HTML>

Fig. 10.2 Counter-controlled repetition with the for structure .

IW3HTP_10.fm 90 Thursday, April 13, 2000 12:32 PM



Fig. 10.3 Components of a typical for header.

for ( var counter = 1; counter <= 7; ++counter )

Initial value of control variable Increment of control variable

Control variable name Final value of control variable for which the condition is true

for keyword

Loop-continuation condition




Fig. 10.4 Flowcharting a typical for repetition structure.

counter <= 7true

false

var counter = 1

++counter

Establish initial value of control variable

Determine if final value of control variable has been reached

Body of loop (this may be many statements)

Increment the control variable

document.writeln( "<P><FONT SIZE='" + counter + "'>HTML font size " + counter + "</FONT></P>");


1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Sum the Even Integers from 2 to 100</TITLE > 78 <SCRIPT LANGUAGE = "JavaScript" >9 var sum = 0;

1011 for ( var number = 2; number <= 100; number += 2 )12 sum += number;1314 document.writeln( "<BIG>The sum of the even integers " +15 "from 2 to 100 is " + sum + "</BIG>" );16 </SCRIPT>1718 </HEAD><BODY></BODY>19 </HTML>

Fig. 10.5 Summation with for .

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Calculating Compound Interest </TITLE> 78 <SCRIPT LANGUAGE = "JavaScript" >9 var amount, principal = 1000.0, rate = .05;

1011 document.writeln( "<TABLE BORDER = '1' WIDTH = '100%'>" );12 document.writeln( "<TR><TD WIDTH = '100'><B>Year</B></TD>" );13 document.writeln( 14 "<TD><B>Amount on deposit</B></TD></TR>" );15

16 for ( var year = 1; year <= 10; ++year ) {17 amount = principal * Math.pow( 1.0 + rate, year ); 18 document.writeln( "<TR><TD>" + year + "</TD><TD>" + 19 Math.round( amount * 100 ) / 100 + "</TD></TR>" );20 }2122 document.writeln( "</TABLE>" );23 </SCRIPT>2425 </HEAD><BODY></BODY>26 </HTML>

Fig. 10.6 Calculating compound interest with for .

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Switching between HTML List Formats </TITLE>78 <SCRIPT LANGUAGE = "JavaScript" >9 var choice, // user’s choice

10 startTag, // starting list item tag11 endTag, // ending list item tag12 validInput = true , // indicates if input is valid13 listType; // list type as a string1415 choice = window.prompt( "Select a list style:\n" + 16 "1 (bullet), 2 (numbered), 3 (lettered)", "1" );17 18 switch ( choice ) {19 case "1": 20 startTag = "<UL>";21 endTag = "</UL>";22 listType = "<H1>Bullet List</H1>"23 break ;24 case "2":25 startTag = "<OL>";26 endTag = "</OL>";27 listType = "<H1>Ordered List: Numbered</H1>"28 break ;29 case "3":30 startTag = "<OL TYPE = 'A'>";31 endTag = "</OL>";32 listType = "<H1>Ordered List: Lettered</H1>"33 break ;34 default :35 validInput = false ; 36 }37 38 if ( validInput == true ) { 39 document.writeln( listType + startTag );40 41 for ( var i = 1; i <= 3; ++i )42 document.writeln( "<LI>List item " + i + "</LI>" );43 44 document.writeln( endTag );45 }46 else47 document.writeln( "Invalid choice: " + choice ); 48 </SCRIPT>4950 </HEAD>51 <BODY>52 <P>Click Refresh (or Reload) to run the script again </P>53 </BODY>

Fig. 10.7 An example using switch (part 1 of 3).



54 </HTML>





Fig. 10.8 The switch multiple-selection structure.

case a case a action(s)true

false

.

.

.

break

case b case b action(s) break

false

false

case z case z action(s) break

default action(s)

true

true


1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Using the do/while Repetition Structure </TITLE>78 <SCRIPT LANGUAGE = "JavaScript" >9 var counter = 1;

10 11 do { 12 document.writeln( "<H" + counter + ">This is an H" +13 counter + " level head" + "</H" + counter + ">" ); 14 15 ++counter;16 } while ( counter <= 6 );17 </SCRIPT>1819 </HEAD><BODY></BODY>20 </HTML>

Fig. 10.9 Using the do/while repetition structure.



Fig. 10.10 Flowcharting the do/while repetition structure.

conditiontrue

action(s)

false


1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Using the break Statement in a for Structure </TITLE> 78 <SCRIPT LANGUAGE = "JavaScript" >9 for ( var count = 1; count <= 10; ++count ) {

10 if ( count == 5 )11 break ; // break loop only if count == 51213 document.writeln( "Count is: " + count + "<BR>" );14 }1516 document.writeln( "Broke out of loop at count = " + count );17 </SCRIPT> 1819 </HEAD><BODY></BODY>20 </HTML>

Fig. 10.11 Using the break statement in a for structure .

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Using the break Statement in a for Structure </TITLE> 78 <SCRIPT LANGUAGE = "JavaScript" >9 for ( var count = 1; count <= 10; ++count ) {

10 if ( count == 5 )11 continue ; // skip remaining code in loop12 // only if count == 51314 document.writeln( "Count is: " + count + "<BR>" );15 }1617 document.writeln( "Used continue to skip printing 5" );18 </SCRIPT> 1920 </HEAD><BODY></BODY>21 </HTML>

Fig. 10.12 Using the continue statement in a for structure .

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Using the break Statement with a Label </TITLE>78 <SCRIPT LANGUAGE = "JavaScript" >9 stop: { // labeled compound statement

10 for ( var row = 1; row <= 10; ++row ) {11 for ( var column = 1; column <= 5 ; ++column ) {1213 if ( row == 5 )14 break stop; // jump to end of stop block1516 document.write( "* " );17 }1819 document.writeln( "<BR>" );20 }2122 // the following line is skipped23 document.writeln( "This line should not print" );24 }2526 document.writeln( "End of script" );27 </SCRIPT>2829 </HEAD><BODY></BODY>30 </HTML>

Fig. 10.13 Using a labeled break statement in a nested for structure.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Using the continue Statement with a Label </TITLE>78 <SCRIPT LANGUAGE = "JavaScript" >9 nextRow: // target label of continue statement

10 for ( var row = 1; row <= 5; ++row ) {11 document.writeln( "<BR>" );1213 for ( var column = 1; column <= 10; ++column ) {1415 if ( column > row )16 continue nextRow; // next iteration of17 // labeled loop18 19 document.write( "* " );20 }21 }22 </SCRIPT>2324 </HEAD><BODY></BODY>25 </HTML>

Fig. 10.14 Using a labeled continue statement in a nested for structure .



expression1 expression2 expression1 && expression2

false false false

false true false

true false false

true true true

Fig. 10.15 Truth table for the && (logical AND) operator.




\

expression1 expression2 expression1 || expression2

false false false

false true true

true false true

true true true

Fig. 10.16 Truth table for the || (logical OR) operator.




expression ! expression

false true

true false

Fig. 10.17 Truth table for operator ! (logical negation).


1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>3 45 <HEAD>6 <TITLE> Demonstrating the Logical Operators </TITLE>78 <SCRIPT LANGUAGE = "JavaScript" >9 document.writeln( "<TABLE BORDER = '1' WIDTH = '100%'>" );

10 11 document.writeln( 12 "<TR><TD WIDTH = '25%'>Logical AND (&&)</TD>" +13 "<TD>false && false: " + ( false && false ) +14 "<BR>false && true: " + ( false && true ) +15 "<BR>true && false: " + ( true && false ) +16 "<BR>true && true: " + ( true && true ) + "</TD>" );1718 document.writeln( 19 "<TR><TD WIDTH = '25%'>Logical OR (||)</TD>" +20 "<TD>false || false: " + ( false || false ) +21 "<BR>false || true: " + ( false || true ) +22 "<BR>true || false: " + ( true || false ) +23 "<BR>true || true: " + ( true || true ) + "</TD>" );2425 document.writeln( 26 "<TR><TD WIDTH = '25%'>Logical NOT (!)</TD>" +27 "<TD>!false: " + ( !false ) +28 "<BR>!true: " + ( !true ) + "</TD>" );2930 document.writeln( "</TABLE>" ); 31 </SCRIPT>3233 </HEAD><BODY></BODY>34 </HTML>

Fig. 10.18 Demonstrating the logical operators (part 1 of 2).



Fig. 10.18 Demonstrating the logical operators (part 2 of 2).




Operators Associativity Type

() left to right parentheses

++ -- ! 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

Fig. 10.19 Precedence and associativity of the operators discussed so far.




Fig. 10.20 JavaScript’s single-entry/single-exit sequence, selection and repetition structures.

T

F

if s

tru

ctu

re(s

ing

le s

ele

ctio

n)

TF

if/e

lse

str

uc

ture

(do

ub

le s

ele

ctio

n)

T

F

switc

h s

tru

ctu

re(m

ulti

ple

se

lec

tion

) bre

ak

T

F

bre

ak

T

Fb

rea

k

. . .

Se

qu

en

ceS

ele

ctio

nR

ep

etit

ion

T

F

wh

ile s

tru

ctu

re

T

F

for

str

uc

ture

T

F

do

/wh

ile s

tru

ctu

re

…




Rules for Forming Structured Programs

1) Begin with the “simplest flowchart” (Fig. 10.22).

2) Any rectangle (action) can be replaced by two rectangles (actions) in sequence.

3) Any rectangle (action) can be replaced by any control structure (sequence, if , if /else , switch , while , do /while or for ).

4) Rules 2 and 3 may be applied as often as you like and in any order.

Fig. 10.21 Rules for forming structured programs.




Fig. 10.22 The simplest flowchart.




Fig. 10.23 Repeatedly applying rule 2 of Fig. 10.21 to the simplest flowchart.

.

.

.

Rule 2 Rule 2 Rule 2




Fig. 10.24 Applying rule 3 of Fig. 10.21 to the simplest flowchart.

Rule 3

Rule 3Rule 3




Fig. 10.25 Stacked, nested and overlapped building blocks.

Stacked building blocks Nested building blocks

Overlapping building blocks(Illegal in structured programs)




Fig. 10.26 An unstructured flowchart.


8 9 10 11 12 13 14 15 16 17 18 · fig. 10.2 counter-controlled repetition with the for structure ....

Documents