JavaScript Flow Control and Looping

One of the most powerful features of JavaScript (and every other programming or scripting language for that matter) is the ability to build intelligence and logic into your web pages. It is vital in constructing scripts to be able to have the script make decisions and repeat tasks until specified criteria are met. For example, if you are developing an e-commerce application you may want to repeatedly ask a user to enter a credit card number until a valid credit card number is entered. Alternatively, you may want your script to loop a specifc number of times through a task before moving on to the next part of the script. All of this logic and flow control is achieved using some very simple structures. These are:

Conditional Statements

• if statements
• if ... else ... statements

Looping Statements

• while loops
• do ... while loops

switch Statements

label Statements

with Statements

Conditional statements control whether a part of a script is executed depending the result of a particular expression (i.e whether an expression returns a boolean true or false value). The two types of conditional structures are if and if ... else. In this section we will take a closer look at both of these condtional structures and provide some examples of their use.

The JavaScript if Statement

The first line of an if statement involves the if statement followed by the expression to be evaluated in parentheses. For example:

if (i < 2)

In the above example if i is less than 2 then the expression will be evaluated as being true, otherwise it will be returned as false

The next step in structing an if statement is to specify what action should be taken if the expression is true. This is acheived by placing the lines of script to be executed in open and closing braces after the if statement:

if (i < 2)
{
      document.writeln ("The value of i is less than 2");
      i++;
}

Note that if there is only one line of script to be performed if the if expression is true then the braces are optional:

if (i < 2)
      document.writeln ("The value of i is less than 2");

Whilst this is perfectly valid JavaScript it is recommended, for the purposes of consistent scripting style, that the braces be used even for a single line of script after the 'if' statement.

The JavaScript if ... else Statements

The if statement above allows you to specify what should happen is a particular expression evaluates to true. It does not, however, provide the option to specify something else that should happen in the event that the expression evaluates to be false. This is where the if ... else construct comes into play.

The syntax for if ... else is the same as for the if statement with the exception that the esle statement can be used to specify alternate action:

if (customerName = "Fred")
{
      document.write ("Hello Fred!");
} 
else 
{
      document.write ("You're not Fred! Where's Fred?");
}

As shown in the above example the script following the if statement is executed when the expression is evaluated to be true (i.e the customerName variable contains the string "Fred") and the script after the else statement is executed when the customerName does nmot match the string "Fred".

It is generally common knowledge that computers are great at performing repetitive tasks an infinite number of times, and doing so very quickly. It is also common knowlede that computers really don't do anything unless someone programs them to tell them what to do. Loop statements are the primary mechanism for telling a computer to perform the same task over and over again until aset of crieria are met. This is where for, while and do ... while loops are of use.

JavaScript for loops

Suppose you wanted to add a number to itself ten times. One way to do this might be to write the following JavaScript:

var j = 10;

j += j;
j += j;
j += j;
j += j;
j += j;
j += j;
j += j;
j += j;
j += j;
j += j;

Whilst this is somewhat cumbersome it does work. What would happen, however, if you needed to perform this task 100 times or 10,000 times. Writing a script to perform this as above would be prohibitive. This is exactly what the for loop is intended to handle.

The syntax of a for loop is as follows:

for ( initializer; conditional expression; loop expression ) {

     statements to be executed

}

The initializer typically initializes a counter variable. Traditionally the variable i is used for this purpose. For example:

i = 0

which sets the counter to be the value i and sets it to zero.

The conditional expression specifies the test to perform to verify whether the loop has been performed the required number of times. For example, if we want to loop 100 times:

i < 10

Finally the loop expression specifies the action to perform on the counter variable. For example to increment by 1:

i++

Bringing this all together we can create a for loop to perform the task outlined in the earlier example:

var j = 10;

for (i=0; i<10; i++)
{
      j += j;
}

As with the for loop the enclosing braces are optional if a single line of script is to be executed, but their use is recommeded regardless.

The for loop described above works well when you know how many times a particular task needs to be repeated. Clearly there will often be instances where something needs to be repeated until a certain condition is met, with no way of knowing how many repetitions are going to be needed to meet that criteria. To address this need JavaScript provides the while loop. In essense the while loop repeats a set of tasks until a specified condition is met. The while loop syntax is as follows:

while (condition) {

     JavaScript Statements

}

where condition is an expression that will return either true or false and JavaScript Statements represents the JavaScript to be executed while the expression is true. For example:

while ( i < 10 )
{
      i = i + j;
}

In the above example the while expression will evaluate whether i is less than 10. If it is already greater than 10 then the code in the braces is skipped and the loop exits without performing any tasks. If it is not greater than 10 the code in the braces is executed and the loop returns to while statement and repeats the evaluation of i. This process repeats until i is greater than 10, at which point the loop exits.

JavaScript do ... while loops

Think of the do ... while loop as an inverted while loop. As shown above, the while loop evaluates an expression before executing the code contained in the body of the loop. If the expression evaluates to false on the first check then the code is not executed. The do .. while loop is provided for situations where you know that the code in your loop will always need to be executed at least once. For example you may want to keep asking a user to fill in a field in a prompt dialog until specific text is entered. You know that you have to show the prompt dialog at least once to get a string from the user to evaluate against. The syntax for the do ... while loop is as follows:

do
{
       ''JavaScript statement''
} while (''conditional expression'')

In the do ... while example below a prompt dialog will be displayed and the user response assigned to a variable. Until that variable matches the name "John" the loop will continue to display the prompt dialog to the user:

do
{
        var userResponse;
        userResponse = prompt ("Enter your name", "");
} while (userResponse != "John")