Again, you will find many close similarities between JavaScript and
PHP when it comes to looping. Both languages support while, do...while, and for loops.
A JavaScript while loop first
checks the value of an expression and starts executing the statements
within the loop only if that expression is true. If it is false, execution skips over to the next
JavaScript statement (if any).
Upon completing an iteration of the loop, the expression is again
tested to see if it is true; the
process continues until such a time as the expression evaluates to
false, or execution is otherwise
halted. Example 14-17 shows such a loop.
<script> counter=0 while (counter < 5) { document.write("Counter: " + counter + "<br />") ++counter } </script>
This script outputs the following:
Counter: 0 Counter: 1 Counter: 2 Counter: 3 Counter: 4
If the variable counter were
not incremented within the loop, it is quite possible that some
browsers could become unresponsive due to a never-ending loop, and the
page might not even be easy to terminate with Escape or the Stop
button. Be careful with your JavaScript loops.
When you require a loop to iterate at least once before any tests
are made, use a do...while loop,
which is similar to a while loop
except that the test expression is checked only after each iteration of
the loop. So, to output the first seven results in the seven times
table, you could use code such as that in Example 14-18.
<script> count = 1 do { document.write(count + " times 7 is " + count * 7 + "<br />") } while (++count <= 7) </script>
As you might expect, this loop outputs the following:
1 times 7 is 7 2 times 7 is 14 3 times 7 is 21 4 times 7 is 28 5 times 7 is 35 6 times 7 is 42 7 times 7 is 49
A for loop combines the best of
all worlds into a single looping construct that allows you to pass three
parameters for each statement:
An initialization expression
A condition expression
A modification expression
These are separated by semicolons, like this: for (expr1 ; expr2 ; expr3). At the start of the first iteration of the
loop, the initialization expression is executed. In the case of the code
for the multiplication table for seven, count would be initialized to the value 1.
Then, each time around the loop, the condition expression (in this case
count <= 7) is tested, and the
loop is entered only if the condition is true. Finally, at the end of each iteration,
the modification expression is executed. In the case of the seven times
table, the variable count is
incremented. Example 14-19 shows what the code
would look like.
<script> for (count = 1 ; count <= 7 ; ++count) { document.write(count + "times 7 is " + count * 7 + "<br />"); } </script>
As in PHP, you can assign multiple variables in the first
parameter of a for loop by separating
them with commas, like this:
for (i = 1, j = 1 ; i < 10 ; i++)
Likewise, you can perform multiple modifications in the last parameter, like this:
for (i = 1 ; i < 10 ; i++, −−j)
Or you can do both at the same time:
for (i = 1, j = 1 ; i < 10 ; i++, −−j)
The break command, which you
saw to be important inside a switch
statement, is also available within for loops. You might need to use this, for
example, when searching for a match of some kind. Once the match is
found, you know that continuing to search will only waste time and make
your visitor wait. Example 14-20 shows how to use the
break command.
<script>
haystack = new Array()
haystack[17] = "Needle"
for (j = 0 ; j < 20 ; ++j)
{
if (haystack[j] == "Needle")
{
document.write("<br />- Found at location " + j)
break
}
else document.write(j + ", ")
}
</script>This script outputs the following:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, - Found at location 17
Sometimes you don’t want to exit entirely from a loop, but instead
wish to skip the remaining statements just for this iteration of the
loop. In such cases, you can use the continue command. Example 14-21 shows this in
use.
<script>
haystack = new Array()
haystack[4] = "Needle"
haystack[11] = "Needle"
haystack[17] = "Needle"
for (j = 0 ; j < 20 ; ++j)
{
if (haystack[j] == "Needle")
{
document.write("<br />- Found at location " + j + "<br />")
continue
}
document.write(j + ", ")
}
</script>Notice how the second document.write call does not have to be
enclosed in an else statement (which
it did before), because the continue
command will skip it if a match has been found. The output from this
script is as follows:
0, 1, 2, 3, - Found at location 4 5, 6, 7, 8, 9, 10, - Found at location 11 12, 13, 14, 14, 16, - Found at location 17 18, 19,