Arrays << Loops >> Get
Control structures are simply the deciding factors for what sets of codes are going to be used and how they are going to be used. These structures consist of :

  1. IF ELSE
  2. WHILE
  3. FOR
These three control structures are very similar. Each of the three control structures has its own specific format and its own special uses.


The IF statement is used to conditionally execute a block of code. A BLOCK is the set of codes within the { braces }.

The simple IF statement consists of a conditional expression (TRUE or FALSE) and a block of code which is executed IF that expression is TRUE.

if ( expression ) {
block of code ;

The conditional expression can be any variable that holds a logical value such as TRUE or FALSE. Numerical expressions can also be used. 0 is FALSE and all other values are TRUE.

NOTE : The placement of the braces is IMPORTANT. JavaScript is VERY picky at times. The opening brace { should be on the same line as the IF statement. It has been noted in other tutorials that the word if should be in lower case letters. I have not found this to be a problem, but I like to code my pages in lower case anyways.

Here is an example of the IF statement :
if ( ( x < 10 ) && ( 0 < x ) ) {
y = ( x + x );
temp = "The sum of " + x + " plus " + x + " is " + y ;

This example uses 2 conditional statements. The && stands for AND. So BOTH expressions must have a TRUE value to execute the IF block of code.

IF the value of x is less than 10 AND the value of x is greater than 0, then exectute this block of code.

What IF the expression value is FALSE? In that case, an ELSE clause will be needed. One block of code is executed IF the value is TRUE, and a second block is executed IF the value is FALSE.

if ( SomeVariable ) {
true block of code;
} else {
false block of code;

NOTE : The placement of the braces is IMPORTANT. JavaScript is VERY picky at times. If an ELSE clause is present, the closing brace } of the IF and the opening brace { of the ELSE should all be on the same line.

Here is an example of the IF statement with an ELSE clause :
if ( ( x < 10 ) && ( 0 < x ) ) {
y = ( x + x );
document.write("The sum of " + x + " to itself is " + y);
} else {
y = null;
document.write("The number " + x + " is not within my range.");

IF both expressions produce a TRUE value, the regular block of code will be executed. IF one or both of the expressions have a FALSE value, thus creating a total FALSE value, the code block in the ELSE section will be executed.

Setting the variable y to null is a precautionary measure. If it had a value in it already from a previous expression test, this will reset it to nothing.

NOTE : The ELSE section is not necessary for many applications. Leaving it out just lets the control exit the IF statement normally.


The while statement is used to execute a block of code while a certain condition is true. The difference between a WHILE statement and an IF statement is : the WHILE block may be executed many times. The IF...ELSE blocks are executed once.

while ( expression ) {
block of code ;

The expression is tested for a TRUE or FALSE value. If it is TRUE then the block of code is executed. The control then loops back to the top of the WHILE statement. The expression is then evaluated again.

This process continues until the expression becomes FALSE, or until some statement within the block forces it to terminate.

var x = 1;

while ( x <= 10 ) {
document.write( "Hello" );

This will produce the word Hello to be written 10 times. The WHILE statement checks to see if x is less than or equal to 10. WHILE that expression holds true, do this block of code. The block has an x++ command. This is the same as saying x=x+1 or increase the value of x by 1. In this case, x is being used as a counter. Once the x counter is over 10, the expression becomes FALSE and the command process can continues on past the WHILE loop.

The WHILE statement can be totally passed over if the expression is FALSE to begin with. Another situation that allows an early "break out" of a WHILE statement is a BREAK command. These are generally created by a second CONTROL condition nested with the main one.

var count = 1;
var temp = 0;

while ( true ) {
temp = temp + count;

if ( temp > 10 )


This creates the same output as the previous examples. The point is to show how an inner condition can break the circle of the main loop.

Setting TRUE as the expression creates an unlimited loop. The variable called TEMP increases by 1 each time the loop goes around. IF the value of temp becomes greater than 10, then BREAK jumps the control out of the WHILE loop.

Using the WHILE loop may cause problems though. Since the WHILE expression is set to TRUE, there is no way for the while to terminate unless the break statement is executed. If the break statement is not entered or a false number is entered, the BREAK will never happen and the WHILE loop will go on forever.

The CONTINUE statement is a special statement that may be used inside WHILE loops. If you were playing Monopoly, it would be the same effect as an "Advance to GO" card. When a CONTINUE is found, any coding toward the end of the WHILE loop is skipped and the power goes back up to the top of the WHILE loop.

var xsum = 0;
var loopcount = 0;
var divcount = 1;

while ( loopcount++ < 10 ) {

if ( (loopcount/2) == divcount ) {

xsum = xsum + loopcount;

document.write ( xsum );

In this example, all the odd numbers between 1 and 10 are added together.
  1. Variables are set at starting numbers.
  2. The WHILE loop tests for a number lower than 10.
  3. IF the number divided by 2 MATCHES the remainder THEN
    1. increase the remainder count for the next test.
    2. CONTINUE (ignore the remaining and go back to the WHILE start.
  4. Add the current number to the running total.
  5. When the WHILE loop is done, display the total.
See the example in action


The FOR is the more complex of the three control structures. Here is the basic outLIne of it :

for ( initialize; condition; increment ) {
block of code ;

The initialize property is always executed exactly once when the for statement is first encountered. It is used to start a variable condition (the starting point of a FOR loop).

The condition property is a conditional test, and serves exactly the same function as in the while statement. It is tested at the top of each loop. The loop terminates when this condition evaluates as false. (The ending point of a FOR loop).

The increment statement is executed at the end of each loop. As if it were placed immediately after the last statement in the FOR block. It is used to update the variable in the initialize property. (The increase or step value each loop).

Here is an example that adds the numbers from 1 to 10 using a FOR loop :

var total = 0;
var x;

for ( x = 1; x <= 10; x++ ) {
total = total + x;

document.write ( total );

The FOR loop is very similar to the WHILE loop. It is possible to use the BREAK and CONTINUE properties within a FOR loop. One of the advantages of a FOR loop is that its update statement is executed on every pass through the loop, even those passes that are cut short by a CONTINUE. The CONTINUE skips every statement in the block, but it does not cause the update statement to be skipped. As LIke the other loop controls, the coding of them should ensure an escape. An endless loop is not usually the desired result.

The FOR loop also has some unique features.
  1. Variables may actually be declared in the initialize area. Delcaring the "var x;" (from the above example) before the loop isn't neccesary if the variable is only being used for THAT loop only.
  2. Both the initiaLIzation portion and the update portion of the FOR loop may contain multiple statements separated a comma.
This example uses 2 variables. One to add all the numbers from 1 to 10. The other to add only the "even" numbers.

var total = 0;
var even = 0;

for ( x = 1, y = 1; x <= 10; x++, y++ ) {

if ( ( y % 2 ) == 0 ){
even = even + y;
total = total + x;

document.write ( total );
document.write ( even );
Arrays << Loops >> Get

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads