Loops can execute code all the time, as long as the specified condition is true.
While loop
The while loop executes a code block when the specified condition is true.
Grammar
while (condition)
{
Code that needs to be executed
}
Instance
The loop in this example will continue to run as long as the variable i is less than 5:
while (I<5)
{
X=x + "The number is" + i + "<br>";
i++;
}
Tip: If you forget to increase the value of the variable used in the condition, the loop never ends. This may cause the browser to crash.
Do/while Cycle
The Do/while loop is a variant of the while loop. The loop executes a block of code once, before checking whether the condition is true, and then repeating the loop if the condition is true.
Grammar
Do
{
Code that needs to be executed
}
while (condition);
Instance
The following example uses the Do/while loop. The loop executes at least once, even if the condition is false, and the hidden code block executes before the condition is tested:
Do
{
X=x + "The number is" + i + "<br>";
i++;
}
while (I<5);
Don't forget to increase the value of the variable used in the condition, otherwise the loop will never end!
Compare for And while
If you have read the previous chapter about the for loop, you will find that the while loop is much like the for loop.
For statement instance
The loop in this example uses a for loop to display all the values in the cars array:
cars=["BMW", "Volvo", "Saab", "Ford";
var i=0;
for (; Cars[i];)
{
document.write (Cars[i] + "<br>");
i++;
}
While statement instance
The loop in this example uses a while loop to display all the values in the cars array:
cars=["BMW", "Volvo", "Saab", "Ford";
var i=0;
while (Cars[i])
{
document.write (Cars[i] + "<br>");
i++;
}
<! DOCTYPE html>
<body>
<meta http-equiv= "Content-type" content= "text/html charset=utf-8"/>
<p> Click on the button below, as long as I is less than 5 loop code block. </p>
<button onclick= "myFunction ()" > click here </button>
<p id= "Demo" ></p>
<script>
function MyFunction ()
{
var x= "", i=0;
while (I<5)
{
X=x+ "The number is" + i + "<br>";//outputs the results of each execution
document.write (x);
document.getElementById ("Demo"). Innerhtml=x;
i++;
}
document.getElementById ("Demo"). Innerhtml=x;
}
</script>
</body>
Javascript--while
