Layout Options

  • Fixed Header
    Makes the header top fixed, always visible!
  • Fixed Sidebar
    Makes the sidebar left fixed, always visible!
Looping

Looping Statements

Looping statements are used to execute a block of code a specified number of times, or while a specified condition is true.

JavaScript supports the following looping statements:

  • for - loops through a block of code a specified number of times
  • while - loops through a block of code while a specified condition is true
  • do...while - executes the block of code once, and repeats the loop while the condition is true
  • for...in - loops through the elements of an array or through the properties of an object

for statement

Use the for loop when it is known in advance how many times the block of code should run.

The for statement has the following syntax:

for (var=startvalue;
     var<=endvalue;
     var=var+increment)
{
  code to be executed;
}

The following example shows the basic use of the for statement.

<html>
<body>
<script>
var i=0;
for (i=0;i<=5;i++)
{
  document.write("i = " + i);
  document.write("<br />");
}
</script>
</body>
</html>

This produces the following result:

while statement

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

The while statement has the following syntax:

while (condition)
{
  code to be executed;
}

The following example shows the basic use of the while statement.

<html>
<body>
<script>
var i=0;
while (i<=5)
{
  document.write("i = " + i);
  document.write("<br />");
  i++;
}
</script>
</body>
</html>

This produces the following result:

do...while statement

The do...while statement is used to execute the block of code once, and repeat the loop while the condition is true.

It is important to note that the block of code will always be executed at least once.

The do...while statement has the following syntax:

do
{
  code to be executed;
  }
while (condition);

The following example shows the basic use of the do...while statement.

<html>
<body>
<script>
var i=0;
do
{
  document.write("i = " + i);
  document.write("<br />");
  i++;
}
while (i<=5);
</script>
</body>
</html>

This produces the following result:

for...in statement

The for...in statement is used to loop through the elements of an array or through the properties of an object. The loop is executed once for each element/property.

The for...in statement has the following syntax:

for (variable in object)
{
  code to be executed
}

The variable argument can be a named variable, an array element, or a property of an object.

The following example shows the basic use of the for...in statement.

<html>
<body>
<script>
var i;
var mycolors = new Array();
mycolors[0] = "Red";
mycolors[1] = "Blue";
mycolors[2] = "Green";
for (i in mycolors)
{
  document.write(mycolors[i]);
  document.write("<br />");
}
</script>
</body>
</html>

This produces the following result:

break and continue Statements

The break and continue statements can be used to manage flow control inside loops.

break statement

The break statement will break the loop and continue executing the code that follows after the loop (if any).

The following example shows the basic use of the break statement.

<html>
<body>
<script>
var i=0;
for (i=0;i<=5;i++)
{
  if (i == 3)
  {
    break;
  }
  document.write("i = " + i);
  document.write("<br />");
}
</script>
</body>
</html>

This produces the following result:


In the example above, when the loop counter, i, is equal to three, the break statement causes the loop to exit. No additional statements within the loop block are executed.

continue statement

The continue statement will break the current loop and continue with the next value.

The following example shows the basic use of the continue statement.

<html>
<body>
<script>
var i=0;
for (i=0;i<=5;i++)
{
  if (i == 3)
  {
    continue;
  }
  document.write("i = " + i);
  document.write("<br />");
}
</script>
</body>
</html>

This produces the following result:


In the example above, when the loop counter, i, is equal to three, the continue statement skips the remaining statements within the loop block. Execution returns to the top of the loop with the next value.

logo