JavaScript Tutorial - Lesson 11: Counting and Looping

Counting and Looping

Introduction

Some of the assignments the browser will need to perform on your code consist of executing a portion of code over and over again until an intermediate condition occurs. This repetitive execution of code is referred to as looping. To perform such a loop, your code will need to specify a condition to test, what to do depending on the test for example how to loop, and when to stop.

The for Loop

The for statement is used as a counter. To use it, you need to provide three pieces of information: the starting point, the condition to test, and the expression to execute. Its syntax is:

for(Start; Condition; Expression) Statement

To execute this loop, the Start condition is checked. This is usually the initial value where the counting should start. Next, the Condition is tested; this test determines whether the loop should continue. If the test renders a true result, then the Expression is used to modify the loop and the Statement is executed. After the Statement has been executed, the loop restarts.

In the following example, a for loop is used to count from 0 to 10 and the results of the loop are displayed on a web page:

<Script Language="JavaScript">
var Number;

for(Number = 0; Number <= 10; Number++)
document.write("Number " + Number + "<br>");
</Script>

On this loop, the interpreter is asked to start counting at 0 and to consider Number as the variable that holds the count. Next,, the value of the Number variable is tested to find out if it is less than or equal to 10. If this comparison test renders true, then the third section of the loop increases the counter on the variable by 1, and the document.write function is called to display some words on the screen.

If the Statement of the loop consists of various lines of code, you must include it between an opening and a closing curly brackets { Statement }

If the Condition in the loop never produces a true result, the loop never executes. On the other hand, if the Condition is always true, the loop would never stop. For these reasons, you should make sure that your loop has appropriate values (start and end) that it can act on, and that the loop gets modified so it can stop at one time.

Once has been executed and exits, the program continues with the next statement or expression outside of the loop.

The while Statement

The while statement provides an effective mechanism to loop through code. Its syntax is:

while(Condition) Statement

To execute this loop, the interpreter tests the Condition. If the result of the comparison is true, then the Statement is executed. After the Statement is executed, the loop restarts. This continues UNTIL the test on the Condition renders false or AS LONG AS the test on the Condition is true.

If the Statement to be executed covers more than one line of code, you should include it between an opening and a closing curly brackets. Here is an example:

<Script Language="JavaScript">
var Number = 0;
while(Number <= 8)
{
document.write("Number " + Number + "<br>");
Number++;
}
</Script>

Once again, if the Condition is never met, the Statement never executes. If the Condition is always met, then the Statement would never stop. Each of these two situations should be avoided.

The do…while Statement

The deal with the while statement is that it test the Condition first. If the test renders a false result, then the Statement doesn’t execute and the loop ends. If you want the Statement to be executed prior to testing the Condition, use the do…while loop. Its syntax is:

do Statement while(Condition)

When the interpreter encounters this loop, it first executes the Statement. After executing the Statement, the Condition is tested. If the test renders a true result, then the Statement executes again. This looping continues AS LONG AS the Condition is true. The main difference between a while loop and a do…while is that, in the while loop, the Condition is tested first before the Statement is considered; on the other hand, in the do…while loop, the Statement is first executed, then the Condition is tested.

Here is an example:

<Script Language="JavaScript">
var Number = 0;
do {
document.write("Number " + Number + "<br>");
Number++;
}while(Number <= 12)
</Script>


Previous	Copyright © 2002-2004 FunctionX, Inc.	Home