Each case can have multiple actions (statements). The switch statement is different from others in that braces are not required around multiple actions in a case of a switch. The general switch statement (i.e., using a break in each case) is flowcharted in Fig. 8.8. [Note: As an exercise, flowchart the general switch statement without break statements.]

The flowchart makes it clear that each break statement at the end of a case causes control to exit from the switch statement immediately. The break statement is not required for the last case in the switch statement (or the default case, when it appears last), because program control automatically continues with the next statement after the switch statement.

Common Programming Error 8.6

Forgetting a break statement when one is needed in a switch statement is a logic error. 8.6

Software Engineering Observation 8.1

Provide a default case in switch statements. Cases not explicitly tested in a switch statement without a default case are ignored. Including a default case focuses the programmer on processing exceptional conditions. However, there are situations in which no default processing is needed. 8.1

Good Programming Practice 8.10

Although the case clauses and the default case clause in a switch statement can occur in any order, it is clearer (and more common) to place the default clause last. 8.10

Fig. 8.8 | switch multiple-selection statement.

Good Programming Practice 8.11

In a switch statement, when the default clause is listed last, the break for that case statement is not required. Some programmers include this break for clarity and for symmetry with other cases. 8.11

Note that having several case labels listed together (e.g., case 1: case 2: with no statements between the cases) simply means that the same set of actions is to occur for each case. Again, note that, besides small circles and arrows, the flowchart contains only rect- angle symbols and diamond symbols.

The do…while repetition statement is similar to the while statement. In the while state- ment, the loop-continuation test occurs at the beginning of the loop, before the body of the loop executes. The do…while statement tests the loop-continuation condition after the loop body executes—therefore, the loop body always executes at least once. When a do…while terminates, execution continues with the statement after the while clause. Note that it is not necessary to use braces in a do…while statement if there is only one statement in the body. However, the braces usually are included, to avoid confusion be- tween the while and do…while statements. For example,

while ( condition )

normally is regarded as the header to a while statement. A do…while statement with no braces around a single-statement body appears as

do statement

while ( condition );

which can be confusing. The last line—while( condition );—may be misinterpreted by the reader as a while statement containing an empty statement (the semicolon by itself). Thus, to avoid confusion, the do…while statement with a one-statement body is often written as follows:

do {

statement } while ( condition );

Good Programming Practice 8.12

Some programmers always include braces in a do…while statement even if they are not neces- sary. This helps eliminate ambiguity between the while statement and the do…while statement containing a one-statement body. 8.12

Common Programming Error 8.7

Infinite loops are caused when the loop-continuation condition never becomes false in a while, for or do…while statement. To prevent this, make sure that there is not a semicolon immedi- ately after the header of a while or for statement. In a counter-controlled loop, make sure that the control variable is incremented (or decremented) in the body of the loop. In a sentinel-con- trolled loop, make sure that the sentinel value is eventually input. 8.7

The script in Fig. 8.9 uses a do…while statement to display each of the six different XHTML heading types (h1 through h6). Line 12 declares control variable counter and initializes it to 1. Upon entering the do…while statement, lines 15–17 write a line of XHTML text in the document. The value of control variable counter is used to create the starting and ending header tags (e.g.,

and

The do…while flowchart in Fig. 8.10 makes it clear that the loop-continuation test does not occur until the action executes at least once.

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

<!-- Fig. 8.9: DoWhileTest.html -->
<!-- Using the do...while repetition statement. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using the do...while Repetition Statement</title>
<script type = "text/javascript">
<!--
var counter = 1;

do {
document.writeln( "<h" + counter + ">This is " +
"an h" + counter + " level head" + "</h" +
counter + ">" );
++counter;
} while ( counter <= 6 );
// -->
</script>

</head><body></body>
</html>

Fig. 8.9 | Using the do…while repetition statement.

Fig. 8.10 | do…while repetition statement flowchart.

The break and continue statements alter the flow of control. 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 (as in Fig. 8.7). Figure 8.11 demonstrates the break statement in a for repetition statement.

During each iteration of the for statement in lines 14–20, the script writes the value of count in the XHTML document. When the if statement in line 16 detects that count

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

<!-- Fig. 8.11: BreakTest.html -->
<!-- Using the break statement in a for statement. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>
Using the break Statement in a for Statement
</title>
<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 />" );
} //end for

