o   The letters i, j and k are traditionally used by programmers to name variables that are used as counters. For example, at different stages of the program, i may contain the numbers 1, 2, 3 etc.

o   In order to achieve a “counting” effect, you will need to increment or decrement the value of your counting variable by a set value. Here are some examples:

i = i + 1; 

i = i – 1; 

i = i + 35; 

incr = 10 i = i + incr;

o To keep things concise, we can use the following shortcuts:

i++;  // equivalent to i = i + 1;

i–; // equivalent to i = i + 1;

o   Counting in JavaScript, like many other programming languages, often begins at zero. 

In many cases, this makes a lot of sense, as we will see. However, it can often cause confusion. Consider starting at 0 and counting up to 10. In that case, we may have actually counted 11 items:

 0                               (1)

1                               (2)

2                               (3)

3                               (4)

4                               (5)

5                               (6)

6                               (7)

7                               (8)

8                               (9)

10               (11!)

o   If you wanted to give an instruction to someone to perform a repetitive action, you might say that you wanted them to continue the action for a certain number of times. If someone were performing an action 300 times, for example, they might do something like the following to ensure that their count was accurate:

o   Write the number 1 on a bit of paper.

o   After each action, erase the number on the bit of paper and increment it by 1.

o   Before each action, check the number on the bit of paper. If it is less than or equal to 300, perform the action.

o   Alternatively, they might decide to start counting at 0. In this case, the procedure would be identical, but the check before each action would be to make sure that the number was strictly less than 300.

o   In JavaScript, we say almost the same thing. The following code will display the numbers 1 to 100 on the page:

 for( i = 1; i <= 100; i++ )

  {

  document.write(“<p>” + i “ </p>”);

  }

   The for statement tells the browser that we are about to perform a loop. The layout here is very similar to a conditional statement, but in this case we have much more information in the brackets. Where our conditional had one JavaScript statement to describe its action, a for loop has three:

o  An initialiser – this sets up the initial counting condition, in this case i = 1.

o     A conditional – this is identical to our conditional statements earlier, and must return true or false. If it returns true, the loop continues, otherwise it exits.

o     An incrementer – this defines the action to be performed at the end of each loop. In this case, i is incremented by a value of 1.

o      The key difference between a conditional and a for loop is that the condition is constantly being changed and re-evaluated. It is possible to create an infinite loop by making the conditional non-reliant on the count value – for example:

for(i=0; 5 > 4; i++ )

 will always perform the script in the braces, and will probably cause errors in the browser.

o     Note too that it is very common to start counting at zero in JavaScript. The reason for this is that it is often desirable to count how many times an operation has been performed.

Consider the following: 

for(i=1; 1 < 2; i++ )

o   In this case, the loop will run once, but the value of i will be 2, as after the first run, i will be incremented to 2, and will then fail the test and so the loop will exit. If we use the following: 

 for(i=0; 1 < 1; i++ )

 Then the loop will run once, and the value of i afterwards will be 1, as we might hope.

Project 

o   Open your previous project file, and save it under the name chapter_14.html. o Clear all JavaScript code from your script tags.

Write a series of statements to produce a multiplication table as follows:

o   The following exercise is more of an HTML example, but demonstrates an important facet of using JavaScript (or, indeed, any programming language) to produce well-formatted text.

o   Modify your previous code to make your page’s content appear in the centre of the page. Put your multiplication table in an HTML table to make sure that the equals signs, multiplication signs and so forth line up in neat columns:

o   The following exercise is more of an HTML example, but demonstrates an important facet of using JavaScript (or, indeed, any programming language) to produce well-formatted text.

o   Modify your previous code to make your page’s content appear in the centre of the page. Put your multiplication table in an HTML table to make sure that the equals signs, multiplication signs and so forth line up in neat columns:

o   The following exercise is more of an HTML example, but demonstrates an important facet of using JavaScript (or, indeed, any programming language) to produce well-formatted text.

o   Modify your previous code to make your page’s content appear in the centre of the page. Put your multiplication table in an HTML table to make sure that the equals signs, multiplication signs and so forth line up in neat columns: