The do...while loop operates similarly to the while loop, except that statements within the code block execute at least once, because the browser doesn’t evaluate the conditional expression condition until the end of the code block.
There are four parts to the do...while loop: • The do keyword
• Open and close French braces defi ne the code block • The while keyword
• The conditional expression placed within parentheses Here’s the structure of the do...while loop:
do {
//Place statements here. } while (conditional expression)
The following example displays numbers 1 through 10 using a do...while loop. 1. The variable i is declared and initialized.
2. The browser enters the code block of the do...while loop and executes the document.write() method that displays the number on the document. 3. The browser then evaluates the conditional expression:
• If the expression is true, the browser moves to the top of the code block and begins executing statements again.
• If the expression is false, the browser executes the statement below the do...while loop. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>do...while loop</title> </head> <body>
<script language="Javascript" type="text/javascript"> <!-- var i = 1 do { document.write(i) i++ } while ( i <= 10 ) --> </script> </body> </html> ch03.indd Sec1:70 ch03.indd Sec1:70 5/2/2005 3:50:12 PM5/2/2005 3:50:12 PM
continue
Except for the do...while loop, a loop tells the browser to execute JavaScript state- ments within the code block of the loop only if the condition is true; otherwise, the browser skips to the statement that follows the loop. The do...while loop is a little different because it tells the browser to execute statements within the block at least once before determining whether the condition is true.
On some occasions, you’ll want the browser to stop executing statements within the loop and return to the top of the loop to reevaluate the conditional expression. You can tell the browser to return to the top of the loop at any time while the brows- er executes statements within the loop by using the continue keyword.
The continuekeyword instructs the browser to stop executing statements with- in the loop immediately and to go to the top of the loop, just as if the browser reached the end of the loop. If a for loop is being used, the browser executes the post loop statements, which typically increments or decrements the initializer variable and then evaluates the test condition. If a while loop is used, the browser evaluates the test condition. If the conditional expression is true, the browser reenters the code block of the loop and executes statements beginning with the fi rst statement.
Let’s say that you want to display numbers 1, 2, 3, and 5 on the screen. You don’t want to display the number 4. Here’s how this is done using a while loop and the continue keyword: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>continue</title> </head> <body>
<script language="Javascript" type="text/javascript"> <!-- var i = 0 while ( i < 5 ) { i++ if ( i == 4 ) { continue } document.write(i) } --> </script> </body> </html>
As long as the value of variable i is less than 5, the browser executes statements within the code block. Since variable i is initialized with 0, the browser enters the loop and increments the value of i, making it 1. The browser then evaluates the
ch03.indd Sec1:71
conditional expression to determine whether the value of variable i is 4. If so, the browser executes the continue statement within the code block of the if state- ment. The continue statement tells the browser to return to the top of the loop immediately and reevaluate the conditional expression.
The browser executes the fi rst statement within the code block of the while loop, which increments the value of variable i from 4 to 5. Once again, the browser evaluates the conditional expression in the if statement. This time, variable i equals 5, not 4, so the browser proceeds to the write() statement again to write the value of variable i, which is 5, to the screen.
Looking Ahead
You learned two important JavaScript programming techniques in this chapter: how to have a browser make a decision by using the if statement and the switch...case statement and how to have the browser repeatedly execute JavaScript statements without your having to duplicate code.
The if statement contains a conditional expression and a code block. If the con- ditional expression is true, then the browser executes statements within the code block. You provide the browser with alternative statements by using else with the if statement. If the conditional statement is false, then the browser executes state- ments within the else code block.
Sometimes you’ll want the browser to test another condition if the conditional expression in the if statement is false. You tell the browser to do this by using the if...else if statement. The else if portion of this statement contains another condi- tional expression and statements within a code block that are executed if the second conditional expression is true. Yet still another version of the if statement is the if... else if...else statement, which is similar to the if...else statement, where statements within the else code block are executed if neither the fi rst nor second conditional expression is true.
You also learned how to use the switch...case statement to have the browser make a decision within your JavaScript. The switch portion of the statement con- tains a value that is compared to values of the case portion of the statement. If there is a match, then statements within the case are executed. If there isn’t a match, those statements are skipped.
The last statement within the case portion of the switch...case statement is typically the break statement. The break statement tells the browser to break out of the switch... case statement without evaluating subsequent case values. The break statement can also be used to tell the browser to break out of any loop without fi nishing the loop.
ch03.indd 72
If the switch value doesn’t match any case values, the browser executes state- ments beneath the default portion of the switch...case statement. The default portion is optional.
A browser can repeat statements by placing statements within four kinds of loops: for loop, for in loop, while loop, and the do...while loop. Each loop has a conditional expression that must be met in order for the browser to enter and execute statements within the code block of the loop. There is one exception: statements within a do...while loop execute at least once regardless of whether the test condition is true or false.
Now that you know how to have a browser make decisions and execute state- ments repeatedly, it is time to move on and learn how to store and manipulate lists of information, such as a list of products. You do this by using an array, which you’ll learn about in the next chapter.