Scribd
Upload
126 views

JS Control Statements II

The document outlines Chapter 9 of a JavaScript textbook, which covers additional control statements like for loops, do-while loops, and switch statements. It includes objectives, introductions, and examples of using for loops to calculate sums and compound interest. Figures and code samples are provided to demonstrate counter-controlled repetition and using for loops to iterate with initialization, condition, and increment variables.

Uploaded by

api-3760405
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
126 views

JS Control Statements II

The document outlines Chapter 9 of a JavaScript textbook, which covers additional control statements like for loops, do-while loops, and switch statements. It includes objectives, introductions, and examples of using for loops to calculate sums and compound interest. Figures and code samples are provided to demonstrate counter-controlled repetition and using for loops to iterate with initialization, condition, and increment variables.

Uploaded by

api-3760405
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 54

Chapter 9 - JavaScript: Control

Statements II
Outline
9.1 Introduction
9.2 Essentials of Counter-Controlled Repetition
9.3 for Repetition Statement
9.4 Examples Using the for Statement
9.5 switch Multiple-Selection Statement
9.6 do…while Repetition Statement
9.7 break and continue Statements
9.8 Labeled break and continue Statements
9.9 Logical Operators
9.10 Summary of Structured Programming
9.11 Web Resources

 2004 Prentice Hall, Inc. All rights reserved.


Objectives

• In this lesson, you will learn:


– To be able to use the for and do…while repetition
statements to execute statements in a program repeatedly.
– To understand multiple selection using the switch selection
statement.
– To be able to use the break and continue program-control
statements.
– To be able to use the logical operators.

 2004 Prentice Hall, Inc. All rights reserved.


9.1 Introduction

• Continuation of Chapter 8
– Theory and principles of structured programming

 2004 Prentice Hall, Inc. All rights reserved.


9.2 Essentials of Counter-Controlled
Repetition
• Counter-controlled repetition
– Name of a control
– Initial value
– Increment or decrement
– Final value

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.1: WhileCounter.html --> WhileCounter.html
6 <!-- Counter-Controlled Repetition --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Counter-Controlled Repetition</title>
11
12 <script type = "text/javascript">
13 <!--
14 var counter = 1; // initialization
15
16 while ( counter <= 7 ) { // repetition condition
17 document.writeln( "<p style = \"font-size: " +
18 counter + "ex\">XHTML font size " + counter +
19 "ex</p>" );
20 ++counter; // increment
21 }
22 // -->
23 </script>
24

 2004 Prentice Hall, Inc.


All rights reserved.
25 </head><body></body>
26 </html>
Outline

WhileCounter.html
(2 of 2)

 2004 Prentice Hall, Inc.


All rights reserved.
9.3 for Repetition Statement

• for repetition statement


– Handles all the details of counter-controlled repetition
– for structure header
• The first line

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.2: ForCounter.html --> ForCounter.html
6 <!-- Counter-Controlled Repetition with for statement --> (1 of 1)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Counter-Controlled Repetition</title>
11
12 <script type = "text/javascript">
13 <!--
14 // Initialization, repetition condition and
15 // incrementing are all included in the for
16 // statement header.
17 for ( var counter = 1; counter <= 7; ++counter )
18 document.writeln( "<p style = \"font-size: " +
19 counter + "ex\">XHTML font size " + counter +
20 "ex</p>" );
21 // -->
22 </script>
23
24 </head><body></body>
25 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
9.3 for Repetition Statement

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 for statement header components.

 2004 Prentice Hall, Inc. All rights reserved.


9.3 for Repetition Statement

Establish
initial value
of control
variable.
var counter = 1

document.writeln(
true "<p style=\"font-size: "
counter <= 7 ++counter
+ counter +
Increment
"ex\">XHTML font size " +
counter + "ex</p>" ); the control
false variable.
Body of loop
Determine
(this may be many
if final value
statements)
of control
variable
has been
reached.

Fig. 9.4 for repetition structure flowchart.

 2004 Prentice Hall, Inc. All rights reserved.


9.4 Examples Using the for Statement

• Summation with for


