Document

Download Report

Transcript Document 

Chapter 9 - JavaScript: Control
Structures II
Outline
9.1
9.2
9.3
9.4
9.5
9.6
9.7
9.8
9.9
9.10
Introduction
Essentials of Counter-Controlled Repetition
for Repetition Structure
Examples Using the for Structure
switch Multiple-Selection Structure
do/while Repetition Structure
break and continue Statements
Labeled break and continue Statements
Logical Operators
Summary of Structured Programming
 2001 Prentice Hall, Inc. All rights reserved.
1
2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
whileCounter.html
<!-- Fig. 9.1: WhileCounter.html
-->
<!-- Counter-Controlled Repetition -->
<html xmlns = "http://www.w3.org/1999/xhtml">
The while loop will
<head>
value of counter is
<title>Counter-Controlled Repetition</title>
continue until the
greater than 7.
<script type = "text/javascript">
<!-var counter = 1;
// initialization
while ( counter <= 7 ) {
// repetition condition
document.writeln( "<p style = \"font-size: " +
counter + "ex\">XHTML font size " + counter +
"ex</p>" );
++counter;
// increment
}
// -->
</script>
Increment the counter.
</head><body></body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
3
Outline
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 9.2: ForCounter.html
-->
<!-- Counter-Controlled Repetition with for structure -->
Outline
ForCounter.html
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Counter-Controlled
Repetition</title>
Initialization
Repetition condition
<script type = "text/javascript">
Incrementing
<!-// Initialization, repetition condition and
// incrementing are all included in the for
// structure header.
for ( var counter = 1; counter <= 7; ++counter )
document.writeln( "<p style = \"font-size: " +
counter + "ex\">XHTML font size " + counter +
"ex</p>" );
// -->
</script>
</head><body></body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
5
Outline
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
6
9.3 For Repetition Structure
for keyword
Control variable
name
Final value of control variable
for which the condition is true
for ( var counter = 1 ; counter <= 7 ; ++counter )
Initial value of control variable
Increment of control variable
Loop-continuation condition
Fig. 9.3
Components of a typical for structure header.
 2001 Prentice Hall, Inc. All rights reserved.
7
9.4 Examples Using the for Structure
Establish
initial value
of control
variable.
var counter = 1
counter <= 7
true
document.writeln(
"<p style=\"font-size: "
+ counter +
"ex\">XHTML font size " +
counter + "ex</p>" );
false
Body of loop
(this may be many
statements)
Determine
if final value
of control
variable
has been
reached.
Fig. 9.4
Flowcharting a typical for repetition structure.
 2001 Prentice Hall, Inc. All rights reserved.
++counter
Increment
the control
variable.
8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Sum.html
<!-- Fig. 9.5: Sum.html
-->
<!-- Using the for repetition structure -->
<html xmlns = "http://www.w3.org/1999/xhtml">
The for loop will continue until
<head>
of number is greater than 100.
<title>Sum the Even Integers from 2 to 100</title>
<script type = "text/javascript">
Initialization.
<!-Repetition
var sum = 0;
the value
condition.
Incrementing.
for ( var number = 2; number <= 100; number += 2 )
sum += number;
document.writeln( "The sum of the even integers " +
"from 2 to 100 is " + sum );
// -->
</script>
</head><body></body>
</html>
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Outline
Interest.html
<!-- Fig. 9.6: interest.html
-->
<!-- Using the for repetition structure -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Calculating Compound Interest</title>
Opening table element.
<script type = "text/javascript">
<!-var amount, principal = 1000.0, rate = .05;
document.writeln(
"<table border = \"1\" width = \"100%\">" );
document.writeln(
"<caption>Calculating Compound Interest</caption>" );
document.writeln(
iteration of the for loop
"<thead><tr><th alignEach
= \"left\">Year</th>"
); creates a
document.writeln(
table row listing the year of the loan and
"<th align = \"left\">Amount on deposit</th>" );
the amount.
document.writeln( "</tr></thead>" );
for ( var year = 1; year <= 10; ++year ) {
amount = principal * Math.pow( 1.0 + rate, year );
document.writeln( "<tbody><tr><td>" + year +
"</td><td>" + Math.round( amount * 100 ) / 100 +
"</td></tr>" );
}
document.writeln( "</tbody></table>" );
// -->
</script>
 2001 Prentice Hall, Inc.
