loops
you are expected to know the basics of arrays for this tutorial
loops run the same block of code multiple times. they are useful for doing one thing a set number of times, and possibly in your case, searching through multiple array elements (a majority of proboards® scripts).

.length
the .length property returns the number of levels in an array.

syntax:
array_name.length

example:
var my_array = new array();
my_array[0] = "red";
my_array[1] = "green";
my_array[2] = "blue";

var my_array_length = my_array.length; // 3

for()
the for() loop runs the same block of code a certain number of times.

standard for() loop
syntax:
for(var=start_value; var<end_value; var++){ // < can be any operator
// block of code
} // end the loop

example:
[font=courier newfor(i = 0; i < 3; i++){
document.write("hi. "); // outputs "hi. hi. hi"
}

the above example script just repeats document.write("hi. "); 3 times.

let's take a quick look at the syntax.

for(var=start_value; var<end_value; var++){ // < can be any operator
pick a name for the variable. 'i', 'a', and other short names are most common
as long as "var" is less (can be any operator, less than (<) is used in this example) than "end_value", then keep running the block of code
add 1 to "var" every time the loop runs, this makes "var" eventually equal "end_value"


while()
the while() loop runs the same block of code while a clause is true

while() loop
syntax:
while(var < value){ // < can be any operator
// block of code
} // end the loop

example:
var i = 0; // using i as our counter
while(i <= 5){
document.write("a "); // would output "a a a a a"
i++;
}

this should be pretty self-explanitory. we use the variable "i" as a counter, and we add to "i" ("i++") in every block of code to ensure that it eventually reaches the value we set (5).

do while() loop
The do while() loop runs the same block of code while a clause is true. Even if the clause is not true, the block of code will be ran one time.

do while() loop
syntax:
var = 0;
do {
// block of code
}
while(var < end_value); // < can be any operator!

example (outputs "zoom. zoom. zoom."):
i = 0;
do {
document.write("zoom. ");
i++;
}
while(i > 3);

example 2: (outputs "zoom." because 2+2 is never equal to 5)
do {
document.write("zoom. ");
}
while((2 + 2) == 5);


as you can see, it is generally the same idea as the while() loop, except it always has to run at least one time.


break
the break method ends the loop

syntax:
break

example:
while(100 == 100){
document.write("hello world!");
break; // ends the loop
}

after looking at the example, you may be wondering, "how is this useful?". if we didn't break the loop, since 100 is always equal to 100, the block of code would continue executing endlessly, causing the browser to freeze and probably crash. since we broke the loop, it only ran once.


continue
the continue method breaks the loop and then continues it at the next value

syntax:
continue

example:
var some_array = new Array("You are ", "not ", "ugly");
for(i = 0; i < some_array.length; i++){
if(i == 1){
continue;
}
document.write(some_array[i]);
}

That example would output "You are ugly". The 2nd level of the array is skipped (see the if statement, if "i" equals 1, since JavaScript starts counting at 0, that is the second level), so instead of outputting "You are not ugly", the "not" is skipped.

putting it together
now that we have the concept down, let's take a look at it put together.

example:
var some_array = new array("coke", "pepsi", "root beer");
for(i = 0; i < some_array.length; i++){
document.write("hi. ");
if(some_array[i] == "pepsi"){ // if this array elements value equals "pepsi"
break; // break it now
}
}

that would ultimately output "hi. hi.". since "i" is equal to the integer that defines the current number of the loop, we can use "i" in place of a number for the array element. so if the loop was on its second run, "i" would be equal to 2 (1 in javascript, js starts counting at 0), so some_array[i] would be the same as some_array[1] in this case. notice the if() statement and the break, this breaks the loop if the current array element's value is equal to "pepsi".

applying it to proboards
let's take a look at a brief script that hides the last post column using a loop

example:
var td = document.getelementsbytagname("td"); // put all of the td elements into an array
for(i = 0; i < td.length; i++){ // start the loop
if(td[i].width == "24%" && td[i].classname.match(/^(titlebg|windowbg2)$/i)){ // specify the array element that matches the properties of the last post cells
td[i].style.display = "none"; // hide the current array element (the tds that match the condition above)
}
}


extra! reverse for() loop
a reverse loop is just how it sounds, a loop ran backwards. how is this useful? you could use it to reverse the elements in an array, in this case, the example i provide pulls the info center in a much more efficient way.

syntax:
for(var=some_array.length-1; some_array>=0; some_array--)

this says: variable "var" is equal to the length of array "some_array" - 1. the " - 1" is added because .length counts the number of elements starting at 1, and arrays count starting from 0, and 1 - 1 = 0.
this says: as long say array "some_array" is greater than or equal to 0, keep running the for loop. 0 is the lowest level of an array, so i stopped the loop there.
this performs the equation ( variable "i" - 1 ) every time the block of code repeats itself

example:
var table = document.getelementsbytagname("table"); // pull all of the table elements into an array
for(i = table.length-1; i >= 0; i--){ // start the loop
if(table[i].rows[0].cells[0].innerhtml.match(/info center/i) && table[i].rows[0].cells[0].colspan == "2" && table[i].rows[0].cells[0].classname == "titlebg"){ // pull the element that matches these properties (the info center)
table[i].style.display = "none"; // hide the info center
break; // break the loop
}
}
why is a reverse loop useful? let's take this info center script into account for a second. we could use a regular loop and go through dozens of other array elements (forcing the browser to check each element on the way to the info center, slowing the code down, even if infinitesimally), or we could start checking from the bottom up (the info center is at the bottom of the page, make sense?) and save the browser some trouble.
be sure to break it or else all of the other array elements will still be searched as well!

thanks for reading, i hope this helped you with loops. if you need any help, feel free to pm me or reply to this thread. all comments are appreciated!

note: there may be some errors/typos after copying this thread over, if you find any, please let me know and i will fix them.
note 2: all of the capitalization was removed by notepad++ =[ sorrys


Last Edit: Mar 15, 2009 21:37:16 GMT by Devin