For LoopThe previous example showed a simple way to write a program to count. That example just added 1 to a variable (named x) again and again. Is there a better way?
It turns out that almost all computer languages have the ability to "
loop". A programming "loop" executes the same instructions again and again. There are a number of different kinds of loops, but the most appropriate in this case is the "
for loop" as demonstrated here:
<!DOCTYPE html>
<html>
<body>
<script>
for (x=0; x<=7; x=x+1) {
document.write ( "x = " + x + "<br/>" );
}
</script>
</body>
</html>
The "
for loop" takes three expressions inside the parentheses. The first expression happens just once when the loop first starts. In this case, the first expression ("
x=0") sets the variable "
x" to 0. The second expression is the test. The loop continues as long as that second expression is true. In this case, the second expression is "
x<=7". So the loop will continue as long as the variable "
x" is less than or equal to 7. The third expression is executed each time the loop completes. In this case, the expression is "
x=x+1". Since "
x" starts out at 0, it will be changed to 1 at the end of the first time through the loop. It will be changed to 2 at the end of the second time through the loop, and so on. Eventually, the value of
x will be changed from 7 to 8. At that time,
x will no longer be less than or equal to 7, and the loop will complete.
The "
for loop" will execute all of the statements between the opening and closing curly braces ("
{" and "
}"). In this case, we only have one statement between the curly braces:
document.write ( "x = " + x + "<br/>" );
So that one statement will be executed each time through the loop. Since "
x" is changing each time through the loop, a different value will be written to the document each time.
Let's go though that more carefully.
When the computer reaches the "
for loop" it will initially set the variable "
x" to zero. Then it will ask whether "
x" (now zero) is less than 7. Since 0 is less than 7, the computer will execute the "
document.write" instruction. That instruction writes out the string "
x = ". It also writes out the current value of the variable "
x" (which is 0). It also writes out the string "
<br/>" which is the HTML code for a line break (move to the next line). Then it adds 1 to
x ("
x=x+1"). So now the variable "
x" will be 1. The computer will again ask if "
x" (now 1) is less than or equal to 7. Since 1 is less than 7, the computer will again execute the "
document.write" instruction and print out the new value of "
x" as "x = 1" followed by a line break. It will again add 1 to
x ("
x=x+1"), so "
x" will be 2. It will again check whether 2 is less than or equal to 7, and it will again write the message with the current value of "
x" ("x = 2"). This process continues again and again writing "x = 3", "x = 4", "x = 5", and "x = 6". Eventually,
x will become 7. At that point, it will again be written to the document ("x = 7"). Then it will again add 1 to
x and
x will be 8. It will again check whether 8 is less than or equal to 7. This time it will find that 8 is NOT less than or equal to 7, and the loop will be finally be finished. The program will have written the following to the document:
x = 0<br/>
x = 1<br/>
x = 2<br/>
x = 3<br/>
x = 4<br/>
x = 5<br/>
x = 6<br/>
x = 7<br/>
The "<br/>" portions will be shown as line breaks, and the final output will look like this:
x = 0
x = 1
x = 2
x = 3
x = 4
x = 5
x = 6
x = 7
Now that seems like a lot of work to count to 7. But by changing the for loop from "for (x = 0; x<=
7; x=x+1)" to "for (x = 0; x<=
7000; x=x+1)" the same program will count to 7,000. But even more importantly, the loop can do a lot more than just count. For example, just modifying the write statement will give us the values and the squares of the values:
<!DOCTYPE html>
<html>
<body>
<script>
for (x = 0; x<=7; x=x+1) {
document.write ( "x = " + x + ", x^2 = " + x*x + "<br/>" );
}
</script>
</body>
</html>
That "
document.write" statement is a bit complicated so let's break it down. Here's the full statement:
document.write ( "x = " + x + ", x^2 = " + x*x + "<br/>" );
Here are each of the parts in that statement that are added together:
"x = " <-- This is a string
x <-- This is a number
", x^2 = " <-- This is a string
x*x <-- This is a number
"<br/>" <-- This is a string
In Javascript (and many other languages), adding two strings just concatenates them. Also, when a number is added to a string, the number is converted to a string first and then concatenated as if it were originally a string. If we take "x=5" as an example, we start with the first string "x = " and add the value of x which becomes the string "5", so the concatenated string is:
Then we concatenate the string ", x^2 = " to get:
Then we concatenate "x*x". In Javascript (and many other languages), the asterisk ("*") is used for multiplication. So "x*x" is the same as 5x5 which is 25. When we concatenate that with the previous string we get:
Finally, we concatenate the last string ("<br/>") for the HTML line break. That gives us:
The final output (after computing all values from 0 to 7) will be:
x = 0, x^2 = 0
x = 1, x^2 = 1
x = 2, x^2 = 4
x = 3, x^2 = 9
x = 4, x^2 = 16
x = 5, x^2 = 25
x = 6, x^2 = 36
x = 7, x^2 = 49
The "for loop" is extremely powerful, and it is one of the major workhorses in almost all procedural languages. It can count by 1. It can count by 2 or 3 or any value. It can loop through a sequence of items (like strings or images or pixels in images). It can be nested (one loop inside another) to process multi-dimensional tables or other complex data structures.
Exercise 4 (Run each of the JavaScript Programs): Copy each of the programs in this post and run them. You can copy each program and save it in a text file to open with your browser or paste each program into the w3schools web interface to run it. Exercise 5 (Modify one of the programs to print cubes up to 1000): Copy one of the programs in this post and change it to print out cubes (x*x*x) rather than squares (x*x). Run it for values of x from 0 to 20. You can edit a text file to open with your browser or enter the program into the w3schools web interface to run it.
Home