• Compound interest calculation with for loop
– Math object
• Method pow
• Method round

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.5: Sum.html --> Sum.html
6 <!-- Using the for repetition statement --> (1 of 1)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Sum the Even Integers from 2 to 100</title>
11
12 <script type = "text/javascript">
13 <!--
14 var sum = 0;
15
16 for ( var number = 2; number <= 100; number += 2 )
17 sum += number;
18
19 document.writeln( "The sum of the even integers " +
20 "from 2 to 100 is " + sum );
21 // -->
22 </script>
23
24 </head><body></body>
25 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.6: Interest.html --> Interest.html
6 <!-- Using the for repetition statement --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Calculating Compound Interest</title>
11
12 <script type = "text/javascript">
13 <!--
14 var amount, principal = 1000.0, rate = .05;
15
16 document.writeln(
17 "<table border = \"1\" width = \"100%\">" );
18 document.writeln(
19 "<caption>Calculating Compound Interest</caption>" );
20 document.writeln(
21 "<thead><tr><th align = \"left\">Year</th>" );
22 document.writeln(
23 "<th align = \"left\">Amount on deposit</th>" );
24 document.writeln( "</tr></thead>" );
25

 2004 Prentice Hall, Inc.


All rights reserved.
26 for ( var year = 1; year <= 10; ++year ) {
27 amount = principal * Math.pow( 1.0 + rate, year ); Outline
28 document.writeln( "<tbody><tr><td>" + year +
29 "</td><td>" + Math.round( amount * 100 ) / 100 +
30 "</td></tr>" ); Interest.html
31 } (2 of 2)
32
33 document.writeln( "</tbody></table>" );
34 // -->
35 </script>
36
37 </head><body></body>
38 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
9.5 switch Multiple-Selection Statement

• Controlling expression
• Case labels
• Default case

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.7: SwitchTest.html --> SwitchTest.html
6 <!-- Using the switch statement --> (1 of 3)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Switching between XHTML List Formats</title>
11
12 <script type = "text/javascript">
13 <!--
14 var choice, // user’s choice
15 startTag, // starting list item tag
16 endTag, // ending list item tag
17 validInput = true, // indicates if input is valid
18 listType; // list type as a string
19
20 choice = window.prompt( "Select a list style:\n" +
21 "1 (bullet), 2 (numbered), 3 (lettered)", "1" );
22

 2004 Prentice Hall, Inc.


All rights reserved.
23 switch ( choice ) {
24 case "1": Outline
25 startTag = "<ul>";
26 endTag = "</ul>";
27 listType = "<h1>Bullet List</h1>"; SwitchTest.html
28 break; (2 of 3)
29 case "2":
30 startTag = "<ol>";
31 endTag = "</ol>";
32 listType = "<h1>Ordered List: Numbered</h1>";
33 break;
34 case "3":
35 startTag = "<ol type = \"A\">";
36 endTag = "</ol>";
37 listType = "<h1>Ordered List: Lettered</h1>";
38 break;
39 default:
40 validInput = false;
41 }
42
43 if ( validInput == true ) {
44 document.writeln( listType + startTag );
45
46 for ( var i = 1; i <= 3; ++i )
47 document.writeln( "<li>List item " + i + "</li>" );

 2004 Prentice Hall, Inc.


All rights reserved.
48
49 document.writeln( endTag ); Outline
50 }
51 else
52 document.writeln( "Invalid choice: " + choice ); SwitchTest.html
53 // --> (3 of 3)
54 </script>
55
56 </head>
57 <body>
58 <p>Click Refresh (or Reload) to run the script again</p>
59 </body>
60 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
9.5 switch Multiple-Selection Statement

true
case a case a action(s) break

false

true
case b case b action(s) break

false

.
.
.

true
case z case z action(s) break

false

default action(s)

 2004 Prentice Hall, Inc. All rights reserved.


9.6 do…while Repetition Statement

• Similar to the while statement


• Tests the loop continuation condition after the
loop body executes
• Loop body always executes at least once

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.9: DoWhileTest.html --> DoWhileTest.html
6 <!-- Using the do...while statement --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Using the do...while Repetition Statement</title>
11
12 <script type = "text/javascript">
13 <!--
14 var counter = 1;
15
16 do {
17 document.writeln( "<h" + counter + ">This is " +
18 "an h" + counter + " level head" + "</h" +
19 counter + ">" );
20
21 ++counter;
22 } while ( counter <= 6 );
23 // -->
24 </script>

 2004 Prentice Hall, Inc.


All rights reserved.
25
26 </head><body></body> Outline
27 </html>

