Learning JavaScript Basics - Loops

Author: allsyntax.com Author's URL: www.allsyntax.com More by this author

Added:Sep 26, 2005 Rating: Less than 3 votes yet Level: Beginner Software: Dreamweaver FrontPage GoLive

Learning JavaScript Basics - Loops Loops

Loops are an important part of JavaScript. Loops control your program to whatever limits you set them to. There is a loop which executes a group of statements a finite number of times. Then, theres an infinite loop, which is a loop that will never terminate.

There are 3 types of loops used with JavaScript:

FOR loop
DO WHILE loop
WHILE loop

It is to your advantage to use loops when you need to execute a group of statements over and over. Again, this cuts down on coding for you, and also allows your program to execute faster. You want to build your programs short and powerful, not long and slow.

For Loop:

Although you have already seen a for loop used earlier in this tutorial, I will still go ahead and describe how they are used.

for (<initial value> ; <condition = true> ; <increment value>)
{
statement1;
statement2;
and so on...;
}

like always, heres a more pratical example:

a = 1;
b = 1;
c = 20;
for (a = 1; a >= c; a++)
{
b = b * 2;
document.write(b);
}

So what is the control variable in the code sample above? The answer is "a" do you see?

While Loop:

We have not discussed while loops, but there is a place and need for them in JavaScript. If you were to use a while loop, this is how you would construct it:

while (<condition = true>)
{
statement1;
statement2;
and so on...;
}

And this is what one might look like with acutal information plugged into it:

while (x <= 20)
{
document.write("x= "+x+" ");
x = x + 1;
}

Thats it for the while loop, pretty simple isn't it?

Do While Loop:

This is similar to the WHILE loop, except its just arranged a bit differently. Here, take a look:

do
{
statement1;
statement2;
and so on...;
}
while(<condition = true>);

Like all of the rest of the loops, the statements you need executed a number of times are between the { and the }. But unlike the While loop and the for loop, the condition is underneath the statements. Just be sure you say "do" at the beginning when using this loop. Heres an example:

do
{
document.write("x = "+x+" ");
x = x + 1;
}
while (x <= 20);

Did you notice anything different? Look at the condition of the loop. At the end, we must use the semicolon. This is also the only loop where a semicolon is required at the end of the condition.

Break Statement:

What if you needed a loop, but once the loop reached a certain point you also needed it to stop within the boundries you already set? JavaScript has the BREAK statement specificly for this purpose. So if you were caught in an infinite loop, the BREAK statement could get you out of it. Once JavaScript reads the BREAK statement, the loop is dropped.

I know, you want to see it in action! So in the code sample below, I will create an infinite loop (one that would normally never end), but then use the BREAK statement to end the loop once it has reached a point I specify...

x = 1;
y = 2;
z = 8;
while (x > 0) //x will always be greater than zero if we increment it
{
y = y * 5;
z = z / 2;
x = x + 1;
if (x == 5) //this is where the loop is set to break when x = 5.
break;
}
document.write("x = "+x+" ");
document.write("y = "+y+" ");
document.write("z = "+z+" ");

Do you see how it works?

Continue Statement

Like the break statement, there is also the continue statement. If you use the continue statement, it will stop execution of the loop and return back to the beginning of the loop. This means, if you place the continue statement in the middle of your loop, any statements underneath will not be executed once the condition for continue has been met. The purppose or intent behind using it is to check for special exceptions inside the loop --and skip them without disrupting the normal flow of your loop.

Here is an example:

x = 0;
while (x < 5)
{
x = x + 1;
if (x == 3) //if this is true, the loop will go back to the beginning
continue;
document.write(x+" ");
}

What do you think occured above once executed? When the loop is processed, it takes the value of x and adds one to it. Then it checks to see if x is = to 3, if not - it will process the document.write statement. So the output would be: 1,2,4,5. Skipping 3 because when it got to continue, it went back up to the beginning again.

This seems like a good place to stop and show you a bit more examples using what we learned.

Example Program 5