Thursday 28 February 2013

JavaScript : Loop Statements




JavaScript do while loop 




Description

In JavaScript do while loop executes a statement block once and then repeats the execution until a specified condition evaluates to false.

Syntax

do
{
  statement block
}
while (condition);
In while loop, the given condition is tested at the beginning, i.e. before executing any of the statements within the while loop. In case of do while loop the condition is tested after execution of the statements within the while loop. This means that do-while would execute it's statements at least once, even if the condition fails for the first time itself.

Pictorial Presentation :

javascript do while loop

Example :

The following web document calculates the sum of even numbers between 0 to 10. The do while loop starts with x = 0 and runs until it equals to 10. If the remainder of x/2 is equals to 0 we add x with y and after completion of the loop y returns the sum of even numbers.

HTML Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en"><br><head>  
  3. <meta charset=utf-8>  
  4. <title>JavaScript do while statement :  Example-1</title>  
  5. </head>  
  6. <body>  
  7. <h1>JavaScript : do while statement</h1>  
  8. <h3> The do while loop calculate the sum of even numbers between 0 to 10. </h3>  
  9. <p id="result">Output will be displayed here.</p>  
  10. <script src="do-while-statement-example1.js"></script>  
  11. </body>  
  12. </html>  

JS Code

view plainprint?
  1. var x = 1;  
  2. var y = 0;  
  3. var z = 0;  
  4. document.getElementById("result").innerHTML = "List of numbers : ";  
  5. do  
  6. {  
  7. z = x %  2;  
  8. if (z === 0)  
  9. {  
  10. var newParagraph1 = document.createElement("p");  
  11. var newText1 = document.createTextNode(x);  
  12. newParagraph1.appendChild(newText1);  
  13. document.body.appendChild(newParagraph1);  
  14. y=y+x;  
  15. }  
  16. x++;  
  17. }  
  18. while (x <=10 );  
  19. var newParagraph1 = document.createElement("p");  
  20. var newText1 = document.createTextNode("The sum of even numbers between 0 to 10 is : " + y);  
  21. newParagraph1.appendChild(newText1);  
  22. document.body.appendChild(newParagraph1);  

Practice the example online

JavaScript while loop



Description

In JavaScript the while loop is simple, it executes its statements repeatedly as long as the condition is true. The condition is checked every time at the beginning of the loop.

Syntax

while (condition)
{
statements
}

Pictorial Presentation :

javascript while loop

Example :

The following web document calculates the sum of odd numbers between 0 to 10. The while loop starts with x = 0 and runs until it equals to 10. If the remainder of x/2 is not equals to 0 we add x with y and after completion of the loop y return the sum of odd numbers.

HTML Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en"><br><head>  
  3. <meta charset=utf-8>  
  4. <title>JavaScript while statement :  Example-1</title>  
  5. </head><br><body>  
  6. <body>  
  7. <h1 style="color: red">JavaScript : while statement</h1>  
  8. <h3> The while loop calculate the sum of odd numbers between 0 to 10. </h3>  
  9. <p id="result">List of numbers :</p>  
  10. <script src="while-statement-example1.js"></script>  
  11. </body>  
  12. </html>  

JS Code

view plainprint?
  1. var x = 1;  
  2. var y = 0;  
  3. var z = 0;  
  4. document.getElementById("result").innerHTML = "List of numbers : ";  
  5. while (x <=10 )  
  6. {  
  7. z = x %  2;  
  8. if (z !== 0)  
  9. {  
  10. var newParagraph1 = document.createElement("p");  
  11. var newText1 = document.createTextNode(x);  
  12. newParagraph1.appendChild(newText1);  
  13. document.body.appendChild(newParagraph1);  
  14. yy=y+x;  
  15. }  
  16. x++;  
  17. }  
  18. var newParagraph1 = document.createElement("p");  
  19. var newText1 = document.createTextNode("The sum of even numbers between 0 to 10 is : " + y);  
  20. newParagraph1.appendChild(newText1);  
  21. document.body.appendChild(newParagraph1);  

Practice the example online




JavaScript for loop




Description

A JavaScript for loop executes a block of statements until a specified condition is true.
For loop creates a loop that allows us to specify three different expression in a single line, enclosed in parentheses and separated by semicolons, followed by a group of statements executed in the loop.
The JavaScript for loop is similar to the Java and C for loop.

Syntax

for ([initial-expression]; [condition]; [increment-expression])
{
statements
}

Parameters

initial-expression : Statement or variable declaration. Typically used to initialize a counter variable. This expression may optionally declare new variables with the var keyword. These variables are local to the function, not to the loop.
condition : Evaluated on each pass through the loop. If this condition evaluates to true, the statements in the block are performed. This conditional test is optional. If omitted, the condition always evaluates to true.
increment-expression : Generally used to update or increment the counter variable.
statements : Block of statements that are executed as long as condition evaluates to true. This can be a single statement or multiple statements. Although not required, it is a good practice to indent these statements from the beginning of the for statement.

Pictorial Presentation :

javascript for loop

Example :

In the following web document for statement starts by declaring the variable r and initializing it to 1. It checks that r less than eleven and display the variable r and sum of i stored in the variable z, after that r increases by 1. 

HTML Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>JavaScript for statement :  Example-1</title>  
  6. <link rel="stylesheet" type="text/css" href="example.css">  
  7. </head>  
  8. <body>  
  9. <h1>JavaScript : for statement</h1>  
  10. <p id="result">Output will be displayed here.</p>  
  11. <script src="for-statement-example1.js"></script>  
  12. </body>  
  13. </html>  

JS Code

view plainprint?
  1. var r = 0;  
  2. var z = 0;  
  3. for (r = 1; r<11; r++) {  
  4. z = z + r;  
  5. var newParagraph = document.createElement("p");  
  6. var newText = document.createTextNode(r+' ---> '+z);  
  7. newParagraph.appendChild(newText);  
  8. document.body.appendChild(newParagraph);  
  9. }  

Practice the example online




JavaScript : label statement



Description

Label statement provides an identifier for a statement that lets you refer to it using a break or continue statement.

Syntax

label :
   statements

Parameters

label : Any JavaScript identifier that is not a reserved word.
statements : Group of statements. "Break" can be used with any labeled statement, and "continue" can be used with looping labeled statements.

Example :

The following web document demonstrates how label statement can be used.

HTML Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>JavaScript label statement :  Example-1</title>  
  6. </head>  
  7. <body>  
  8. <h1 style="color: red">JavaScript : label statement</h1>  
  9. <script src="label-statement-example1.js"></script>  
  10. </body>  
  11. </html>  

JS Code

view plainprint?
  1. labelmark:  
  2. for(x=0; x<6; x++)  
  3. {  
  4. var newParagraph1 = document.createElement("p");  
  5. var newText1 = document.createTextNode("The value of x is : " +x);  
  6. newParagraph1.appendChild(newText1);  
  7. document.body.appendChild(newParagraph1);  
  8. if(x==3)  
  9. {  
  10. break labelmark;  
  11. }  
  12. }  
  13. var newParagraph1 = document.createElement("p");  
  14. var newText1 = document.createTextNode("The last value of x is : " +x);  
  15. newParagraph1.appendChild(newText1);  
  16. document.body.appendChild(newParagraph1);  

Practice the example online



JavaScript : break statement



Description

The break statement is used to terminate a loop, switch or label statement.

Syntax

break [label1]

Parameter

lable1: Identifier associated with the label of the statement. The parameter is required if the statement is not a loop or switch.

Example :

The following web document demonstrates how break statement can be used.

HTML Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>JavaScript break statement : Example-1  
  6. </title>  
  7. <link rel="stylesheet" type="text/css" href="example.css">  
  8. <script src="break-statement-example1.js">  
  9. </script>  
  10. </head>  
  11. <body>  
  12. <h1>JavaScript : break statement</h1>  
  13. <form name="w3rfrom" onsubmit="w3rfunction();return false;">  
  14. <input type="text" placeholder="Input a number bwtween 2 to 10"  
  15. id="number" size="30" />  
  16. <input type="submit" value="Submit" />  
  17. </form>  
  18. <p id="result">Your result will be displayed here.</p>  
  19. </body>  
  20. </html>  

JS Code

view plainprint?
  1. function w3rfunction(){  
  2. 'use strict';  
  3. var x = document.getElementById("number").value;  
  4. if(x < 2 || x > 10){  
  5. document.getElementById("result").innerHTML = "The number is not within the range.";  
  6. }  
  7. else  
  8. {  
  9. var z = 0;  
  10. var y;  
  11. for(y=1; y<=x; y++)  
  12. {  
  13. z = z + y;  
  14. if(y===x)  
  15. {  
  16. break;  
  17. }  
  18. }  
  19. document.getElementById("result").innerHTML = 'The sum of numbers between  1 to '+ x +' is: '+ z;  
  20. }  
  21. }  

Practice the example online

JavaScript : continue statement

Description

The continue statement is used to restart a do-while, while, for, or label statement.

Syntax

continue [label]

Parameters

label : Identifier associated with the label of the statement. The parameter is required if the statement is not a loop or switch.

Example :

In the following web document continue statement is used to get the odd numbers between two numbers.

HTML Code

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>JavaScript continue statement : Example-1</title>  
  6. <link rel="stylesheet" type="text/css" href="example.css">  
  7. </head>  
  8. <body>  
  9. <h1>JavaScript : continue statement</h1>  
  10. <p id="result">Output will be displayed here.</p>  
  11. <p id="result1"></p>  
  12. <script src="continue-statement-example1.js"></script></body>  
  13. </html>  

JS Code

view plainprint?
  1. var newParagraph = document.createElement("p");  
  2. var newText = document.createTextNode('List of odd numbers between 1 to 10 are');  
  3. newParagraph.appendChild(newText);  
  4. document.body.appendChild(newParagraph);  
  5. var z = 0;  
  6. var y = 0;  
  7. for(y=1; y<=10; y++)  
  8. {  
  9. if(y%2===0)  
  10. {  
  11. continue;  
  12. }  
  13. var newParagraph1 = document.createElement("p");  
  14. var newText1 = document.createTextNode(y);  
  15. newParagraph1.appendChild(newText1);  
  16. document.body.appendChild(newParagraph1);  
  17. }  

Practice the example online

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)