Bright Java Tutorial

is brought to you by DoITBright LLC

Javascript

For Loop, While Loop and Do While Loop

In case we need to execute one or more line of code multiple times and up to a certain desired number of times, just like any programming language, Javascript also has ways to perform loops. You can either use a for loop, or a while loop, or a do while loop. Let us examine the code below.

  <html>
    <head>
      <title>If, Else If and Else In Javascript.</title>
    </head>
    <body>
       <script type="text/javascript">
        for(var counter=0;counter<3;counter++) {
          document.write("loop counter = " + counter + "<br/>");
          document.write("another print<br/>");
        }
       </script>
    </body>
  </html>
                           

The above code made use of the for loop. The first part of the for loop is the declaration and initialization of a variable named as counter and set the value to 0. Then, the test condition is evaluated. Is the variable counter less than 3? In this case, counter is equal to zero, thus the condition is satisfied. All the code in between the curly braces of the for loop will get executed. Then, counter will be increased by 1 as indicated by the code counter++. Then, the test condition is evaluated once again. This time, counter will be equal to 1. Condition is still satisfied. Loop gets executed once again. Counter is incremented by 1 once again. Counter is now equal to 2. The test condition is once again evaluated and satisfied. The loop gets executed. Counter is incremented by 1. Test condition is once again evaluated. This time, counter is equal to 3. Test condition is no longer satisfied. Loop no longer executes. Let us look at the example below.

  <html>
    <head>
      <title>If, Else If and Else In Javascript.</title>
    </head>
    <body>
       <script type="text/javascript">
        var counter = 0;
        while(counter < 3) {
          document.write("loop counter = " + counter + "<br/>");
          document.write("another print<br/>");
          counter = counter + 1;
        }
       </script>
    </body>
  </html>
                           

The above code accomplishes the same thing as what we have in our first example. This time, it made use of the while loop. In my personal opinion, while loops are easier to read as compared to the for loop. Lets try it then. The first thing we have is a variable declaration. counter is equal to 0. Then, we have the while loop test condition. Is counter < 3? The condition is satisfied since counter is equal to 0. Loop gets executed. It contains 2 print statements and a line of code to increment the value of counter by 1. Loop test condition gets evaluated and gets satisfied since counter is still less than 3. The print statements get executed and counter is increased by 1. It now has a value of 2. Loop test condition gets evaluated and gets satisfied. The print statements get executed and counter is increased by 1. It now has a value of 3. Loop test condition is no longer satisfied. Loop is terminated. Let us now look at how we do it using do while loop as our last example.

  <html>
    <head>
      <title>If, Else If and Else In Javascript.</title>
    </head>
    <body>
       <script type="text/javascript">
        var counter = 0;
        do {
          document.write("loop counter = " + counter + "<br/>");
          document.write("another print<br/>");
          counter = counter + 1;
        } while(counter < 3);
       </script>
    </body>
  </html>
                           

In a do while loop, the code inside the loop always gets executed at least once. The reason for this is, the test condition of the loop happens at the end. Let us try reading the above code. First, we declared and initialized the variable counter and set it to 0. Then, we instructed to execute the loop which contains 2 print statements and a line of code to increment the value of counter by 1. Then, the loop test condition gets evaluated. Is counter less than 3? In this case, counter is equal to 1 and is less than 3. Test is satisfied and loop gets executed once more. Is counter which is equal to 2 less than 3? Loop gets executed once again. Is counter which is equal to 3 less than 3? Loop is terminated.


Back    Next