CSCI 121 - Lecture 13 - JavaScript Functions, Conditional and Control Statements (continued)

Topics Covered

JavaScript Functions:

See Lecture 12

JavaScript Conditional Statements:

See Lecture 12

Control Statements (aka Loops)

Overview

Loops can execute a block of code a number of times.
Loops are handy, if you want to run the same code over and over again, each time with a different value.
Often this is the case when working with arrays:

// Instead of this:
text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

// You can write this:
for (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
}

JavaScript supports different kinds of loops:

for - loops through a block of code a number of times
for/in - loops through the properties of an object
while - loops through a block of code while a specified condition is true
do/while - also loops through a block of code while a specified condition is true

For loop

The for loop is often the tool you will use when you want to create a loop.
Syntax:

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

Statement 1 is executed before the loop (the code block) starts.

Normally you will use statement 1 to initialize the variable used in the loop (i = 0).
This is not always the case, JavaScript doesn't care. Statement 1 is optional.
You can initiate many values in statement 1 (separated by comma).

Statement 2 defines the condition for running the loop (the code block).

Often statement 2 is used to evaluate the condition of the initial variable.
This is not always the case, JavaScript doesn't care. Statement 2 is also optional.
If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.
If you omit statement 2, you must provide a break inside the loop. Otherwise the loop will never end. This will crash your browser.

Statement 3 executed each time after the loop (the code block) has been executed.

Often statement 3 increments the value of the initial variable
This is not always the case, JavaScript doesn't care, and statement 3 is optional.
Statement 3 can do anything like negative increment (i--), positive increment (i = i + 15), or anything else.
Statement 3 can also be omitted (like when you increment your values inside the loop):

Example:

for (i = 0; i < 5; i++) {
    text += "The number is " + i + "
";
}

For/In loop

Loops through properties of an object.
Is NOT used for looping through arrays (many are confused by this).
Example:

var person = {fname:"John", lname:"Doe", age:25}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

Above prints out: John Doe 25
Not a very useful loop construct, IMHO, except when used in debugging.

While loop

The while loop loops through a block of code as long as a specified condition is true.
Syntax:

while (condition) {
    code block to be executed
}

Example: In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10:

while (i < 10) {
    text += "The number is " + i;
    i++;
}

Note, If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.

Do/While loop

The do/while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.
Syntax:

do {
    code block to be executed
}
while (condition);

Example: The example below uses a do/while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested:

do {
    text += "The number is " + i;
    i++;
}
while (i < 10);

Again, don't forget to increase the variable or the loop will never end.

* Examples and content from W3Schools.com.