Repetition

JavaScript topics covered:
  1. for Loop

    If you want a set of code be executed several times, while a condition is true, then you want to use a Loop. You can use a for loop to execute a block of statements as long as the test condition is true. So, if we wanted to display the numbers 0 to 10 to the screen we could:

    First initialize the count to 0, this is where we want to start. For the test condition we want to continue displaying the count while it is less than or equal to 10. After each number is written to the screen we want to increment the count.

    var count;
    for (count = 0; count<=10; count++){
    	document.writeln(count);
    }
    

    When incrementing the loop counter, you can increase the count by any number. The example below doubles the loop counter after each test condition, and when the count is equal to 8, it displays a bold 8.

    var count;
    for (count = 1; count<20; count*=2){
    	document.writeln(count);
    	if (count == 8){
    		document.writeln("<b>"+count+"</b>");
    	}
    	
    }
    
    Click here to see the demo
  2. for...in loop:

    This loop is used primarily with arrays and objects. Objects will be discussed later. This loop will display all the items in an array beginning with index of 0.

    var thePizza= new Array("pepperoni","black olives","onions","green pepper","mushrooms");
    var toppings;
    for (toppings in thePizza){
    	document.write("<br>" + toppings + ": " + thePizza[toppings])
    }
    

    which is the same as the for loop:

    var thePizza= new Array("pepperoni","black olives","onions","green pepper","mushrooms");
    var toppings;
    for (toppings=0; toppings<thePizza.length; toppings++){
    	document.write("<br>" + toppings + ": " + thePizza[toppings])
    }
    
    Click here to see the demo
  3. while loop:

    the while loop is like the for loop, it will continue executing a set of code until the condition is false. However with he while loop you have to increment your own counter.

    var count=1;
    while (count <=5){
    	document.writeln(count);
    	count++;
    }
    
    Click here to see the demo
    ** note if you forget to increment the counter, you could be caught in an infinate loop! **

  4. do...while loop

    The do...while loop is similar to the while loop, it will continue to execute a set of code until the condition is false and you must increment the counter. However, the do while loop will always execute at least one time!
    Notice the example below. The count starts off at 6. 6 is greater than 5, so the test condition is false. However this code will exectute one time because the condition is tested at the end of the loop.

    var count=6;
    document.writeln("using a do while loop");
    do {
    	document.writeln(count);
    	count++;
    
    }while(count <=5)
    
    ** note the do...while loop executes at least one time. **
  5. Click here to see the demo
  6. break and continue.

    Sometimes you want a loop to stop when a condition is true. To do this you can use a break statement. You can also have the code keep running when you use a continue statement.

    Click here to see the demo