Loops

A loop will execute a block of code over and over until you tell it to stop. It can iterate through data or HTML. In JavaScript, there are four types of loops:
  1. for loops
  2. for-in loops
  3. while loops
  4. do-while loops
You can interrupt and control the a loops with break, continue and with statements.
for loop
The for loop is often the tool you will use when you want to create a loop. The for structure keeps repeating a sequence of statements for as long as condition that you specify is true.
Syntax
for(<counter = start>; <test counter>; <increment>);{
	<sequence of statments>;
}
<counter = start>initializes a variable that is local to the structure.
<test counter>A test that evaluate before it runs each loop . This test must return a boolean value (either true or false). The program will keep on running through the loop for as long as the test returns the true value.
<increment>It modifies the value of the variable that you used to initialize the loop so that will return the false value after the program has run through the loop a certain number of times.
Example
This example assigns a value to each element of an array and displays these values.
snippet
var arr = new Array(4);
for (i = 0; i < 4; i++) {
    arr[i] = Math.random();
    document.write(arr[i] + "
"); }
for..in loop
The for...in statement loops through the properties of an object or all the elements of an array that you pass as an argument.
Syntax
for ( < variable > in object | array) { <
    sequence of statements > ;
}
<variable> - holds either all the members of an object or all the elements of an array.
Example
This example also assigns a value to each element of an array and displays these values.
snippet
var arr = new Array(4);
var element;

//Filling the array
for (i=0; i; i++){
arr[i] = Math.random();
}

//Iterating the array contents
for(element in arr)
{
document.write(arr[element] + " ");
}
while Loops
while loops are the simplest type of loop. The while statement is followed by a condition in parentheses and a code block in curly brackets. As long as the condition evaluates to true, the code block is executed over and over again.
Syntax
while ( < condition > ) { 
    < sequence of statements > ;
}
They look like this:
snippet
var i = 0;
while (i < 10) {
    i++;
    document.write("
" + i); }
do...while loop
do-while loops are a slight variation of the while loops. The do...while structure keeps repeating a sequence of statements for as long as a condition that you specify is true. Unlike the while structure, the do..while structure tests the condition after it runs the sequence of statements. Since the do statement is followed by a code block and a condition after the block, the code block will always be executed, at least once, before the condition is evaluated.
Syntax
do { 
    < sequence of statements > ;
}
while ( < condition > )
The example runs the loop until it perceives that i is equal to 10.
snippet
var i = 0;
do {
    i++;
} while (i != 10)
with statement
The with statement allows you to specify a default object for a sequence of statements. This statement is very useful when your sequence of statements makes several calls to the same object several times. This approach makes your code code more elegant and more readable.
Syntax
with(<object>) {
	<sequence of statements>
}
Example - without using with
x = Math.tan(6 * Math.E)+Math.sin(Math.LN10)
y = Math.cos(8 * Math.PI)
Example - using with
with(Math){
	x = Math.tan(6 * E)+Math.sin(Math.LN10)
	y = Math.cos(8 * PI)
}
break statement
The break and the continue statements allow you to come out of a loop iteration if a condition that you have specified is met. The break statement allows you to interrupt the execution of a block of statements ({..}), when a boolean condition is true and to the first statement that appears after the end of the block. If your program is made up of nested statement blocks then you can use the break statement in order to leave the current block and to continue processing in the block hat is on next level up. Example
var i = 0;
while (true) {
    if (i == 10) break;
    document.write("<br> This would have been an endless loop! " + i);
    i++;
}
As soon as i is equal to 10, this program will come out of the loop. You can also use the break statement in order to leave a specific block of statements. You must indicate the block of statements concerned using a label. You must place the label immediately before the start of the block that you want to leave. Example
snippet
var i, j;
Loop1;
for ((i = 0; i < 3; i++) {
        document.write("Loop 1: i=" + i + ", j =" + j + "
"); for (j = 0; j < 3; j++) { document.write("Loop 1: i=" + i + ", j =" + j + "
"); if ((i + j) == 3) break Loop1; } }
As soon as i+j is equal to 3, then the break-label statement will cause the program to leave the block that is indicated by the label(it will leave on the first for loop in this case) and to continue processing immediately after this block.
continue statement
The break and the continue statements allow you to come out of a loop iteration if a condition that you have specified is met. The continue statement allows you to skip the remaining statements in the current loop and to continue processing at the start of the next iteration of the current loop.
Example
snippet
for (i = 0; i < 5; i++) {
    if (i == 3) continue;
    document.write("Value of i: " + i + "
); }
This loop does not run the statement that it contains for i=2. You can also use the continue statement in order to continue with the next iteration of a specific block of statements. You must indicate the block of statements concerned using a label. You must place the label immediately before the start of the block concerned. Example
snippet
var i, j;
Loop1;
for (i = 0; i < 3; i++) {
    document.write("Loop 1: i=" + i + ", j =" + j + "
"); for (j = 0; j < 3; j++) { document.write("Loop 1: i=" + i + ", j =" + j + "
"); if ((i + j) == 3) continue Loop1; } }
As soon as i+j is equal to 3 the continue label statement will cause the program to continue processing at the start of the next iteration of the block that is indicated by the label. (in this case it will continue at the next iteration of the first for loop.
Related Tutorial
6 Switch
7 Loops

Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #