Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

A Guide to Work with JavaScript Loops

In this article I will cover how to start working with javascript for and while loops. Also I will cover break and continue statements in javascript fundamentals.

Introduction

This tutorial will cover the basic building blocks of JavaScript loops and several types of looping operations.

Description

  • Like other programming language JavaScript also performs many types of periodic application, called looping. We know that loop is used when we need to do a set of operations several times, with an increment of some kind after each run through the block of code.
  • Basically loops are collections of instructions used to solve the same block of code again and again, till a specified condition returns true or false based on code (block) task.
  • Execution and controlling of loop is done with an increment or decrement.

JavaScript support two types of loop: For and While.

For Loop

It has basically the same syntax like other programming languages C and C++. Usually it takes three arguments.The For loop are best used when you want to perform an operation for a specific number of times. The For loop is executed till a specified condition returns false value.

Syntax

for (Initialization Part; Condition Part; Increment/Decrement Part ) 
{            
   // Blocks of statement
}

Note

When the For loop executes, the following things happen.

  • Execution of initialization part: This expression usually initializes one or more loop counters, but the syntax allows an expression of any number of counters.
  • Evaluation of condition part: If the value of condition is true, the loop statements execute. If the value of condition is false, the for loop terminates.
  • The counter variable is incremented after every loop in the increment section of the for loop.
  • The statements execute, and control passes to initial executing statement.(Step 2)

Following Script will clear the use of for loop in javascript.

Listing 1- Script of ‘for loop’ in javascript (Multiplication of 2 through 5)

<html>
<head />
<body> 
<script type="text/javascript">
document.write("<h1>Table of 2 to 5 </h1>");
document.write("<table border=6 width=30%");
document.write("<table >");
for (var counter1 = 1;counter1 <= 10; counter1++ ) {
  document.write("<tr>");
  document.write("<td>" + counter1 + "</td>");
    for ( var counter2 = 2; counter2 <= 5; counter2++ ) {
        document.write("<td>" + counter1 * counter2 + "</td>");
    }
   document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
 
Above output is Table of 2 to 5 using for loop

Figure 1: Above output is Table of 2 to 5 using for loop.

The while loop

The while loop works just like for loop but in different manner. The while statement repeats a loop till condition evaluates to be true.If the condition becomes false, the statements within the loop terminates the execution and control goes to the initial executing statement.

Syntax

while (condition) 
{
  // Block of statements
}

Following script will clear the use of while loop in javascript

Listing 2: Script to handle while loop in javascript

<html>
<head />
<body>
<script type="text/javascript">
<!--
varPrintNumber = 1;
varlinebreak = "<br />";
document.write("While loop starts here");
document.write(linebreak);
while(PrintNumber< 5){
	document.write("PrintNumber = " + PrintNumber);
	document.write(linebreak);
	PrintNumber++;
}
document.write("While loop is terminates here");
</script>
</body>
</html>
Above figure is output of while loop description in javascript

Figure 2: Above figure is output of while loop description in javascript.

Note

  • The while loop allows you to do something over and over while a conditional statement is true .I.e. The conditional statement which must be True for the while loop's code to be executed.
  • When a while loop starts, the JavaScript interpreter checks if the condition statement is true. Code between the curly braces is executed. At the end of the block segment the while loop comes back to the condition statement and starts executing again.
  • Make sure that condition in a loop eventually becomes false; otherwise, the loop will never terminate.

    • Break and Continue statement

      Break statement in any programming language is used when we have to discontinue the flow of the program. The break statement will break the loop and continue executing the code that follows after the loop. The continue statement will break the current loop and continue with the next value.

      Listing 3 - Script of break statement

      <html>
      <body>
      <script type="text/javascript">
      var counter =0 ;
      document.write("Loop starts Here<br /> ");
      while (counter < 10)
      {
        if (counter == 6){ 
           break;  
        }
        counter = counter + 1;
        document.write( counter + "<br />");
      }
      document.write("Loop exit in 6th execution<br /> ");
      
      </script>
      <body>
      <html> 
      
      Above figure is output of break statement.

      Figure 3- Above figure is output of break statement.

      Explanation

      Initially loop starts form i=0 .But after 6th iteration we have used break statement. At 6th iteration flow of execution discontinue .

      Listing 4:Script of continue statement .

      <html>
      <body>
      <script type="text/javascript">
      var counter = 0;
      document.write("loop starts here<br /> ");
      while (counter < 10)
      {  counter = counter + 1;
      document.write( counter + "<br />");
        if (counter <= 6){ 
           continue;  
        }
        else
        {
        break;
        }  
        
      }
      document.write("Loop terminates here<br /> ");
      </script>
      <body>
      <html> 
      
      Above figure is output of ‘continue’ statement

      Figure 4- Above figure is output of ‘continue’ statement.

      Note-As same in above program loop starts initially at i=0 but here use of ‘continue’ statement skips the 6th iteration and continue to next iteration.

      Conclusion

      This article covers almost the basic ideas of loop structure in JavaScript . If you have any queries please comment here.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login