A Beginner JavaScript Tutorial Series: Program Logic Statements - if....else, while, for, and switch Statements

In the first tutorial in this series entitled, "A Beginner JavaScript Tutorial Series: An Introduction to JavaScript - Identifying Basic Requirements". we covered some very basic items to see that the environment was appropriate for "doing" JavaScript.

We checked that JavaScript was enabled in the browser by creating a short HTML file which included a JavaScript <script> block which performed a Hi there write to the screen. We discussed comments in JavaScript which can be good placeholders to new features to be added. Or a place to put a question during the learning process.

Variables were introduced and their dynamic nature discussed. The dual purpose "+" (plus sign) was introduced not merely as an arithmetic operator but also as a concatenation operator. We used these concepts to introduce the notion of a function.

The goal for this tutorial is to introduce the main logical constructs which JavaScript uses: if...else, for, while, and switch. This is done for several reasons. First, most computer initiates by the time they start to learn JavaScript have seen these statements in learning one or more computer programming classes, so belaboring the process is somewhat wasted time. Secondly, from experience in teaching, I find that once introduced, with repetition as the statements are used even newcomers quickly identify with their use. Also having logic introduced early on provides more of a framework in which to introduce other of the language elements in less time.

There are three variations of the if statement:

• if (condition is true) { execute some code }
• if (condition is true) { execute some code} else { execute alternative code}
• if (condition1 is true){ execute some code} else if (condition2 is true) { execute code} else {execute code if neither condition1 or condition2 is true}

The first two forms of the if statement are rather straight forward as examples in the snapshots illustrate.

The third form it should be noted can be continute beyond two conditions

consider the second line:

.....else {executte code if neither condition1 or condition2 is true} could be substituted by

.....else if (condition3 is true) {execute code if neither condition1 or condition2 is true}

.....

There is a simpler way to handle the third form of this statement. It is in using the switch statement.

The following example illustrates a point that is generally not found in other languages, "the exactly equals comparison operator, ===. Not only do the values have to be equal they must also be of the same type. In this case the variable x is a string being compared to an integer value.

As we have equals (==) comparison operator and (===) the exactly equals operator. We also have a not equals comparison operator, (!=) and a not exactly equals operator (!==) meaning that the operands are of different types.

The switch statement allow you to avoid using a cumbersome if...else.....if....else.... construct.

The format of the switch statement looks like:

switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2

}

The details are as follows. The reserved keyword switch is used with a parameter expression. The value of that expression is tested against the first case. If that compariosn evaluates to true then the code block is evaluated. If it evaluates to false the comparison is made with the next case. If that evealuates to true then the code block in that case is executed. If it evaluates to false then the comparison is made with the next case. Often a default case is specified. If all case comparisons fail the defualt case is executed. The last statement is each cas is generally a break statement. It ends the switch statement and execution continues at the next statement after the end of the switch statement.

The snapshot shows a comparison for the day of the week.

JavaScript supports four different looping constructs. We will disucss three of them here:

• for - loops through a block of code a number of times
• while - loops through a block of code while a condition is true
• do/while - loops through a block of code while a specified condition is true. The do/while loop always executes at least one.

The for look has the following structure:

for (statement #1; statement #2; statement #3)
{
the code block to be executed
}

• statement #1 is an initialize. It is executed before any other statement.

• statement #2 is a conditional statement. It determines if the code block should be executed.If it evaluates the false even the first time the statement is encountered the code block is never run

• statement #3 is executed after the code block is run.

The syntax of the while loop is as follows:

while(condition is true){

execute the code block

}

The condition must somehow be modified within the loop or an endless loop wil occur as in this simple example.

var i = 0;

while(i<10) {

document.write("the number is" + i + "<br>");

}

The variable i is never modified. Thus, the condition in the while loop would be true forever.

To have this loop end you should modify the value of the variable i. The following code wouuld terminate after printing out 10 statements.

var i = 0;

while(i<10) {

document.write("the number is" + i + "<br>");;

i = i + 1;

}

The syntax of the do while loop is as follows:

do {

code block

} while (condition is true.

This code block is guaranteed to run at least once. It the snapshot an "error" was intentionally made and the variable i was initialized to 10 rather than the intended value of 0.

do
{
x=x + "The number is " + i + "<br>");
i= i + 1;
}
while (i<10);

We have demonstrated the various if..... statements, the switch statement, and three out of the four looping constructs available in JavaScript. The fourth looping construct known as the for/in loop will be covered in a future tutorial as it deals with more advanced materials. We introduced our first comparison operators, the == (is equal) and === (is exactly equals).

The next tutorial will consist of a number of items:

• some built-in functions
• the full set of assignment operators
• the full set of comparison operators
• the Boolean types