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.