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 structure 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".