Nesting loops

Loops can be nested; meaning one or more loops can be placed inside of another loop. A nesting loop becomes useful, for example, when you want to create a tabular output. The following JavaScript code
<script language="javascript"> var sout; sout = "<table border='1' width='300' cellspacing='0' cellpadding='3'>" for (i = 1; i <= 10; i++) { sout = sout + "<tr>"; for (j = 1; j <= 10; j++) { sout = sout + "<td>" + i * j + "</td>"; } sout = sout + "</tr>"; } sout = sout + "</table>"; document.write (sout); </script>

prints a multiplication table as: 1 2 3 4 5 6 7 8 9 2 4 6 8 3 6 9 4 8 5 6 7 8 9 10

10 12 14 16 18 20

12 15 18 21 24 27 30

12 16 20 24 28 32 36 40

10 15 20 25 30 35 40 45 50 12 18 24 30 36 42 48 54 60 14 21 28 35 42 49 56 63 70 16 24 32 40 48 56 64 72 80 18 27 36 45 54 63 72 81 90

10 20 30 40 50 60 70 80 90 100 How did we produce such a table? Well, our code uses two for loops to produce that table. Before we say more about the loops, let's start reviewing from the beginning of the code. If line 3, sout = "<table border='1' width='300' cellspacing='0' cellpadding='3'>", looks strange to you, let's explain what it does. With this line, all we are saying is that we want to create a HTML table. Note how the value for each of the table properties (such as border, width, cellspacing, and cellpadding) is enclosed by single quotation marks. (Recall that a table tag creates a table in HTML.) We could have used a document.write statement instead of using a variable to hold our output message. It is actually more efficient to use a variable for output instead of repeatedly calling the

document.write() method. So, in this example, each time we want to print something to the web page, we simply assign the output to the variable sout. Note the use of the "+" operator to add a string to the previous value of the sout variable. Line 4 has our first for loop; we could refer to this loop as an outer loop. It is an outer loop, as the name implies, because it inside contains a loop. The loop inside an outer loop is called an inner loop, see line 6. Let's now describe what is happening inside the loops, lines 4 through 8. Basically, the outer for loop starts to execute first and it will execute 10 times creating total of 10 rows. However, for each time the outer loop is executed, the inner loop will execute 10 times creating 10 columns or cells in each row. Thus the first time the outer loop executes, sout = sout + "<tr>"; will create our first row; the first time the inner loop executes, we create our first table cell with 1 * 1 = 1. The second time the inner loop executes, the second cell is created with the value 2; then the third cell is created with the value of 3, and so on. When inner loop stops executing when j reaches 10, the first row is filled with 10 cells. Finally, sout = sout + "</tr>"; ends our first row. Similarly, remaining rows and cells are created. We can also use a while loop to create nested loops. See the following code that produces the same output as you saw with the nested for loop:
<script language="javascript"> var sout, i, j; sout = "<table border='1' width='300' cellspacing='0' cellpadding='3'>"; i = j = 1; while (i <= 10) { sout = sout + "<tr>"; while (j <= 10) { sout = sout + "<td>" + i * j + "</td>"; j++; } sout = sout + "</tr>"; j = 1; i++; } sout = sout + "</table>"; document.write (sout); </script>

On line 4, i = j = 1;, we assign the value 1 to i and j. In this statement, 1 is first assigned to j and then the value of j, 1, is assigned to i. On line 5, our outer loop starts here. Line 6 is responsible for creating one row at a time, each time the outer while loop executes. The inner loop creates 10 cells each time the outer loop executes. The following shows the output: 1 2 3 4 2 4 6 8 3 6 9 4 8 5 6 7 8 9 10

10 12 14 16 18 20

12 15 18 21 24 27 30

12 16 20 24 28 32 36 40

5 6 7 8 9

10 15 20 25 30 35 40 45 50 12 18 24 30 36 42 48 54 60 14 21 28 35 42 49 56 63 70 16 24 32 40 48 56 64 72 80 18 27 36 45 54 63 72 81 90

10 20 30 40 50 60 70 80 90 100