document.writeln(
"Broke out of loop at count = " + count );
// -->
</script>
</head><body></body>
</html>

Fig. 8.11 | Using the break statement in a for statement. (Part 1 of 2.)

Fig. 8.11 | Using the break statement in a for statement. (Part 2 of 2.)

is 5, the break in line 17 executes. This statement terminates the for statement, and the program proceeds to line 22 (the next statement in sequence immediately after the for

statement), where the script writes the value of count when the loop terminated (i.e., 5). The loop executes line 19 only four times.

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 eval- uates immediately after the continue statement executes. In for statements, the incre- ment expression executes, then the loop-continuation test evaluates. This is the one case in which for and while differ. Improper placement of continue before the increment in a while may result in an infinite loop.

Figure 8.12 uses continue in a for statement to skip the document.writeln state- ment in line 20 when the if statement in line 17 determines that the value of count is 5. When the continue statement executes, the script skips the remainder of the for state- ment’s body. Program control continues with the increment of the for statement’s control variable, followed by the loop-continuation test to determine whether the loop should continue executing.

Software Engineering Observation 8.2

Some programmers feel that break and continue violate structured programming. They do not use break and continue, because the effects of these statements can be achieved by structured programming techniques. 8.2

Performance Tip 8.1

The break and continue statements, when used properly, perform faster than the corresponding structured techniques. 8.1

Software Engineering Observation 8.3

There is a tension between achieving quality software engineering and achieving the best- performing software. Often, one of these goals is achieved at the expense of the other. For all but the most performance-intensive situations, the following rule of thumb should be followed: First make your code simple, readable and correct; then make it fast and small, but only if necessary. 8.3

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

<!-- Fig. 8.12: ContinueTest.html -->
<!-- Using the continue statement in a for statement. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>
Using the continue Statement in a for Statement
</title>

<script type = "text/javascript">
<!--
for ( var count = 1; count <= 10; ++count )
{
if ( count == 5 )
continue; // skip remaining loop code only if count == 5

document.writeln( "Count is: " + count + "<br />" );
} //end for

document.writeln( "Used continue to skip printing 5" );
// -->
</script>

</head><body></body>
</html>

Fig. 8.12 | Using the continue statement in a for statement.

The break statement can break out of an immediately enclosing while, for, do…while or switch statement. To break out of a nested set of structures, you can use the labeled break

statement. This statement, when executed in a while, for, do…while or switch state- ment, causes immediate exit from that statement and any number of enclosing repetition statements; program execution resumes with the first statement after the enclosing labeled statement (a statement preceded by a label). The labeled statement can be a block (a set of statements enclosed in curly braces, {}). Labeled break statements commonly are used to terminate nested looping structures containing while, for, do…while or switch state- ments. Figure 8.13 demonstrates the labeled break statement in a nested for statement.

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

<!-- Fig. 8.13: BreakLabelTest.html -->
<!-- Labeled break statement in a nested for statement. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using the break Statement with a Label</title>
<script type = "text/javascript">
<!--
stop: { // labeled block
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( "\* " );
} //end for

document.writeln( "<br />" );
} //end for

// the following line is skipped
document.writeln( "This line should not print" );
} // end block labeled stop

document.writeln( "End of script" );
// -->
</script>
</head><body></body>
</html>

Fig. 8.13 | Labeled break statement in a nested for statement. The labeled block (lines 12–28) begins with a label (an identifier followed by a colon). Here, we use the label stop:. The block is enclosed between the braces at the end of line 12 and in line 28, and includes both the nested for statement starting in line 13 and the document.writeln statement in line 27. When the if statement in line 17 detects that row is equal to 5, the statement in line 18 executes. This statement terminates both the for statement in line 15 and its enclosing for statement in line 13, and the program proceeds to the statement in line 30 (the first statement in sequence after the labeled block). The inner for statement executes its body only four times. Note that the document.writeln statement in line 27 never executes, because it is included in the labeled block and the outer for statement never completes.