DoWhileTest.html
(2 of 2)

 2004 Prentice Hall, Inc.


All rights reserved.
9.6 do…while Repetition Structure

action(s)

true
condition

false

Fig. 9.10 do…while repetition statement flowchart.

 2004 Prentice Hall, Inc. All rights reserved.


9.7 break and continue Statements

• break
– Immediate exit from the structure
– Used to escape early from a loop
– Skip the remainder of a switch statement
• continue
– Skips the remaining statements in the body of the structure
– Proceeds with the next iteration of the loop

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.11: BreakTest.html --> BreakTest.html
6 <!-- Using the break statement --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>
11 Using the break Statement in a for Structure
12 </title>
13
14 <script type = "text/javascript">
15 <!--
16 for ( var count = 1; count <= 10; ++count ) {
17 if ( count == 5 )
18 break; // break loop only if count == 5
19
20 document.writeln( "Count is: " + count + "<br />" );
21 }
22

 2004 Prentice Hall, Inc.


All rights reserved.
23 document.writeln(
24 "Broke out of loop at count = " + count ); Outline
25 // -->
26 </script>
27 BreakTest.html
28 </head><body></body> (2 of 2)
29 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.12: ContinueTest.html --> ContinueTest.html
6 <!-- Using the break statement --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>
11 Using the continue Statement in a for Structure
12 </title>
13
14 <script type = "text/javascript">
15 <!--
16 for ( var count = 1; count <= 10; ++count ) {
17 if ( count == 5 )
18 continue; // skip remaining code in loop
19 // only if count == 5
20
21 document.writeln( "Count is: " + count + "<br />" );
22 }
23

 2004 Prentice Hall, Inc.


All rights reserved.
24 document.writeln( "Used continue to skip printing 5" );
25 // --> Outline
26 </script>
27
28 </head><body></body> ContinueTest.html
29 </html> (2 of 2)

 2004 Prentice Hall, Inc.


All rights reserved.
9.8 Labeled break and continue
Statements
• Labeled break statement
– Break out of a nested set of structures
– Immediate exit from that structure and enclosing repetition
structures
– Execution resumes with first statement after enclosing
labeled statement
• Labeled continue statement
– Skips the remaining statements in structure’s body and
enclosing repetition structures
– Proceeds with next iteration of enclosing labeled repetition
structure
– Loop-continuation test evaluates immediately after the
continue statement executes

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.13: BreakLabelTest.html --> BreakLabelTest.html
6 <!-- Using the break statement with a Label --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Using the break Statement with a Label</title>
11
12 <script type = "text/javascript">
13 <!--
14 stop: { // labeled block
15 for ( var row = 1; row <= 10; ++row ) {
16 for ( var column = 1; column <= 5 ; ++column ) {
17
18 if ( row == 5 )
19 break stop; // jump to end of stop block
20
21 document.write( "* " );
22 }
23
24 document.writeln( "<br />" );
25 }

 2004 Prentice Hall, Inc.


All rights reserved.
26
27 // the following line is skipped Outline
28 document.writeln( "This line should not print" );
29 }
30 BreakLabelTest.html
31 document.writeln( "End of script" ); (2 of 2)
32 // -->
33 </script>
34
35 </head><body></body>
36 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.14: ContinueLabelTest.html --> ContinueLabelTest.html
6 <!-- Using the continue statement --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Using the continue Statement with a Label</title>
11
12 <script type = "text/javascript">
13 <!--
14 nextRow: // target label of continue statement
15 for ( var row = 1; row <= 5; ++row ) {
16 document.writeln( "<br />" );
17
18 for ( var column = 1; column <= 10; ++column ) {
19
20 if ( column > row )
21 continue nextRow; // next iteration of
22 // labeled loop
23
24 document.write( "* " );
25 }

 2004 Prentice Hall, Inc.


All rights reserved.
26 }
27 // --> Outline
28 </script>
29
30 </head><body></body> ContinueLabelTest.html
31 </html> (2 of 2)

 2004 Prentice Hall, Inc.


All rights reserved.
9.9 Logical Operators

• More logical operators


– Logical AND ( && )
– Logical OR ( || )
– Logical NOT ( ! )

 2004 Prentice Hall, Inc. All rights reserved.


9.9 Logical Operators

expression1 expression1 &&


