There is nothing special about a loop. A loop is used to repeat a set of commands. I introduced a simple use of the repetition structure of Java Script on page 4 using the while loop. On this page, I demonstrate further ways to use loops.
Set up an HTML document like so:
<html>
<head>
<Script Language = "JavaScript">
<!--
// -->
</script>
</head>
<body>
</body>
</html>
Between the comment tags, type the following lines:
var row = 1;
for (row = 1; row < 6; row++)
{
document.write(row + "<br>");
}
Line 1: Declare variable row and initialize as 1.
Line 3: Initiate for loop. Begins variable row at 1. The range of row is 1-5 because row is less than 6.
The loop increments row by 1 caused by "++".
Line 5: Write on the web page the value of variable row and ("+") add a break (<br>) at the end of the line.
This is a very basic loop as you can tell. However, we can do a bit more with this as well.
Erase the code you just entered between the comment tags.
Enter the following lines in the place of the code you just removed:
var row;
var column;
for (row = 1; row < 6; row++)
{
for (column = 1; column < 6; column++)
{
if (column > row) break;
document.write(" " + column);
}
document.write("<br>");
}
Line 1: Declare variable row.
Line 2: Declare variable column.
Line 4: Initialize for loop. Begins variable row at 1. Range of row is 1-5 just as before.
Line 6: Initialize another for loop. Begins variable column at 1 and gives column the same range as row.
We call this a nested loop. This is simply a loop which is part of a loop. As you can see, this loop on line 6 is encompassed by the braces from the loop begun on line 4.
Line 8: Test variables column and row. When column is greater than row, break.
The word we used break is a Java Script keyword. This command exits the loop immediately. Because we use break in the nested for loop, the line below (Line 9) is not executed. When column is greater than row, the next line read is Line 12, which simply adds a line break (<br>) at the end of the line. This keyword break only exits the loop that it is entered in (which is the nested for loop). The outer loop (which encompasses the nested loop) continues to loop as normal until its conditions are false (in this case, when column is not less than 6).
Line 9: Write on the web page a space then the value of variable column.
Line 12: Add a line break in order to space the lines. Keep in mind that this command is only executed when the nested loop breaks (when column is greater than row).
I have just introduced a way to use the break keyword in a loop. Java Script has another keyword which loops use called continue. Similar to break, the keyword continue can also be used to interrupt the execution of a loop. The difference is that continue does not halt the loop entirely as break does. It simply tells the loop to increment again, but it tells the loop to do so immediately. Therefore, the commands after the keyword continue is used are never reached and are therefore never interpreted. I will demonstrate this with the next example.
Set up an HTML document like so:
<html>
<head>
<Script Language = "JavaScript">
<!--
// -->
</script>
</head>
<body>
</body>
</html>
Between the comment tags, enter the following lines:
var number;
var skipped = "";
for (number = 1; number < 21; number++)
{
if (number > 12 && number < 18)
{
skipped += number + ", ";
continue;
}
document.write(number + " ");
}
document.write("<br>Used continue to skip " + skipped);
Line 1: Declare variable number.
Line 2: Declare variable skipped;
Variable number is going to be used as the incremented number in the loop.
Variable skipped is going to be used as a string to store to numbers which are skipped.
Line 4: Initiate for loop. Number is initialized as 1, must be less than 21, and
is incremented by 1
Line 6: Test if number is between 12 and 18
Line 8: When line 6 is true, store current number in string skipped, along with whatever else is stored in string
skipped (+=)
Line 9: When line 6 is true, continue.
This makes the loop continue, as implied. The loop increments itself by 1 again. By entering the continue keyword, the commands below are not executed (that is, any Java Script written on the lines beneath line 9). Therefore, the numbers 13-17 (as tested on line 6) are stored in the string skipped.
Line 12: Write on the web page the current value of number then a space.
Line 15: Write on the web page the numbers stored in the string skipped (stored on line 8).
Keep in mind that we can accomplish the same results using the while loop as these examples did using the for loop. The break and continue keywords can be used similarly in either loop structure.
I hope this exercise went smoothly for you. Now we can move onto Page 9.