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

Recap of the First Tutorial in this Series

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.

Goals for this Tutorial

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.

The if...else Statements

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 Simple if... Statement

The code illustrating a simple if statement.
The code illustrating a simple if statement.
The output of the web page. Note the use of == (comparison) rather than = (assignment).
The output of the web page. Note the use of == (comparison) rather than = (assignment).

A Simple if...else... Statement

In this example the value of the variable x is equal to 8. The comparison fails and the code following the else is executed.
In this example the value of the variable x is equal to 8. The comparison fails and the code following the else is executed.
The statement following the else is executed.
The statement following the else is executed.

An if..else...if Statement

Code for an if...else...if... statement.
Code for an if...else...if... statement.
The value of the first comparison fails. Thus the else clause is evaluated. The else clause is evaluated.
The value of the first comparison fails. Thus the else clause is evaluated. The else clause is evaluated.

The Exactly Equals === Comparison Operator

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.

Using the === Comparison Operator

Note the comments in the code the string 8 does not match the integer 8.
Note the comments in the code the string 8 does not match the integer 8.
Ouput from the preceding snapshot.
Ouput from the preceding snapshot.

The Switch Statement

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.

Switch Statement Example

We could add a default case here if the value given for the switch was not one of 0 through 6. The case might read: default: document.write("I don't know what day it is");
We could add a default case here if the value given for the switch was not one of 0 through 6. The case might read: default: document.write("I don't know what day it is");

Loops in JavaScript

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 Loop in JavaScript

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 for Loop

A simple for loop. The variable is initialized to 0. The loop will continue printing the statement until i=5.
A simple for loop. The variable is initialized to 0. The loop will continue printing the statement until i=5.

The While Loop

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 while Loop

A simple while loop.
A simple while loop.

The do....while Loop

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);

A Simple do.....while Loop

A "mistake" was made here in setting the initial value of i to 10 rather than 0. This illustrates that the loop is always executed at least once.
A "mistake" was made here in setting the initial value of i to 10 rather than 0. This illustrates that the loop is always executed at least once.

Wrap Up and What's Next

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

Was This Tutorial Understandable?

Cast your vote for Please rate this tutorial for clarity and completeness.

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working