Working with Loops

FOR/NEXT Loops

An example of this could be...

For (i=0; i<10; i++) {
//Perform some code
}

This basically says...
i=0; --- Set i to be 0
i<10; --- if i<10 then stay in the loop until i>=10
i++; --- will add 1 to i each time it loops through

For example...

var a = ""
for (i=0; i<10; i++) {
a = a + i + ", ";
}
document.getElementById("loop1").innerHTML = a.slice(0, a.length-2);

Will give 'a' the value of the numbers 0 thru 9
(it removes the last two chr's as we do not want the ', ' on the end)

FOR/IN Loops

Loops through the properties of an object

An example of this could be...

var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
   text += person[x] + " ";
}

This basically says...
Create a person object with 3 properties (fname / lname / age)
Create two variables (text / x)
then the 'for (x in person)' means it will loop through each property in 'person' and save it in the variable 'x'
It will then keep adding each property it finds to the 'text' variable


ALSO SEE Objects & Properties page for an example of a FOR/IN loop with objects.

For example...

var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var textX = "";
var x;
for (x in person) {
   text += person[x] + ", ";
   textX += x + ": " + person[x] + ", ";
}

document.getElementById("loopIn").innerHTML = text.slice(0, text.length-2);
document.getElementById("loopInX").innerHTML = textX.slice(0, textX.length-2);

(it removes the last two chr's as we do not want the ', ' on the end)

FOR/OF Loops

Loops through the values of an Array
or
Loops through the letters of a string

An example of this could be...

var cars = ['BMW', 'Volvo', 'Mini'];
var x;
for (x of cars) {
alert(x);
}

This basically says...
Create a cars array with 3 values (BMW / Volvo / Mini)
then the 'for (x of cars)' means it will loop through each value in the 'cars' array and show it as a pop-up alert message.

For example... loop through Array

var cars = ['BMW', 'Volvo', 'Mini'];
var x;
var text = "";
for (x of cars) {
   text += x + ", ";
}

document.getElementById("loopOf").innerHTML = text.slice(0, text.length-2);
(it removes the last two chr's as we do not want the ', ' on the end)




...loop through String

var myString = "Testing"
var x;
var text = "";
for (x of myString) {
   text += x + ", ";
}

document.getElementById("loopOfS").innerHTML = text.slice(0, text.length-2);
(it removes the last two chr's as we do not want the ', ' on the end)

WHILE Loops

An example of this could be...

while (i<10) {
//Perform some code
i++;
}

This basically says...
i<10 --- if i<10 then stay in the loop until i>=10
i++; --- will add 1 to i each time it loops through

This type of looping may not run at all ...
...if the value of i is not less than 10 when it starts it will not perform the code inside the loop (whereas a DO/WHILE loop will always run once).
For example...

var a = "", i=0;
while (i<10) {
a = a + i + ", ";
i++;
}
document.getElementById("loop2").innerHTML = a.slice(0, a.length-2);

Will give 'a' the value of the numbers 0 thru 9
(it removes the last two chr's as we do not want the ', ' on the end)

DO/WHILE Loops

An example of this could be...

do {
//Perform some code
i++;
}
while (i<10);

This basically says...
i<10 --- if i<10 then stay in the loop until i>=10
i++; --- will add 1 to i each time it loops through

This type of looping will ALWAYS run at least once as it checks the values to stay inside the loop AFTER it has completed the first pass.
For example...

var a = "", i=0;
do {
a = a + i + ", ";
i++;
}
while (i<10);
document.getElementById("loop3").innerHTML = a.slice(0, a.length-2);

Will give 'a' the value of the numbers 0 thru 9
(it removes the last two chr's as we do not want the ', ' on the end)

BREAKing out of Loops & CONTINUEing in Loops

If ever you need to leave a loop early you can
break;

And if you need to skip mid loop you can
continue;

Eg...
For (i=0; i<10; i++) {
   if (i==3) {continue;}
   if (i==8) {break;}
a = a + ", " + i;
}

This basically says...
if i = 3 then skip the rest and carry on with the next loop through.
if i = 8 then break out of the loop altogether and don't run anymore.

For example...

For (i=0; i<10; i++) {
   if (i==3) {continue;}
   if (i==8) {break;}
a = a + ", " + i;
}
document.getElementById("loopBC" + i).innerHTML = a;

Will give 0, 1, 2, 4, 5, 6, 7