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


Quick Links:


newBookmarkLockedFalling

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
Basics of PB Coding

Alright, this tutorial covers the basics of ProBoards coding, or at least the simple things. First off, you should know HTML. CSS, XML, and XSL would be an added bonus and very helpful.

I'll be teaching and explaining the following aspects of JavaScript in this code. I'll explain a few other things, but this is the basic list of things covered.
- Variables
- getElementsByTagName();
- for loops
- length
- style.display
- Comments

To do this, I'll be giving you a simple break down of different codes. The first code removes the Last Post column on the main page.

<script type="text/Javascript">
var aTD = document.getElementsByTagName("TD");

for(var a=0;a<aTD.length;a++){
if(aTD[a].width == "24%"){
aTD[a].style.display = "none";
}
}
</script>


First things first, as you should know from HTML, there's always the start tag for something, and then there's the end tag. So, we have this part.

<script type="text/Javascript">
</script>


We have the "script" tag, and an attribute called "type". Now, type is technically optional to make the code work, but it is required to be HTML and XHTML valid. The proper type statement is "text/Javascript" and should always be that, with the exception of maybe capitalizing the S or not capitalizing the J.

Now onto the next part. First line of code inside the script tags is a variable and a getElementsByTagName();

var aTD = document.getElementsByTagName("TD");

Well, this basically says the following "Set variable aTD to always be equal to 'document.getElementsByTagName("TD")' unless specified later."

Variables sort of work in the same way you use them in Algebra.

3x = 6
x = 2

So, x has the value of 2. Right? Same thing with this.

var varName = 5;
alert(varName+3);

This should alert "8" if you used it. Now, to explain getElementsByTagName();

First off, getElementsByTagName() is ALWAYS called off of another object. Some users will call it off of document, some call it off document.body. But, you can call it off something else.

If you look at the source of a ProBoards page, you'll see that the second TD on a page contains two font tags. One where the banner should be/is and the second containing the << Home >> text. Now, lets say we wanted to get the second font tag. We'd do something like this.

var aTD = document.getElementsByTagName("TD");
var theFontTag = aTD[1].getElementsByTagName("FONT")[1];


You may read that and say "Wait a second, isn't it the second font tag we want? Not the first?" Well, JavaScript starts counting from 0. So, basically, add 1 to whatever value you see.

Now, I'll put this in English terms of what that's saying.
Set variable "aTD" equal to an array of all TD tags found inside the document element. (The document element is basically equal to the HTML tag for what you need to know about it).

Next, set the variable "theFontTag" equal to the second FONT tag found inside of the second "aTD", or the second TD tag inside the document element.


Make sense? Good. Now, let's go back to the original code part I showed you. If we head to the next line, we find something called a "for() loop". There's numerous kinds of loops, but for the most basic PB coding, you only need to know a for().

Anyways, lets take a look at it.

for(var a=0;a<aTD.length;a++)

Now, I'm going to explain three things before I cover the for loop, as they'll help you understand this better.

First things first, we have "a<aTD.length", well. What does the ".length" mean you probably ask. In this case, ".length" is being used on an array to return the length of an array. But there's a difference. Unlike most things in JavaScript, it doesn't start counting at 0. It actually starts at 1.

Now, let's take a look at the "a<aTD.length" part again. In the use in the for() loop above, its an if statement basically and returns either true or false. In this case, it is saying "If a is less than the length of the array 'aTD', return true." There are many different things that can be used in comparison, and a few of them are found below.

