JavaScript Loop Statements

Loop constructs are the most important statements in any programming language. Scripting languages like JavaScript, VBScript and PHP also provide Loop Structures to make powerful web applications. JavaScript Loop Statements, like other programming languages, allows executing a block of statements multiple times.

JavaScript Loop Statements

JavaScript provides different loop statements to be used in different situations. Let’s discuss them with examples.

For Loop

When you need to run a specific set of statements for a defined number of times for Loop is used. This loop gives you the capability to initialize the counter variable, increment/decrement it and check the termination condition of the loop.

Syntax

for ([initialization of loop variable]; [loop termination condition]; [loop variable increment/decrement])
{
  Statement(s);
}

The for loop starts with initialization of loop variable. Each time, before executing the block of statements, the loop variable is incremented/ decremented and the loop termination condition is checked. If the condition is true the statement block is executed. If the condition is false for loop is terminated.

Example

<HTML>
<head>
<style>
input{padding:10px; margin:10px}
</style>
<script>
function checkVal()
{
  var sel=0;
  var msg="You have Chosen ";
  var x=document.getElementsByName("sauce");
  for (let i = 0; i < x.length; i++) 
  {
   if( x[i].checked)
   {
      sel++;
	  msg=msg.concat(x[i].value)
	  msg=msg.concat(", ")
	}
  }
  msg=msg.concat(" Sauces");
  alert(msg,"Your Choice");
  
   
}
</script>
</head>
<body>
<div style="border-style:solid; background-color:lightblue; border-color:yellow; margin-left:20%; width:50%; padding:20px; font-family:verdana">
Select Your Sauces:<br>

<input type="checkbox" name="sauce" value="Tomato">Tomato
<input type="checkbox" name="sauce" value="Chilly">Chilly
<input type="checkbox" name="sauce" value="Garlic">Garlic
<input type="checkbox" name="sauce" value="Onion">Onion
<input type="checkbox" name="sauce" value="Barbecue">Barbecue
<input type="checkbox" name="sauce" value="Mustard">Mustard
<br>
<input type="submit" onclick="checkVal()">
</div>
</body>
</HTML>

While loop

While loop is used when you want to execute a set of statements until a specific condition is met. The variable used in the While loop have to be incremented/decremented within the loop block. The condition expression is specified in parenthesis after while.

Syntax

while  (condition expression)
{
  Statement(s);
loop variable increment/decrement;
}

Before executing the block of statements, the while condition is checked. If condition is true, the block of statements is executed. When this condition evaluates to false, the while loop is terminated.

Example

<HTML>
<head>
<style>
input{padding:10px; margin:10px}
</style>
<script>
function showBill()
{
  var sel=0;
  var i=0;
  var bill=0;
  var msg="You have ordered ";
  
  var x=document.getElementsByName("item");
  while (i < x.length) 
  {
   if( x[i].checked)
   {
      sel++;
	  bill=bill+parseInt(x[i].value);
	  msg=msg.concat(x[i].id);
	  msg=msg.concat(", ");
	}
	i++;
  }
  msg=msg.concat(" and your Total Bill is :");
  msg=msg.concat(bill);
  alert(msg);
  
   
}
</script>
</head>
<body>
<div style="border-style:solid; background-color:lightblue; border-color:yellow; margin-left:20%; width:50%; padding:20px; font-family:verdana">
Place Your Food Order:<br>

<input type="checkbox" name="item" value="9" id="Burger">Burger ($9)
<input type="checkbox" name="item" value="10" id="Pastry">Pastry ($10)
<input type="checkbox" name="item" value="5" id="Icecream">Icecream ($5)<br>
<input type="checkbox" name="item" value="15" id="Salad">Salad ($15)
<input type="checkbox" name="item" value="25" id="Barbecue Platter">Barbecue Platter ($25)
<input type="checkbox" name="item" value="7" id="Coffee">Coffee ($7)
<br>
<input type="submit" onclick="showBill()">
</div>
</body>
</HTML>

Do While loop

do while loop is used when you want to execute a specific set of statements until a specific condition is met. The variable used in the while JavaScript Loop statement have to be incremented/decremented within the loop block. This loop is executed at least once even if the looping condition is false. The condition for loop termination is given at the end of the statement.

Syntax

do
{
  	Statement(s);
loop variable increment/decrement;
} while (condition expression);

The block of statements given after do is executed once. Then while condition expression is checked. If condition is true, the block of statements is executed again. When the condition evaluates to false, the while loop is terminated.

Task: Rewrite the example of for loop and while loop using do-while loop.

admin

JavaScript Loop Statements