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.


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.



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