One major component of JavaScript that we have not yet covered is the JavaScript loops. There are two primary types of loops, the for loop and the while loop(lesson 11). They are the most common loops you will use. Other loops such as Break Loops and For…In statements will be covered in the next tutorial, the Intermediate JavaScript Tutorial by Ian Lin.

The While Loop:

In JavaScript, a While Loop is used when you want to execute a block of code as long as(while) a certain condition is met..

Syntax:

while (var condition end_value) {

Code to be executed

}

The var can be any variable. The condition can be any comparing statement and the end value can be any positive or negative value.

Example code:

var i = 0;

while (i<=10) {

document.write(i);

document.write('<br>');

i = i+1;

}

Code explained: In the first line we declare the variable i and set it to 0. Then in the second line we are saying that while i is less then or equal to 10 execute the following code… Then in the third and fourth lines we are writing to the document, the value of i and then a line break. In line five, we are saying i equals i plus one, so we are adding one to the variable i. Finally in the last line we are closing the while statement with our end curly bracket. So the code makes the variable i equal to 0 then says as long as it is less than or equal to ten, write the value of the variable i and then add one to the value of the variable i, so the next time the loop runs the variable will equal 1. Then the next time the loop runs the variable will be 2 and so on until it reaches 11 and stops because the value of i is no longer less than or equal to 10.

Challenge: can you think of another way to write the code so that it will have the exact same output but with less characters?

Challenge answers:There are actually three different ways you could shorten the code. The first way only shortens it by one character, but shorter is always better as I always explain to my clients who I do web design for. The first possible solution to make it shorter is in the while statement. You could say: while (i < 11) instead of while (i <= 10). It will not effect the outcome and you have shortened the code by one character.

Another way to make the code shorter is the one I am hoping some of you figured out. You could concatenate the document write statement so it would read:

document.write(i + “<br>“); Remember, we learned how to concatenate text in lesson 2. This is slightly different because we are concatenating a variable that contains a numeric value to a HTML tag. Notice the variable in this example does not have quotes around it and the HTML tag does. HTML tags are treated the same as text. If you were to put quotes around the variable, the output would be ten lines with the letter i in them.

The third and final way you could shorten the code is you could replace the expression i = i + 1; with i++; because the ++ means to increase by 1, but we have not covered that yet so if you got that one, you are ahead of the class!

The Do While Loop:

A do while loop is essentially the same as a while loop, except that the code will get executed once even if the condition is not met because the do statement is made before the while statement.

Example:

var i = 0;

do {

document.write(i + '<br>');

i++;

}

while (i<11);

The above code example will have the same output as our previous example, but it would have printed the value of i once even if it was not less than 11. The first example would not have printed anything if i was not less than ll.

*Note: You may have noticed we have introduced the challenge to this lesson. Challenges will be a regular part of the intermediate JavaScript Tutorial by Ian Lin, so be sure to live up to the challenge and read my next tutorial!

Next, move on to learn the for loop in lesson 11:

• Printer Friendly
• Email to a friend
• Add to my Favourites
• Download PDF version
• Report Bad Submissions
• Submit Feedback