Please login or register. Welcome to the Studio, guest!


Quick Links:



Devin

Devin Avatar

**
Official Member

90


August 2007
Aaron Avatar
Please note that semicolons must not be used on lines that end in curly braces and separate variable declarations (which you need not worry about now).

Was a little confused, here. Variable declarations how? Like var; ? And with the curly braces, you do just mean the opening brace of the block, right? 'cause there's nothing wrong with {}; =p

Beyond that, I certainly like the approach.


I dunno what I was trying to write when I said separate variable declarations. :P I think I was talking about object literals. And yeah, I meant left parenthesis/braces only of course. Although it isn't necessarily suggested to include semicolons after right braces/parentheses either.
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
Post it here when you are done =P
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
Who remembers it? I know a lot of people here originally came from ZD or were there before SZ existed. I remember Joe, Chris, CrazyJ, Moose, etc. used to be there. I'm not going to go off with a whole paragraph about how that era was the golden age of ProBoards®, but that is the place where many of us got started. The aura of it was different, it wasn't just like being on another forum. I just posted so that we (I) could reminisce over the memories.

A web archive link with lots of broken stuffs

Banner

Finding that damn banner took me forever :P
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
A PM bar like I suggested on MSN =P

That is like the simplest way to apply this stuff in a short easy script
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
I added brief do.. while() and continue sections to it, and fixed the spacing.

Unfortunately somehow Notepad++ ruined all of the capitalization :(
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
Aaron Avatar
Cool =) Maybe include do...while in the next one (or maybe I just didn't see it)? Even though I know most people feign ever use it :P

I didn't include that or continue. They both crossed my mind, but they are seldom used and hardly worth a mention. I suppose I could add a link to each of them however.


Last Edit: Mar 15, 2009 16:19:20 GMT by Devin
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
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
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
JD Avatar
Yeah, s'leave me alone xD

I prefer to source codes where I can edit them - e.g. my point based subscription code - top secret of course - requires me to add usernames of exemptions to the code... So it is easier like that.

So... there! :P

I think Simie was being sarcastic :P

Anyways, I just use my domain


Last Edit: Mar 13, 2009 18:54:24 GMT by Devin
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
Michael Avatar
*points at avatar*

Showing off your avatar (of images you didn't even make) doesn't help this guy.

Anyways, CD's post just points you towards Fru-Fru's image randomizer, which I'd recommend. www.random-image.net/
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
Chris Avatar
&& document.postForm.post.value == 1)

Only the first post ever made on a forum will have the ID of 1 though... so that doesn't work unfortunately. =/

Oh of course they wouldn't make it that easy convenient way. >:( I guess that idea would have to be scrapped. I suppose the only way to find the modify post page of the first post in a thread would have to be using the topic summary or something. Lovely ::)

Edit: I suppose I could have the first instance of the modify post button pass along some info in the URL. Guess that wouldn't qualify too well as a location check though.


Last Edit: Mar 1, 2009 17:34:17 GMT by Devin
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
I'm going to be adding a few as I mess around with them.

Posting Page (New Thread/Modify first post of the thread)
document.postForm && (!document.postForm.thread || document.postForm.post && document.postForm.post.value == 1)
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
Chris Avatar
Devin Avatar

See I would use code tags, but I'm posting it on several forums, not all of which have the spacing preserved in the code tags. It is a real hassle that the code tags don't do that by default, it just seems to me like it should. Maybe that will be changed in PBv5.


Maybe. But it's nothing a quick find and replace in Notepad can't fix... if you don't mind, I can do it later. (And then make sure the spacing works 100% correctly.)


Aye, I was doing that as you were replying. I replaced 66 out of 68 occurrences of the pre tag with the code tag. The only pre tags I left in were for the ToC and the DOM Tree, so all should be good. I didn't go through the 850 or so lines of text to make sure every bit of spacing was correct after the replacement, but it looks fine to me at a glance.

Edit: Fixed some of the lists back to how they should be in pre tags, the page shouldn't be stretching any more.


Last Edit: Mar 1, 2009 7:36:41 GMT by Devin
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
Chris Avatar
I hate you for using pre tags. :P If you use multiple spaces and the code tag it -should- preserve your spacing. I set it up to do that a while back...

Anyways, overall, not too bad. Didn't read through the full thing obviously, but it looks good.

See I would use code tags, but I'm posting it on several forums, not all of which have the spacing preserved in the code tags. It is a real hassle that the code tags don't do that by default, it just seems to me like it should. Maybe that will be changed in PBv5.
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
crazynarutard Avatar
wow....quite a detailed tutorial :P Well done

Thanks. I'm still awaiting all the corrections critique from Chris. ;D
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.

Devin

Devin Avatar

**
Official Member

90


August 2007
You all are just going to have to deal with this stretching the page. :P I don't plan on going through and editing it and ruining the spacing as I felt that is a vital part of the tutorial.

Also please forgive me, I feel that I may have gone overboard on "introducing" you to scripting for ProBoards.
AFK Aug 2011 - ???

I'll be actively developing codes, tutorials, and templates when I return, later this year.