Hello guys! afternoon and welcome to my new tutorial post on JavaScript. In my last tutorial post i talked about JavaScript switch case, I will be talking about JavaScript while loops in today's tutorial post.
While writing a JavaScript program, you might encounter a situation where you need to perform an action over and over again. In such situations, you will need to write loop statements to reduce the number of lines.
JavaScript supports all the necessary loops to ease down the pressure of programming.
JavaScript supports all the necessary loops to ease down the pressure of programming.
You can also check out our tutorial post on: JavaScript if...else Statement
The while Loop
The most basic loop in JavaScript is the while loop which would be discussed in this tutorial post. This purpose of a while loop is to execute a statement or code block repeatedly as long as expression is true. Once the expression becomes false, the loop terminates.
Flow Chart
Below is how the flow chart of a JavaScript while loop looks like:
Syntax
The syntax of while loop in JavaScript is as follows:
while (expression) {
Statement(s) to be executed if expression is true
}
Statement(s) to be executed if expression is true
}
You can check out our tutorial post on: JavaScript Variables
Example
The following example below shows how to implement while loop in JavaScript:
<html>
<body>
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop");
while ( count < 10 ) {
document.write("Current Count: "+ count + " <br / >");
count ++;
}
document.write("Loop stopped!");
//-->
</script>
</body>
</html>
<body>
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop");
while ( count < 10 ) {
document.write("Current Count: "+ count + " <br / >");
count ++;
}
document.write("Loop stopped!");
//-->
</script>
</body>
</html>
Below is the output of the above example:
Starting Loop
Current Count: 0
Current Count: 1
Current Count: 2
Current Count: 3
Current Count: 4
Current Count: 5
Current Count: 6
Current Count: 7
Current Count: 8
Current Count: 9
Loop stopped!
Current Count: 0
Current Count: 1
Current Count: 2
Current Count: 3
Current Count: 4
Current Count: 5
Current Count: 6
Current Count: 7
Current Count: 8
Current Count: 9
Loop stopped!
You can also read our tutorial post on: JavaScript Syntax
The do...while Loop
The do...while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false.
Flow Chart
Below is the flow chart of a do-while loop in JavaScript:
Syntax
The syntax for do-while loop in JavaScript is as follows:
do {
Statement(s) to be executed;
} while (expression);
Statement(s) to be executed;
} while (expression);
Note: Don't miss the semicolon used at the end of the do...while loop.
Example
Try the following example to learn how to implement do-while loop in JavaScript:
<html>
<body>
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop " + " <br />");
do {
document.write("Current Count: " + count + " <br />");
count ++;
}
while ( count < 6 );
document.write("Loop stopped!");
//-->
</script>
</body>
</html>
<body>
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop " + " <br />");
do {
document.write("Current Count: " + count + " <br />");
count ++;
}
while ( count < 6 );
document.write("Loop stopped!");
//-->
</script>
</body>
</html>
Below is the output of the above example:
Starting Loop
Current Count: 0
Current Count: 1
Current Count: 2
Current Count: 3
Current Count: 4
Current Count: 5
Loop stopped!
Current Count: 0
Current Count: 1
Current Count: 2
Current Count: 3
Current Count: 4
Current Count: 5
Loop stopped!
You can read our tutorial post on: Scrollbar Css
Alright guys we have come to the end of this tutorial post, feel free to drop your questions in the comment box, they will be attended to as soon as possible. In my next tutorial post i will be talking about JavaScript For Loop, bye for now.