Loops execute a block of code a specified number of times, or
while a specified condition is true.
In JavaScript, there are two different kind of loops:
- 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
The for Loop
The for loop is used when you know in advance how many times the script should run.syntax
for (variable=startvalue;variable<=endvalue;variable=variable+increment)
{
code to be executed
}
{
code to be executed
}
Note: The increment parameter could also be negative, and the <= could be any comparing statement.
Example
<html>
<body>
<script
type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
document.write("The number is
" + i);
document.write("<br
/>");
}
</script>
<p>Explanation:</p>
<p>This for loop starts with
i=0.</p>
<p>As long as <b>i</b>
is less than, or equal to 10, the loop will continue to run.</p>
<p><b>i</b> will
increase by 1 each time the loop runs.</p>
</body>
</html>
The while Loop
Loops execute a block of code a specified number of times, or
while a specified condition is true.
Syntax
while (variable<=endvalue)
{
code to be executed
}
Note: The <= could be any comparing operator.{
code to be executed
}
Example
The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 5. i will increase by 1 each time the loop runs:
<html>
<body>
<script
type="text/javascript">
i=0;
while (i<=5)
{
document.write("The number is
" + i);
document.write("<br
/>");
i++;
}
</script>
<p>Explanation:</p>
<p><b>i</b> is
equal to 0.</p>
<p>While
<b>i</b> is less than , or equal to, 5, the loop will continue to
run.</p>
<p><b>i</b> will
increase by 1 each time the loop runs.</p>
</body>
</html>
The do...while Loop
The do...while loop is a variant of the while loop. This loop will execute the block of code ONCE, and then it will repeat the loop as long as the specified condition is true.Syntax
do
{
code to be executed
}
while (variable<=endvalue);
{
code to be executed
}
while (variable<=endvalue);
Example
The example below uses a do...while loop. The do...while loop will always be executed at least 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("The number is
" + i);
document.write("<br
/>");
i++;
}
while (i <= 10);
</script>
<p>Explanation:</p>
<p><b>i</b> equal to 0.</p>
<p>The loop will
run</p>
<p><b>i</b> will
increase by 1 each time the loop runs.</p>
<p>While
<b>i</b> is less than , or equal to, 5, the loop will continue to
run.</p>
</body>
</html>
The break Statement
The break statement will break the loop and continue executing the code that follows after the loop (if any).Example
<html>
<body>
<script
type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==10)
{
break;
}
document.write("The number is
" + i);
document.write("<br
/>");
}
</script>
<p>Explanation: The loop
will break when i=10.</p>
</body>
</html>
The continue Statement
The continue statement will break the current loop and continue with the next value.Example
<html>
<body>
<script
type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is
" + i);
document.write("<br
/>");
}
</script>
<p>Explanation: The loop
will break the current loop and continue with the next value when
i=3.</p>
</body>
</html>
JavaScript For...In Statement
The for...in statement loops through the properties of an object.condition
for (variable in object)
{
code to be executed
}
Note: The code in the body of the for...in loop is executed once for
each property.{
code to be executed
}
syntax
Looping through the properties of an object:
var
person={fname:"Jonna",lname:"Doe",age:27};
for (x in person)
{
document.write(person[x] + " ");
}
for (x in person)
{
document.write(person[x] + " ");
}
Example
<html>
<body>
<script
type="text/javascript">
var
person={fname:"Jonna",lname:"Doe",age:27};
for (x in person)
{
document.write(person[x] + "
");
}
</script>
</body>
</html>
No comments:
Post a Comment