The for loop tells the browser to execute statements within the for loop until a con-dition statement returns false. The browser then continues by executing the statement or statements below the for loop until the test condition is false.
Here’s the structure of the for loop:
for ( initializer; conditional expression ; post loop statements)
{
//Place statements here.
}
The for loop has fi ve parts:
• The for keyword.
• The initializer holds the number of times the browser executed statements within the loop.
Figure 3-10 An alert dialog box tells the user an invalid entry was entered.
ch03.indd Sec1:62
ch03.indd Sec1:62 5/2/2005 3:50:10 PM5/2/2005 3:50:10 PM
• The conditional expression sets the condition when the browser should stop executing statements with the loop.
• The post loop statements increase or decrease the value of the initializer each time the browser completes the loop.
• The code block contains statements that are executed by the browser when the browser enters the loop.
Think of the initializer, conditional expression, and post loop statements as the counter of the for loop. Collectively, they track the number of times that the brows-er executes the statements within the code block of the loop and decide when the browser should exit the loop.
The initializer declares and initializes a variable that is used to store the count.
Traditionally, JavaScript developers name the initializer i and initialize it with 0 (zero), as shown here:
i = 0
The browser evaluates the conditional expression before executing statements with-in the code block of the loop. The conditional expression tells the browser when to stop executing the loop. Any valid conditional expression can be used in the for loop. (You learned about conditional expressions in Chapter 2.)
Typically, JavaScript developers use the less than operator (<) to tell the browser to execute the loop only if the initializer variable has a value that is less than the value specifi ed in the conditional expression.
Suppose we want the browser to execute statements within the for loop fi ve times. First, we assign 0 to the initializer variable. Next, we write the following conditional expression, which tells the browser to continue to execute statements within the code block of the loop as long as i is less than 5:
i < 5
The post loop statements are any statements that should execute before the next iteration of the loop. Typically, this loop may be used to increment a loop counter variable using the incremental operator (++), which you learned about in Chapter 2.
The incremental operator increases the value of the initializer variable by 1 after each iteration of the loop.
This means that the value of i increases from 0 to 1 after the fi rst time the browser executes statements within the block of the for loop. The value of i contin-ues to be incremented for each iteration until the value of i is 5, at which time the test expression is no longer true, causing the browser to skip the for loop and exe-cute the statement beneath the for loop.
The following example shows you how to write a for loop in a JavaScript. This is purposely a barebones example so you can clearly see how the for loop is written.
ch03.indd Sec1:63
ch03.indd Sec1:63 5/2/2005 3:50:10 PM5/2/2005 3:50:10 PM
Throughout this book you’ll be writing for loops in more interesting and benefi cial JavaScripts. The JavaScript writes “I will keep quiet in class.” fi ve times on the docu-ment (Figure 3-11). Take a close look at the docudocu-ment.write() statedocu-ment.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>for loop</title>
</head>
<body>
<script language="Javascript" type="text/javascript">
for( i = 0; i < 5; i++) {
document.write
( (i + 1) + ' I will keep quiet in class.') document.write('<br>')
} -->
</script>
</body>
</html>
NOTE
Figure 3-11 The for loop is used to execute a single statement fi ve times.
ch03.indd Sec1:64
ch03.indd Sec1:64 5/2/2005 3:50:10 PM5/2/2005 3:50:10 PM
Notice that the initializer variable is included within parentheses. This tells the browser to use the value of the initializer variable. Also notice that 1 is added to the value of the initializer variable. If you’re wondering why, it’s because we want to number each sentence consecutively.
However, the value of the initializer variable is 0 and not 1, so we add 1 and tell the browser to display the sum, which is 1 the fi rst time that the browser writes the sentence. This doesn’t change the value of the initializer variable. Only the incre-ment portion of the for loop changes its value.
The second document.write() statement writes HTML that causes the text to be displayed on the next line.
NOTE
NOTE Some JavaScript developers move the initializer variable and the
increment outside of the top portion of the for loop for reasons that are particular to their application. You probably won’t need to do this; however, these techniques are interesting to learn.
The following code segment (a portion of a JavaScript that needs other state-ments in order to run) uses a JavaScript statement to declare and initialize a variable that is used as the initializer variable for the for loop. Notice that you still need to include the semicolon in the for loop:
var i = 0
This next code segment moves the increment to the code block of the for loop.
Make sure that the semicolon isn’t removed from the for loop.
var i = 0
Another technique is to remove the initializer variable, the conditional expression, and the increment from the for loop, as shown in the next code segment. This looks strange, but it produces the same results as the for loop shown previously in this chap-ter. This is called an endless for loop because the test expression is missing, meaning that the browser has no test expression to evaluate to determine when to stop looping.
ch03.indd Sec1:65
ch03.indd Sec1:65 5/2/2005 3:50:11 PM5/2/2005 3:50:11 PM
Look carefully at the statements in the code block. There is nothing new here;
you already learned about these statements. After the value of variable i is incre-mented, the browser executes an if statement. The conditional expression of the if statement tells the browser to compare the value of variable i to the number 5. If they match, the browser is told to break out of the for loop.
var i = 0 for( ; ;) {
document.write
( (i + 1) + ' I will keep quiet in class.') i++
if (i == 5) {
break }
}