JavaScript Looping Statements

Web App Programming (CpET12L)
JavaScript
Looping
Statements

JAVASCRIPT LOOPING STATEMENTS …..
Looping is a feature that facilitates the execution of a
set of instructions/functions repeatedly while some
condition evaluates to true. 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.
Loops are used in JavaScript to perform repeated tasks based
on a condition. Conditions typically return true or false when
analysed. A loop will continue running until the defined
condition returns false.

In JavaScript, we have the following
looping statements:
• for loop - run statements a specified number of times
>> for…in
>> for…of
• while loop - loops through a block of code while a condition is
true
• do…while loop - loops through a block of code once, and then
repeats the loop while a condition is true

FOR Loop
SYNTAX:
• Statement 1 is executed (one time) before the execution of the code block.
• Statement 2 defines the condition for executing the code block.
• Statement 3 is executed (every time) after the code block has been
executed.

FOR Loop
FLOWCHART:

FOR Loop
EXAMPLE 1:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
for (i=0; i<=5; i++)
{
document.write("<b>The number is " + i + "</b>")
document.write("<br>")
}
</script>
</body>
</html>

FOR Loop
EXAMPLE 2:
<!DOCTYPE html>
<html> <body>
<p id="demo"></p>
<script>
var places = ["Mullingar","Doncaster","Wolverhampton","Cheshire","Bradford"];
var i, len, text;
for (i = 0, len = places.length, text = ""; i < len; i++) {
text += places[i] + "<br>"; }
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

FOR…IN Loop
The for...in statement iterates over the enumerable properties of an
object, in arbitrary order. It loops through the properties of an object.
SYNTAX:

FOR…IN Loop
EXAMPLE:
<!DOCTYPE html>
<html><body>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"Georgia", lname:"Rose,", age:21};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body></html>

FOR…OF Loop
The for...of statement creates a loop iterating over iterable objects
(including Array, Map, Set, Arguments object and so on)
SYNTAX:

FOR…OF Loop
EXAMPLE 1: (Looping over an Array)
<!DOCTYPE html>
<html>
<body>
<p> <b> FOR...OF (Looping over an Array) </b> </p>
<script>
var places = ["Mullingar","Doncaster","Wolverhampton","Cheshire","Bradford"];
var x;
for (x of places) {
document.write(x + "<br >");
}
</script>
</body>
</html>

FOR…OF Loop
EXAMPLE 2: (Looping over a String)
<!DOCTYPE html>
<html>
<body>
<p> <b> FOR...OF (Looping over a String) </b> </p>
<script>
var txt = "JavaScript";
var x;
for (x of txt) {
document.write(x + "<br >");
}
</script>
</body>
</html>

WHILE Loop
The while loop starts by evaluating the condition. If the condition is true,
the statement(s) is/are executed. If the condition is false, the statement(s)
is/are not executed.After that, while loop ends.
SYNTAX:

WHILE Loop
FLOWCHART:

WHILE Loop
EXAMPLE:
<!DOCTYPE html>
<html><body>
<p id="demo"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
</script>
</body></html>

DO…WHILE Loop
The do/while loop is a variant of the while loop.This loop will execute the
code block once, before checking if the condition is true, then it will repeat
the loop as long as the condition is true.
SYNTAX:

DO…WHILE Loop
FLOWCHART:

DO…WHILE Loop
EXAMPLE:
<!DOCTYPE html>
<html> <body>
<p id="demo"></p>
<script>
var text = ""
var i = 0;
do {
text += "<br>Number " + i;
i++;
}
while (i < 10);
</script>
</body> </html>

JavaScript Looping Statements

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JavaScript Looping Statements

Similar to JavaScript Looping Statements (20)

More from Janssen Harvey Insigne

More from Janssen Harvey Insigne (8)

Recently uploaded

Recently uploaded (20)

JavaScript Looping Statements