while loop in java script

Use the same HTML document from the previous example, but delete all the JavaScript between the <script> ... </script> tags. Now, type in the following JavaScript code:

 
   <script type="text/javascript">
 
   //Grab the html div by its id attribute
 
   //and store it in a var named container
 
   var container = document.getElementById("wrapper");
 
   //create the var containing the counter
 
   //and give it an initial value of 0
 
   var numImages = 0;
 
   //start the loop: while the number of images is less than or
 
   //equal to 10 (loop starts at 0 not 1, so type 9 not 10),
 
   //keep cycling and increase the counter by 1
 
   while (numImages <= 9)
 
   {
 
   //this is the block of code to be executed:
 
   //build the string to insert in the HTML document
 
   //and store it in the newImage var
 
   //Take note:make sure the img src corresponds to a real image file
 
   var newImage = '<img src="loop.gif" alt="#" />' + numImages;
  
   //use the container var that stores the div element
 
   //and use innerHTML to insert the string stored in the newImage var
 
   //Use shortcut assignment += so previous values do not get wiped off
 
   container.innerHTML += newImage;
 
   //increase the counter by 1 using the increment operator
 
   numImages ++;
 
   }
 
   </script>

Make sure the image file is in place, save your work and run the page in the browser. You should see something similar to the example page indicated in the link above.

Run a while loop with a false condition

Now make just a small change to the code above: replace var numImages = 0; with var numImages = 12;. Now the initial condition is false from the start: the counter is a number greater than 10.

Save your work, run the page and see what happens. If all works fine, nothing at all should happen: the loop doesn't even get started.

Try out: add images to the page with a do ... while loop

Use the same HTML document as the previous example. Also, the JavaScript code is very similar to the previous example: simply move the while (condition) outside the action block and type do in its place, like the example below:

 
   <script type="text/javascript">
 
   var container = document.getElementById("wrapper");
 
   var numImages = 0;
 
   do
 
   {
 
   //this block gets executed first:
 
   var newImage = '<img src="loop.gif" alt="#" />' + newImage;
 
   container.innerHTML += newImage;
 
   numImages ++;
 
   }
 
   //here's the condition to evaluate:
 
   //the first cycle has already executed.
 
   while (numImages <= 9);
 
   </script>
 
   

Save your work and run the page in the browser. You should see something similar to the example page indicated in the link above.

Run a do ... while loop with a false condition

Make just a small change to the code above: once again, replace var numImages = 0; with var numImages = 12;. Now the initial condition is false from the start: the counter is a number greater than 10.

Save your work, run the page and see what happens. Unlike what happened with the while loop, now you should see one image displayed on the web page: 

the loop has completed the first cycle and only afterwards the test condition is evaluated. In this instance the condition is false and the loop stops after the first iteration completes.