The continue statement proceeds with the next iteration (repetition) of the immedi- ately enclosing while, for or do…while statement. The labeled continue statement, when executed in a repetition statement (while, for or do…while), skips the remaining statements in the structure’s body and any number of enclosing repetition statements, then proceeds with the next iteration of the enclosing labeled repetition statement (a rep- etition statement preceded by a label). In labeled while and do…while statements, the loop-continuation test evaluates immediately after the continue statement executes. In a labeled for statement, the increment expression executes, then the loop-continuation test evaluates. Figure 8.14 uses the labeled continue statement in a nested for statement to cause execution to continue with the next iteration of the outer for statement.

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

<!-- Fig. 8.14: ContinueLabelTest.html -->
<!-- Labeled continue statement in a nested for statement. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using the continue Statement with a Label</title>
<script type = "text/javascript">
<!--
nextRow: // target label of continue statement
for ( var row = 1; row <= 5; ++row )
{
document.writeln( "<br />" );

for ( var column = 1; column <= 10; ++column )
{
if ( column > row )
continue nextRow; // next iteration of labeled loop

document.write( "\* " );
} //end for
} //end for
// -->
</script>
</head><body></body>
</html>

Fig. 8.14 | Labeled continue statement in a nested for statement. (Part 1 of 2.)

Fig. 8.14 | Labeled continue statement in a nested for statement. (Part 2 of 2.)

The labeled for statement (lines 13–24) starts with the nextRow label in line 12. When the if statement in line 19 in the inner for statement detects that column is greater than row, line 20 executes and program control continues with the increment of the con- trol variable of the outer for statement. Even though the inner for statement counts from 1 to 10, the number of * characters output on a row never exceeds the value of row.

So far, we have studied only such simple conditions as count <= 10, total > 1000 and number != sentinelValue. These conditions were expressed in terms of the relational opera- tors >, <, >= and <=, and in terms of the equality operators == and !=. Each decision tested one condition. To make a decision based on multiple conditions, we performed these tests in separate statements or in nested if or if…else statements.

JavaScript provides logical operators that can be used to form more complex condi- tions by combining simple conditions. The logical operators are && (logical AND), || (logical OR) and ! (logical NOT, also called logical negation). We consider examples of each of these operators.

Suppose that, at some point in a program, we wish to ensure that two conditions are both true before we choose a certain path of execution. In this case, we can use the logical && operator, as follows:

if ( gender == 1 && age >= 65 ) ++seniorFemales;

This if statement contains two simple conditions. The condition gender == 1 might be evaluated to determine, for example, whether a person is a female. The condition age >=

65 is evaluated to determine whether a person is a senior citizen. The if statement then considers the combined condition

gender == 1 && age >= 65

This condition is true if and only if both of the simple conditions are true. Finally, if this combined condition is indeed true, the count of seniorFemales is incremented by 1. If either or both of the simple conditions are false, the program skips the incrementing and proceeds to the statement following the if statement. The preceding combined condition can be made more readable by adding redundant parentheses:

( gender == 1 ) && ( age >= 65 )

The table in Fig. 8.15 summarizes the && operator. The table shows all four possible combinations of false and true values for expression1 and expression2. Such tables are often called truth tables. JavaScript evaluates to false or true all expressions that include relational operators, equality operators and/or logical operators.

Now let us consider the || (logical OR) operator. Suppose we wish to ensure that either or both of two conditions are true before we choose a certain path of execution. In this case, we use the || operator, as in the following program segment:

if ( semesterAverage >= 90 || finalExam >= 90 ) document.writeln( “Student grade is A” );

This statement also contains two simple conditions. The condition semesterAverage >=

90 is evaluated to determine whether the student deserves an “A” in the course because of a solid performance throughout the semester. The condition finalExam >= 90 is evaluated to determine whether the student deserves an “A” in the course because of an outstanding performance on the final exam. The if statement then considers the combined condition

semesterAverage >= 90 || finalExam >= 90

and awards the student an “A” if either or both of the simple conditions are true. Note that the message “Student grade is A” is not printed only when both of the simple con- ditions are false. Figure 8.16 is a truth table for the logical OR operator (||).

The && operator has a higher precedence than the || operator. Both operators asso- ciate from left to right. An expression containing && or || operators is evaluated only until truth or falsity is known. Thus, evaluation of the expression

gender == 1 && age >= 65

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

