Contextual Ads
More JavaScript Resources
Advertisement
Loops
You will not believe how important loops are in programming. Loops help a program decide what to do. From the simplest thing that may sound like “While the visitor visits the website between 7AM and 10AM say ’Good morning’” to “If browser is Internet Explorer use x function, if browser is Firefox use y function”.
Now, an example more suitable for JavaScript will be choosing between two different types of scripts, one for Internet Explorer browser and one for Netscape, because of some incompatibility between the two.
No matter where, loops are frequently used in programming. There are several types of loops and you will learn them all by reading the below lessons.
<h1>if</h1>
Probably the most basic loop. The prototype for ‘if’ is:
if (condition)
{
[do stuff]
}
The above code translated in human language it sounds like this “If the condition is true ‘do stuff’, if not don’t ‘do stuff’”.
Pretty simple… now let’s see a real example:
var x = 0;
if (x == 0)
{
document.write(“X is 0”);
}
If the variable ‘x’ wouldn’t be equal to 0, the if expression would return false, and therefore nothing would be done.
But because x equals to 0, the “if (x=0)” statement returns true, and the code between ‘{‘ and ‘}’ is executed.
<h1>if ... else</h1>
We can choose to execute some other code if the condition returns false. The prototype for if … else is:
if (condition)
{
[do stuff];
}
else
{
[do something else]
}
The above code says “If condition is true, do stuff, if the condition isn’t true, do something else”. We can use this in real life examples, like “If it’s early, I will watch a movie, else, if it’s late, I will go to sleep”.
var x = 0;
if (x == 0)
{
document.write(“X is 0”);
}
else
{
document.write(“X is not 0”);
}
if ... else if
What if you want to check if ‘x’ is 0, 1 or 2?
var x = 1;
if (x == 0)
{
document.write(“X is 0”);
}
else if (x == 1)
{
document.write(“X is 1”);
}
else if (x == 2)
{
document.write(“X is 2”);
}
else
{
document.write(“X has some other value”);
}
If ‘x’ is 0, 1 or 2, there will be a string displaying that, else, there displayed string will be “X has some other value”.
You can see that the first condition is an usual one, “if (x = 0)”. Then it comes an “else if” expression, that acts just like an usual if. The third condition is an “else if” condition too. Till now, if ‘x’ isn’t 0, 1 or 2, we take only one decision, the last one, called ‘else’. If none of the above conditions was true, we have this last “else” condition.
If we declared “var x = 12” at the beginning of the script, the last condition would have been executed, that prints “X has some other value” in the browser. But because we set ‘x’ to 1, the second condition is executed.
for
With this loop, a piece of code can loop as many times as counted by the loop. Below is the prototype for the ‘for’ loop.
for ([initialization]; [condition]; [loop])
{
[do_stuff];
}
And here is a simple example for you to understand how the ‘for’ loop works:
for (var x = 0; x < 6; ++x)
{
document.write(x + “ ”);
}
This loop will display all numbers from 0 to 5, separated by a space. Why? First, we directly initialize a variable, “x = 0”. Of course we could initialized it earlier like this:
var x = 0;
for (; x < 6; ++x)
As you saw, we still need to specify the semicolon, even if the element is missing. By the way, all the elements between ‘[‘ and ‘]’ in the prototype are optional, but if you omit them, you must still keep the semicolon, like this:
for (;;)
After the variable was initialized, we verify if the number it holds is smaller than 6, using the ‘<’ operator. If the number is smaller, we increment it by one using “++x”. Then the code starts. It uses the “document.write” to display the value the variable holds. First time, the number displayed is 0. After this, the loop continues and x is incremented by 1, and 0+1 results in 1. In the third loop, the number is again incremented by one, 1+1 turning into 2. This stops at the loop number 6, when variable x holds value 5. At the next loop, when it reaches “x < 6”, the loop returns “false” because x is 6 at that time. Therefore, the loop stops.
You can change the value at which the loop stops to any number you like. Set it to 1000 for example:
for (var x = 0; x < 1000; ++x)
Your computer may lag a bit if you have a weak processor.
while
The “while” loop is somehow similar to the “for” loop. Let’s see how the prototype looks…
while([condition])
{
[do_stuff];
}
And let’s see a short example, and comment it.
var i = 0;
var x = true;
while(x)
{
i++;
document.write(" " + i);
if
(i == 20)
{
x = false;
}
}
First we initialize two variables. First, ‘i’ to the integer 0, and second, ‘x’ to the boolean value true.
The while loop is somehow simpler than the ‘for’ loop because it executes only while a condition is true. Here the condition is ‘x’. If x is true, the loop will continue, till ‘x’ will turn out to be false. If x will never change to true, the script will continue to write the current number in the browser to infinite (which is bad). But we set an ‘if’ loop inside the ‘while’ loop. Every time the ‘while’ loop executes, the ‘if’ loop executes also. The ‘if’ loops checks if ‘i’ is equal to 20, and when it reaches this value, it sets the variable ‘x’ to false, therefore stopping the ‘while’ loop. The variable ‘i’ is incremented inside the ‘while’ loop so it can reach 20 and trigger the ‘if’ loop.
In this short lesson, you learned how the ‘while’ loop works, but you also learned how a loop can be used inside another loop.
do... while
The ‘do… while’ loop is identical to the ‘while’ loop with one small exception: it executes at least once. That’s because the condition is verified after the script looped once.
do
{
[do_stuff];
}
while([condition])
Our previous script, with the variable ‘x’ set to false from the beginning, will still execute once, using a “do… while” loop because the condition is verified after the first loop. Therefore, the following script will display “1” in the browser.
var i = 0;
var x = false;
do
{
i++;
document.write(" " + i);
if
(i == 20)
{
x = false;
}
}
while(x);
There are many more to say about loops and lots of examples to give.
Go google  |
Tutorials
Code
Knowledge Base
News
Forums
Pictures
Videos
Bargains
Icons
Newsgroups
PageRank™ Checker
Alexa Rank Checker
Domain-Name Lookup
(Rated 4.2 with 10 votes) 
Digg It!
Del.icio.us
Reddit
StumbleIt
Newsvine
Furl
BlinkList
Rate this tutorial
Current Comments
Bargains RSS Feed
View More Magazines
View More Downloads