All rights reserved.
10
36
37
38
</head><body></body>
</html>
Outline
Interest.html
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 9.7: SwitchTest.html -->
<!-- Using the switch structure -->
SwitchTest.html
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Switching between XHTML List Formats</title>
<script type = "text/javascript">
Variable choice is given the value input by the
<!-user in the//
prompt
dialog.
var choice,
user’s choice
The
of choice
is evaluated
against
startTag,
// value
starting
list item
tag
endTag,
// ending
list item
each
of the values
of thetag
case labels.
validInput = true, // indicates if input is valid
listType;
// list type as a string
choice = window.prompt( "Select a list style:\n" +
"1 (bullet), 2 (numbered), 3 (lettered)", "1" );
The break statement causes program control
switch ( choice ) { to proceed with the first statement after the
case "1":
switch structure.
startTag = "<ul>";
endTag =
listType
break;
case "2":
startTag
endTag =
listType
break;
"</ul>";
= "<h1>Bullet List</h1>";
= "<ol>";
"</ol>";
= "<h1>Ordered List: Numbered</h1>";
 2001 Prentice Hall, Inc.
All rights reserved.
12
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
case "3":
startTag = "<ol type = \"A\">";
endTag = "</ol>";
listType = "<h1>Ordered List: Lettered</h1>";
break;
default:
validInput = false;
}
Outline
SwitchTest.html
If none of the cases match, variable
validInput is set to false.
if ( validInput == true ) {
document.writeln( listType + startTag );
for ( var i = 1; i <= 3; ++i )
If the user input a valid value, the list is
document.writeln( "<li>List item " + i + "</li>" );
created.
document.writeln( endTag );
}
else
document.writeln( "Invalid choice: " + choice );
// -->
</script>
Otherwise, the message “Invalid
in the browser.
</head>
choice” is displayed
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
13
Outline
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
14
Outline
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
15
9.5 switch Multiple-Selection Structure
casea
true
casea ac tion(s)
break
caseb ac tion(s)
break
casez ac tion(s)
break
false
caseb
true
false
.
.
.
casez
true
false
defaulta c tion(s)
Fig. 9.8
 2001 Prentice Hall, Inc. All rights reserved.
switch multiple-selection structure.
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DoWhileTest.html
<!-- Fig. 9.9: DoWhileTest.html
-->
<!-- Using the do/while structure -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using the do/while Repetition Structure</title>
<script type = "text/javascript">
Each iteration of the do/while loop
<!-a line of text with a header
var counter = writes
1;
element to the XHTML document.
do {
document.writeln( "<h" + counter
">This
is the
" +value
The loop+stops
when
"an h" + counter + " level head" + "</h" +
counter is greater than 6.
counter + ">" );
of
++counter;
} while ( counter <= 6 );
// -->
</script>
</head><body></body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
17
Outline
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
18
9.6 do/while Repetition Structure
action(s)
condition
true
false
Fig. 9.10 Flowcharting the do/while repetition structure.
 2001 Prentice Hall, Inc. All rights reserved.
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 9.11: BreakTest.html
<!-- Using the break statement
-->
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
When the value of variable count equals 5,
<title>
Using the break Statement
in astatement
for Structure
the break
causes program control
</title>
BreakTest.html
to
proceed to the first line outside the for loop.
<script type = "text/javascript">
<!-for ( var count = 1; count <= 10; ++count ) {
if ( count == 5 )
break; // break loop only if count == 5
document.writeln( "Count is: " + count + "<br />" );
}
document.writeln(
"Broke out of loop at count = " + count );
// -->
</script>
</head><body></body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
20
Outline
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 9.12: ContinueTest.html
<!-- Using the break statement
-->
-->
ContinueTest.htm
l
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
When the value of variable count equals 5, the
<title>
continue
causes program control to
Using the continue Statement
in statement
a for Structure
</title>
proceed to the next iteration of the for loop.
<script type = "text/javascript">
<!-for ( var count = 1; count <= 10; ++count ) {
if ( count == 5 )
continue; // skip remaining code in loop
// only if count == 5
document.writeln( "Count is: " + count + "<br />" );
}
document.writeln( "Used continue to skip printing 5" );
// -->
</script>
</head><body></body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
22
Outline
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 9.13: BreakLabelTest.html
-->
<!-- Using the break statement with a Label -->
Outline
BreakLabelTest.h
tml
stop is the label for the break statement.
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using the break Statement with a Label</title>
When the break statement is encountered, program
<script type = "text/javascript">
<!-control proceeds to the first line outside the stop block
stop: {
// labeled compound
statement
and not just
the for loop where the statement is found.
for ( var row = 1; row <= 10; ++row ) {
for ( var column = 1; column <= 5 ; ++column ) {
if ( row == 5 )
break stop; // jump to end of stop block
document.write( "* " );
}
document.writeln( "<br />" );
}
// the following line is skipped
document.writeln( "This line should not print" );
}
 2001 Prentice Hall, Inc.