| false | false | false | | false | true | true | | true | false | true | | true | true | true |

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

stops immediately if gender is not equal to 1 (i.e., the entire expression is false) and con- tinues if gender is equal to 1 (i.e., the entire expression could still be true if the condition age >= 65 is true). Similarly, the || operator immediately returns true if the first operand is true. This performance feature for evaluation of logical AND and logical OR expres- sions is called short-circuit evaluation.

JavaScript provides the ! (logical negation) operator to enable a programmer to “reverse” the meaning of a condition (i.e., a true value becomes false, and a false value becomes true). Unlike the logical operators && and ||, which combine two conditions (i.e., they are binary operators), the logical negation operator has only a single condition as an operand (i.e., it is a unary operator). The logical negation operator is placed before a condition to choose a path of execution if the original condition (without the logical nega- tion operator) is false, as in the following program segment:

if ( ! ( grade == sentinelValue ) ) document.writeln( “The next grade is " + grade );

The parentheses around the condition grade == sentinelValue are needed, because the logical negation operator has a higher precedence than the equality operator. Figure 8.17 is a truth table for the logical negation operator.

In most cases, the programmer can avoid using logical negation by expressing the con- dition differently with an appropriate relational or equality operator. For example, the pre- ceding statement may also be written as follows:

if ( grade != sentinelValue ) document.writeln( “The next grade is " + grade );

The script in Fig. 8.18 demonstrates all the logical operators by producing their truth tables. The script produces an XHTML table containing the results.

expression !expression

false true

true false

Fig. 8.17 | Truth table for operator ! (logical negation).

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

<!-- Fig. 8.18: LogicalOperators.html -->
<!-- Demonstrating logical operators. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Demonstrating the Logical Operators</title>

Fig. 8.18 | Demonstrating logical operators. (Part 1 of 2.)

10 14 42 43

Fig. 8.18 | Demonstrating logical operators. (Part 2 of 2.)

In the output of Fig. 8.18, the strings “false” and “true” indicate false and true for the operands in each condition. The result of the condition is shown as true or false. Note that when you use the concatenation operator with a boolean value and a string, JavaScript automatically converts the boolean value to string “false” or “true”. Lines 16–39 build an XHTML table containing the results.

An interesting feature of JavaScript is that most nonboolean values can be converted to a boolean true or false value. Nonzero numeric values are considered to be true. The numeric value zero is considered to be false. Any string that contains characters is con- sidered to be true. The empty string (i.e., the string containing no characters) is consid- ered to be false. The value null and variables that have been declared but not initialized are considered to be false. All objects (e.g., the browser’s document and window objects and JavaScript’s Math object) are considered to be true.

Figure 8.19 shows the precedence and associativity of the JavaScript operators intro- duced up to this point. The operators are shown top to bottom in decreasing order of precedence.

Fig. 8.19 | Precedence and associativity of the operators discussed so far.

Just as architects design buildings by employing the collective wisdom of their profession, so should programmers design programs. Our field is younger than architecture, and our collective wisdom is considerably sparser. We have learned that structured programming produces programs that are easier to understand than unstructured programs, and thus are easier to test, debug, and modify.

Flowcharts reveal the structured nature of programs or the lack thereof. Connecting individual flowchart symbols arbitrarily can lead to unstructured programs. Therefore, the programming profession has chosen to combine flowchart symbols to form a limited set of control structures and to build structured programs by properly combining control structures in two simple ways.

For simplicity, only single-entry/single-exit control structures are used—that is, there is only one way to enter and one way to exit each control structure. Connecting control structures in sequence to form structured programs is simple: The exit point of one control structure is connected to the entry point of the next control structure (i.e., the control structures are simply placed one after another in a program). We have called this process control-structure stacking. The rules for forming structured programs also allow for con- trol structures to be nested. Figure 8.20 summarizes JavaScript’s control structures. Small circles are used in the figure to indicate the single entry point and the single exit point of each structure.

Figure 8.21 shows the rules for forming properly structured programs. The rules assume that the rectangle flowchart symbol may be used to indicate any action, including input/output.Note: An oval flowchart symbol indicates the beginning and end of a pro- cess.

Applying the rules in Fig. 8.21 always results in a structured flowchart with a neat, building-block-like appearance. For example, repeatedly applying Rule 2 to the simplest

Fig. 8.20 | Single-entry/single-exit sequence, selection and repetition structures.

Fig. 8.21 | Forming rules for structured programs.

flowchart (Fig. 8.22) results in a structured flowchart containing many rectangles in sequence (Fig. 8.23). Note that Rule 2 generates a stack of control structures; so let us call Rule 2 the stacking rule.

Rule 3 is called the nesting rule. Repeatedly applying Rule 3 to the simplest flowchart results in a flowchart with neatly nested control structures. For example, in Fig. 8.24, the rectangle in the simplest flowchart is first replaced with a double-selection (if…else) structure. Then Rule 3 is applied again to both of the rectangles in the double-selection structure by replacing each of these rectangles with double-selection structures. The

Fig. 8.22 | Simplest flowchart.

Fig. 8.23 | Repeatedly applying Rule 2 of Fig. 8.21 to the simplest flowchart.

Fig. 8.24 | Applying Rule 3 of Fig. 8.21 to the simplest flowchart.

dashed box around each of the double-selection structures represents the rectangle in the original simplest flowchart that was replaced.

Rule 4 generates larger, more involved and more deeply nested structures. The flow- charts that emerge from applying the rules in Fig. 8.21 constitute the set of all possible structured flowcharts and thus the set of all possible structured programs.

The beauty of the structured approach is that we use only seven simple single-entry/ single-exit pieces and assemble them in only two simple ways. Figure 8.25 shows the kinds of stacked building blocks that emerge from applying Rule 2 and the kinds of nested building blocks that emerge from applying Rule 3. The figure also shows the kind of over- lapped building blocks that cannot appear in structured flowcharts (because of the elimi- nation of the goto statement).

If the rules in Fig. 8.21 are followed, an unstructured flowchart (like the one in Fig. 8.26) cannot be created. If you are uncertain about whether a particular flowchart is structured, apply the rules of Fig. 8.21 in reverse to try to reduce the flowchart to the sim-

Fig. 8.25 | Stacked, nested and overlapped building blocks.

Fig. 8.26 | Unstructured flowchart.

plest flowchart. If the flowchart is reducible to the simplest flowchart, the original flow- chart is structured; otherwise, it is not.

Structured programming promotes simplicity. Bohm and Jacopini have given us the result that only three forms of control are needed:

• sequence

• selection

• repetition

Sequence is trivial. Selection is implemented in one of three ways:

• if statement (single selection)

• if…else statement (double selection)

• switch statement (multiple selection)

In fact, it is straightforward to prove that the if statement is sufficient to provide any form of selection; everything that can be done with the if…else statement and the switch

statement can be implemented by combining if statements (although perhaps not as smoothly).

Repetition is implemented in one of four ways:

• while statement

• do…while statement

• for statement

• for…in statement (discussed in Chapter 10)

Stacked building blocks Nested building blocks Overlapping building blocks (Illegal in structured programs)

It is straightforward to prove that the while statement is sufficient to provide any form of repetition. Everything that can be done with the do…while statement and the for state- ment can be done with the while statement (although perhaps not as elegantly).

Combining these results illustrates that any form of control ever needed in a Java- Script program can be expressed in terms of:

• sequence

• if statement (selection)

• while statement (repetition)

These control structures can be combined in only two ways—stacking and nesting. In- deed, structured programming promotes simplicity.

In this chapter, we discussed the composition of programs from control structures con- taining actions and decisions. We expanded the previous chapter’s discussion on control structures, discussing the for statement, the do…while statement and the switch state- ment. We also saw how break and continue can be used to alter the flow of the program.

In Chapter 9, we introduce another program-structuring unit, called the function. You’ll learn to compose large programs by combining functions that are composed of con- trol structures. We will also discuss how functions promote software reusability.

www.deitel.com/javascript/

The Deitel JavaScript Resource Center contains links to some of the best JavaScript resources on the web. There you’ll find categorized links to JavaScript tools, code generators, forums, books, libraries, frameworks and more. Also check out the tutorials for all skill levels, from introductory to advanced. Be sure to visit the related Resource Centers on XHTML (www.deitel.com/xhtml/) and CSS 2.1 (www.deitel.com/css21/).