JS Basic
JS HOME
JS Introduction
JS How To
JS Where To
JS Variables
JS Operators
JS Functions
JS Conditional
JS Looping
JS Guidelines

JS Advanced
JS String Object
JS Array Object
JS Date Object
JS Math Object
JS Window
JS Form
JS Browser

Examples/Quiz
JS Examples
JS Quiz Test

References
JS Objects

Resources
JS Books

JavaScript Looping

Looping

Very often when you write code, you want the same block of code to run a number of times. You can use looping statements in your code to do this.

In JavaScript we have the following looping statements:

  • while - loops through a block of code while a condition is true
  • do...while - loops through a block of code once, and then repeats the loop while a condition is true
  • for - run statements a specified number of times

while

The while statement will execute a block of code while a condition is true.. 

while (condition)
{
    code to be executed
}


do...while

The do...while statement will execute a block of code once, and then it will repeat the loop while a condition is true

do
{
    code to be executed
}
while (condition)


for

The for statement will execute a block of code a specified number of times

for (initialization; condition; increment)
{
    code to be executed
}

Examples

For loop
How to write a For loop. Use a For loop to run the same block of code a specified number of times

<html>
<body>
<script type="text/javascript">
for (i=0; i<=5; i++)
{
document.write("<b>The number is " + i + "</b>")
document.write("<br>")
}
</script>
<p>Explanation:
<p>The for loop sets <b>i</b> equal to 0.
<p>As long as <b>i</b> is less than or equal to 5, the loop will continue to run.
<p><b>i</b> will increase by 1 each time the loop runs.
</body>
</html>

Looping through HTML headers
How to use the For loop to write the HTML headers.

<html>
<body>
<script type="text/javascript">
for (i=0; i<=6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>
<p>Explanation:
<p>The for loop sets <b>i</b> equal to 0.
<p>As long as <b>i</b> is less than or equal to 5, the loop will continue to run.
<p><b>i</b> will increase by 1 each time the loop runs.
</body>
</html>

While loop
How to write a While loop. Use a While loop to run the same block of code while or until a condition is true

<html>
<body>
<script type="text/javascript">
i=0 while (i<=5)
{
document.write("<b>The number is " + i + "</b>")
document.write("<br>")
i++
}
</script>
<p>Explanation:
<p>The for loop sets <b>i</b> equal to 0.
<p>As long as <b>i</b> is less than or equal to 5, the loop will continue to run.
<p><b>i</b> will increase by 1 each time the loop runs.
</body>
</html>

Do while loop
How to write a Do While loop. Use a Do While loop to run the same block of code while or until a condition is true. This loop will always be executed once, even if the condition is false, because the statements are executed before the condition is tested

<html>
<body>
<script type="text/javascript">
i=0
do
{
document.write("<b>The number is " + i + "</b>")
document.write("<br>")
i++
}
while (i<=5)
</script>
<p>Explanation:
<p>The for loop sets <b>i</b> equal to 0.
<p>As long as <b>i</b> is less than or equal to 5, the loop will continue to run.
<p><b>i</b> will increase by 1 each time the loop runs.
</body>
</html>