expression2
expression2
false false false
false true false
true false false
true true true
Fig. 9.15 Truth table for the && (logical AND)
operator.

 2004 Prentice Hall, Inc. All rights reserved.


9.9 Logical Operators

expression1 expression2
expression1 ||
expression2
false false false
false true true
true false true
true true true
Fig. 9.16 Truth table for the || (logical OR) operator.

expression !expression
false true
true false
Fig. 9.17 Truth table for operator ! (logical negation).

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 9.18: LogicalOperators.html --> LogicalOperators.html
6 <!-- Demonstrating Logical Operators --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Demonstrating the Logical Operators</title>
11
12 <script type = "text/javascript">
13 <!--
14 document.writeln(
15 "<table border = \"1\" width = \"100%\">" );
16
17 document.writeln(
18 "<caption>Demonstrating Logical " +
19 "Operators</caption" );
20
21 document.writeln(
22 "<tr><td width = \"25%\">Logical AND (&&)</td>" +
23 "<td>false && false: " + ( false && false ) +
24 "<br />false && true: " + ( false && true ) +
25 "<br />true && false: " + ( true && false ) +

 2004 Prentice Hall, Inc.


All rights reserved.
26 "<br />true && true: " + ( true && true ) +
27 "</td>" ); Outline
28
29 document.writeln(
30 "<tr><td width = \"25%\">Logical OR (||)</td>" + LogicalOperators.html
31 "<td>false || false: " + ( false || false ) + (2 of 2)
32 "<br />false || true: " + ( false || true ) +
33 "<br />true || false: " + ( true || false ) +
34 "<br />true || true: " + ( true || true ) +
35 "</td>" );
36
37 document.writeln(
38 "<tr><td width = \"25%\">Logical NOT (!)</td>" +
39 "<td>!false: " + ( !false ) +
40 "<br />!true: " + ( !true ) + "</td>" );
41
42 document.writeln( "</table>" );
43 // -->
44 </script>
45
46 </head><body></body>
47 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
9.9 Logical Operators

Operator Associativity Type


++ -- ! 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 Precedence and associativity of the operators discussed
so far.

 2004 Prentice Hall, Inc. All rights reserved.


9.10 Summary of Structured Programming

• Flowcharts
– Reveal the structured nature of programs
• Single-entry/single-exit control structures
– Only one way to enter and one way to exit each control
structure
• Control structure stacking
– The exit point of one control structure is connected to the
entry point of the next control structure

 2004 Prentice Hall, Inc. All rights reserved.


9.10 Summary of Structured Programming

do…while statement
while statement

T
Repetition

F
for statement

T
T

F
Fig. 9.20 Single-entry/single-exit sequence, selection and repetition structures. (1 of 3)

 2004 Prentice Hall, Inc. All rights reserved.


9.10 Summary of Structured Programming

if…else statement
(double selection)
T

break

break
break
Selection

(multiple selection)
switchstatement
(single selection)
if statement

T
F

F
.
.
.
T

Fig. 9.20 Single-entry/single-exit sequence, selection and repetition structures. (2 of 3)

 2004 Prentice Hall, Inc. All rights reserved.


9.10 Summary of Structured Programming
Sequence

.
.
Fig. 9.20
.
Single-entry/single-exit sequence, selection and repetition structures. (3 of 3)

 2004 Prentice Hall, Inc. All rights reserved.


9.10 Summary of Structured Programming

Rules for Forming Structured Programs


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 forming structured programs.

 2004 Prentice Hall, Inc. All rights reserved.


9.10 Summary of Structured Programming

Fig. 9.22 Simplest flowchart.

 2004 Prentice Hall, Inc. All rights reserved.


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.

 2004 Prentice Hall, Inc. All rights reserved.


9.10 Summary of Structured Programming

Rule 3

Rule 3

Fig. 9.24 Applying rule 3 of Fig. 9.21 to the simplest flowchart.

 2004 Prentice Hall, Inc. All rights reserved.


9.10 Summary of Structured Programming
Stacked building blocks Nested building blocks

Overlapping building blocks


(Illegal in structured programs)

Fig. 9.25 Stacked, nested and overlapped building blocks.

 2004 Prentice Hall, Inc. All rights reserved.


9.10 Summary of Structured Programming

Fig. 9.26 Unstructured flowchart.

 2004 Prentice Hall, Inc. All rights reserved.

You might also like