Javascript Tutorial #4

This particular tutorial may need a little more concentration as we are to embark on the tortuous subject of loops. It took me many months to get my head around loops and mulitiple loops still give me a headache. Take a look at this.

FOR Loops

var i;

for (i = 1; i <= 5; i++)
{
	alert ("Variable i is now set to " + i);
}

Remember to add this to your template file (see previous tutorials) before attempting to run it. The variable i is an index which is added to each time the loop goes round. Here's how it works. i is set to be the value 1 and an alert box is displayed showing that. There is no next keyword as in basic but the loop is marked in a block marked by the two curly brackets. Note also that there is no semi-colon at the end of the for line. The closing } bracket tells the computer to go back to where the for is and add 1 to the value then go through the loop again except that it displays the number 2 in the alert box and so on until the value of 5 is reached and the loop ends which in this case means the end of the program.

The loop can be any set to run using any valid numbers although the bigger the second value, the longer the loop will run which may temporarily hang the browser. It could even be set to run from 5 to 1 using the form

for (i = 5; i >= 1; i--)

so that in this case only every other value is used. Take a while to digest this if you are new to programming. When you are sure you know what's happening with for loops then move on the the next one.

While Loops

var i = 0;

while (i < 5)
{
	i++;	
	alert ("Variable i is now set to " + i);
}

The While LOOP differs in that some of the work involved must be done by the programmer, particularly when it comes to incrementing the index variable. It also iterates once which is why it uses < 5 rather than <= 5. Generally, this kind of loop would not be used for this kind of application as a FOR loop would obviously be better but I've used it so that you can compare the two pieces of code which give precisely the same results. So the variable i is set to 1. The loop starts and we add 1 to the index value (increment it). This means that it is actually now set to 2 thus the alert box displays the value as being 2. Where you put the incrementing code (i++ means i = i + 1) is important. Remember, the computer will not do it for you as in the above example. The message box is displayed then the value of i is tetsed to see if it has reached 5. The loop will continue until this condition is met. The computer goes back to the while and goes through the code again, adding 1 (could be more if required), displays the value of i and tests in case it has reached 5. Eventually it will and the loop will end. Be aware that if a mistake is made and the loop never ends then the program will lock up the PC and you will need to shut it down from Task Manager. Don't be afraid to experiment and make mistakes - you'll learn much more from your mistakes than from your successes.

I think that's probably enough brain bending code for this session.

Back