== (Equal to. "1 == 0" returns false, while "1 == 1" returns true.)
!= (Isn't equal to. "1 != 0" returns true, while "1 != 1" returns false.)
< (Less than. "1 < 0" returns false. "1 < 1" also returns false. "1 < 2" would return true.)
<= (Less than or equal to. "1 <= 0" returns false. "1 <= 1" returns true.)
> (Greater than. "1 > 0" returns true. "1 > 1" returns false.)
>= (Greater than or equal to. "1 >= 0" returns true. "1 >= 1" returns true also.)


Anyways, now for the final thing to be explained. "a++". If you look at the beginning of the for loop, you'll notice it says "var a=0". That's defininf the variable "a" as the number "0". Well, "a++" raises the value of a by one. Likewise, "a--" subtracts one from the value of "a".

Now, for the for-loop. Here's a brief breakdown for reference. for(statement;thecheck;repeated)

Now, I'll explain what each section does. The first section is "statement". This is a statement that is executed only once for each for() loop. In our example, the "statement" is "var a=0", so we're assigning the value of "0" to "a".

Next, if "thecheck". "thecheck" is checked each time through the for() loop. If "thecheck" returns "true" then the for() loop continues. Otherwise, the for() loop ends. Our example is saying "while a is less than the length of the array aTD, continue the loop".

Finally, "repeated". "repeated" is something that is executed at the very end of each for() loop; in this case it is "a++". This is saying "raise the value of a by one each time through the loop". The reason we do this is so we can move onto the next cell in the for() loop.

Now that we've broken down the for() loop, let's move onto if statements (I'll also briefly cover if-else statements.) If statements are used to decide whether or not to activate the portion of code between the brackets following the if.

if(aTD[a].width == "24%"){
// Code here
}


Right there we're saying "if the width of aTD is equal to '24%', then activate the code that is where the '// Code here' is." Actually, while we're on the topic, those two slashes represent a single line comment. Everything after those will not be activated. There are also multi-line comments that look like the following:
/* Start comment
Woot
ASDF*/


Everything between the "/*" and "*/" is ignored by the browser. But be warned, it is not wise to over-comment your code, as the stuff there must still be loaded into the browser and can waste precious loading time (well, its only precious for those 56k users.)

Next, let's look at what would be evaluated in our code (between the if statment brackets).
aTD[a].style.display = "none";

Well, as you can see, we reference the same TD we checked in the if-statment. But what're we doing? We're apparently changing its style and its the display of that style to "none". But what does this do? Those of you who are quite familiar with CSS should know that this will actually hide the object. In ProBoards, this tends to be how most people remove things.

Now that we've broken down that code, let's see if you can figure out what these codes do. (Note: They all effect the main page.)

<script type="text/Javascript">
document.getElementsByTagName("td")[2].style.display = "none";
</script>


<script type="text/Javascript">
document.getElementsByTagName("font")[1].style.display = "none";
</script>


<script type="text/Javascript">
var aTD = document.getElementsByTagName("TD");
for(a=0;a<aTD.length;a++){
if(aTD[a].width == "1%"){
aTD[a].style.display = "none";
}
}
</script>


<script type="text/Javascript">
var aTD = document.getElementsByTagName("TD");
for(a=0;a<aTD.length;a++){
if(aTD[a].width == "8%"){
aTD[a].style.display = "none";
} else if(aTD[a].colSpan == 2 && aTD[a].innerHTML.match(/Forum Name/i)){
aTD[a].colSpan = 1;
}
}
</script>



Here's the answers.
1. Removes the "Hey x" cell.
2. Removes the "<< Home >>" font tag.
3. Hides the posts and topics columns.
4. Removes the on/off columns


Well, hopefully this has helped some of you guys. :)



Last Edit: Jul 15, 2006 6:39:29 GMT by Chris

slip

slip Avatar
Chris spoils me!

*****
Senior Studio Member

1,529


April 2006
hey this was very helpful. :)

slip

slip Avatar
Chris spoils me!

*****
Senior Studio Member

1,529


April 2006
but can yu tell me where to goto start self-teaching me javascript and html - i am really interested.

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
Please use "Modify" button, don't double post.

---

If you don't know HTML, check the "Tutorial Index" stickied thread in this board. I believe Joe/Xylish posted some and there's some other ones by members that may be helpful.

Aaron

Aaron Avatar
Bad Wolf

****
Dedicated Studio Member

859


November 2006
Yep, you pretty much summed it all up Chris. Sadly.

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
derfleurer said:
Yep, you pretty much summed it all up Chris. Sadly.


As far as the basics go, I guess I did. =/ Only thing I could have mentioned was maybe insertRow and insertCell, because PMBars use those a lot.

Andrew McGivery

Andrew McGivery Avatar
Formerly Fredy

******
Legendary Studio Member

5,742


September 2005
Great tutorial. helped me understand loops alot better :P
k

Sasuke

Sasuke Avatar

****
Senior Member

418


August 2005
Yea,me too :)

Maybe now I can go onto Coding PB!

Moose

Moose Avatar

****
Senior Member

449


August 2005
Good, maybe include the replace() method if you decide to do another. :)
Greg says:
Coding music...
Greg says:
Hmm...
Greg says:
I wouldn't rule it out. :P
Chris 3.0 [New features? Yes.] says:
:P
Greg says:
If you think about machine code it's a bunch of 1s and 0s
Chris 3.0 [New features? Yes.] says:
Anything is possible.
Greg says:
Yeah try to code Metallica
Chris 3.0 [New features? Yes.] says:
:P Yeah, I'll get right on that... right after I learn to fly.

Lucifer

Lucifer Avatar

*******
Mythical Studio Member

Eunuch
5,665


August 2005
HO SNAP! I got the first two codes right! =D

But...I'm tired so didn't bother with the second two and went straight for the answers. I knew the 3rd dealt with a cell, so I suppose I could've guessed on gotten right. :P


Anyway, nice tut, Chris, it helped me a lot. :)

Simie

Simie Avatar

******
ProScripter

1,048


May 2006
Dang, you couldn't have made this earlier when I didn't know this stuff? :P You explained it much better than all the 200 or so tutorials I've read :P

Jay

Jay  Avatar
Random Avy Refresh To See Another One

50%

***
Dedicated Member

171


December 2007
Nice Chris a thumbs up tutorial for you :) :)

But as always its just boring as my Computer proffesor lectures anyway again its nice and sweet ill give you an opinion of the plus sign



(+|-)
Your Opinion



Last Edit: Jan 4, 2008 12:30:29 GMT by Jay
Click here to feed me a fruit!
Get your own at Dinomon!

tenkabuto

tenkabuto Avatar

****
Senior Member

420


January 1970
Very helpful, maybe I can get back into what little I had gotten into before of PB Coding. =D Also great explanation of the loop, I'd never understood them before and you had always helped me with them instead. xD

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
iecstacy said:
Very helpful, maybe I can get back into what little I had gotten into before of PB Coding. =D Also great explanation of the loop, I'd never understood them before and you had always helped me with them instead. xD


I forgot about that. <.< That was always a nuisance.

richardgary1223
Guest
..I am sort of confused when it comes to looping..

This tutorial is very good exp. to me.. :)

newBookmarkLockedFalling