Javascript for loops
There are situations where you need the program to repeat the same commands for a known
number of times. If there were only two or three repetions of a single command then you
might just type that command out two or three times but a
for gives you more flexibility and saves you a lot of typing:
for(var
i = 0; i < 10; i = i + 1)
document.write(i);
This syntax looks to be terse and inpenetrable if you're used to the FoxPro and Basic
family of languages with their English-like for...step...next
syntax but the statement is not as bad as it looks.
The loop controls a single statement, in this case it's just a write statement. The
expressions inside the parentheses following the for on
the first line define how many times this statement is to run. There are three parts
to this control statement:
-
Initialisation
var i = 0;
The loop is to be controlled by a variable named "i" and that variable is going to
start with a value of zero.
-
Control
i < 10;
The loop will run whilst this statement is true. The statements inside the body of the
loop will execute whilst i remains less than 10.
-
Increment
i = i + 1
The value of i will increase by one every time that the loop executes. This by the
way is the one place in JavaScript where you don't have to use a meaningful name for a
variable. The name "i" has a long and honourable history as being used as the counter
in a loop and any programmer seeing "i" as a variable name will be expecting it to be a
counter.
Blocks of statements
As with the
if,
statement, the for loop can only control a single statement
and we use the same technique of wrapping a block of statements in braces if we do need
more than one primitive statement in the body of the loop. Our first program listed all
the values of i on the same line without spaces so let's add some HTML formatting and put
each number into its own paragraph:
for( var
i = 0; i < 10; i = i + 1)
{
document.write("<p>");
document.write(i);
document.write("</p>");
}
Other for loops
Most for loops go up in steps of 1 but you don't have to
change the loop counter by 1 and you don't have to increase it. You can count down
instead:
for( var
i = 10; i > 0; i = i - 2)
{
document.write("<p>");
document.write(i);
document.write("</p>");
}
This script counts down from 10 in steps of 2. The obvious differenece is that the
increment has been changed to suit but notice the other changes as well. We've had to
change the initial value of i and change the condition that ends the loop.
|