All rights reserved.
24
31
32
33
34
35
36
document.writeln( "End of script" );
// -->
</script>
</head><body></body>
</html>
Outline
BreakLabelTest.h
tml
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ContinueLabelTes
t.html
<!-- Fig. 9.14: ContinueLabelTest.html -->
<!-- Using the continue statement
-->
nextRow is the label for the continue
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using the continue Statement with a Label</title>
statement.
If the value of variable column is greater than the
statement
<script type = "text/javascript">
value of variable row, the continue
<!-nextRow:
// target label of
continue
statement
causes
the next
interation of the loop.
for ( var row = 1; row <= 5; ++row ) {
document.writeln( "<br />" );
for ( var column = 1; column <= 10; ++column ) {
If the continue statement is performed,
the string “* “
if ( column > row )
method write does not print
continue nextRow; // next iteration of
in the
// XHTML
labeled document.
loop
document.write( "* " );
}
}
// -->
</script>
</head><body></body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
26
Outline
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
27
9.9 Logical Operators
e xp re ssio n1
e xp re ssio n2
e xp re ssio n1 && e xp re ssio n2
false
false
false
false
true
true
Fig. 9.15 Truth ta b le
true
false
true
false
false
true
fo r the
&& (lo g ic a l AND) o p e ra to r.
exp ression1
exp ression2
exp ression1 || exp ression2
false
false
false
false
true
true
Fig. 9.16 Truth ta b le
true
false
true
true
true
true
fo r the
|| (lo g ic a l OR) op e ra tor.
exp ression
!exp ressio n
false
true
true
Fig. 9.17 Truth ta b le
false
fo r op e ra to r ! (lo g ic a l neg a tion).
 2001 Prentice Hall, Inc. All rights reserved.
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 9.18: LogicalOperators.html
<!-- Demonstrating Logical Operators
Outline
LogicalOperators
.html
-->
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Demonstrating the Logical Operators</title>
Each expression will
<script type = "text/javascript">
<!-or false using the
document.writeln(
AND.
"<table border = \"1\" width = \"100%\">"
);
document.writeln(
"<caption>Demonstrating Logical " +
"Operators</caption" );
evaluate to true
rules of logical
Each expression will evaluate to
true or false using the rules of
logical OR.
document.writeln(
"<tr><td width = \"25%\">Logical AND (&&)</td>" +
"<td>false && false: " + ( false && false ) +
"<br />false && true: " + ( false && true ) +
"<br />true && false: " + ( true && false ) +
"<br />true && true: " + ( true && true ) +
"</td>" );
document.writeln(
"<tr><td width = \"25%\">Logical OR (||)</td>" +
"<td>false || false: " + ( false || false ) +
"<br />false || true: " + ( false || true ) +
"<br />true || false: " + ( true || false ) +
"<br />true || true: " + ( true || true ) +
"</td>" );
 2001 Prentice Hall, Inc.
All rights reserved.
29
36
37
38
39
40
41
42
43
44
45
46
47
document.writeln(
"<tr><td width = \"25%\">Logical NOT (!)</td>" +
"<td>!false: " + ( !false ) +
"<br />!true: " + ( !true ) + "</td>" );
document.writeln( "</table>" );
// -->
</script>
Outline
LogicalOperators
.html
These expressions demonstrate the
use of logical NOT.
</head><body></body>
</html>
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
30
9.10 Summary of Structured Programming
Op era tors
Assoc ia tivity
Typ e
()
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. 9.19 Prec ed e nc e a nd a ssoc ia tivity of the op e ra tors d isc ussed so fa r.
 2001 Prentice Hall, Inc. All rights reserved.
31
9.10 Summary of Structured Programming
Rep etition
Se lectio n
whilestruc ture
struc ture
i
f
/
e
l
s
e
(d ouble se lec tion)
T
T
Seq uenc e
struc ture
i
f
(sing le selec tio n)
F
T
F
F
do/whilestruc ture
.
.
.
s
witchstruc ture
(multiple se lec tion)
break
T
break
T
F
T
F
forstruc ture
F
.
.
.
break
T
F
T
F
Fig. 9.20 JavaScript’s single-entry/single-exit sequence, selection and repetition structures.
 2001 Prentice Hall, Inc. All rights reserved.
32
9.10 Summary of Structured Programming
Rules for Form ing Struc tured Pro g ra m s
1)
Begin with the “simplest flowchart” (Fig. 9.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. 9.21 Rules for fo rm ing struc tured
 2001 Prentice Hall, Inc. All rights reserved.
p rog ra m s.
33
9.10 Summary of Structured Programming
Fig. 9.22 Simplest flowchart.
 2001 Prentice Hall, Inc. All rights reserved.
34
9.10 Summary of Structured Programming
Rule 2
Rule 2
Rule 2
.
.
.
Fig. 9.23 Repeatedly applying rule 2 of Fig. 9.21 to the simplest flowchart.
 2001 Prentice Hall, Inc. All rights reserved.
35
Rule 3
Rule 3
Fig. 9.24 Applying rule 3 of Fig. 9.21 to the simplest flowchart
 2001 Prentice Hall, Inc. All rights reserved.
Rule 3
36
9.10 Summary of Structured Programming
Stac ke d b uilding b lo c ks
Nested build ing bloc ks
Ov erla pping b uilding bloc ks
(Illega l in struc tured pro gra ms)
Fig. 9.25 Stacked, nested and overlapped building blocks.
 2001 Prentice Hall, Inc. All rights reserved.
37
9.10 Summary of Structured Programming
Fig. 9.26 Unstructured flowchart.
 2001 Prentice Hall, Inc. All rights reserved.