[tutorial] Intro to JavaScript for ProBoards 3

[uzi]

Welcome to the third and latest installment of my popular series of tutorials, Introduction to JavaScript for ProBoards. This tutorial is intended to teach you basic concepts about JavaScript and how it can be used to develop codes for the ProBoards Version 4.5 forum software.

Table of Contents
1. Introduction
2. HTML and CSS
3. How Stuff Works
4. The Basics
    4a. The <script> tag
    4b. Comments
    4c. Spacing and Formatting
5. Data Types
    5a. Strings
    5b. Numbers
    5c. Arrays
    5d. Booleans
6. Variables
7. Loops
    7a. for() Loops
    7b. while() Loops
    7c. Break
    7d. Applying Loops to Arrays
    7e. More About Loops
8. Conditional Statements
    8a. if() Statement
    8b. else Statement
    8c. switch Statement
9. More Things You Should Know
    9a. Operators
    9b. Regular Expressions
    9c. Important Methods and Properties
10. JavaScript and HTML DOM
    10a. DOM Tree
    10b. Getting a DOM Element
    10c. Creating a DOM Element
    10d. Removing and Element
11. Custom Functions
    11a. Parameters
12. ProBoards Variables
13. Applying it all to ProBoards
14. Some Final Advice
    14a. "Why does this work?"
    14b. A Good Developing Environment
    14c. A Good External Environment
    14d. Some Useful References FOR YOU!
15. Conclusion


1. Introduction
If you have ever been the admin of a forum, you probably have used a code (also known as a hack, mod, or addon) to change something about how your forum looks or functions. If you have ever examined the code that you place in your forum's headers and footers, you might think it looks like a bunch of gibberish. In actuality, basic JavaScript is pretty easy to write and even easier to read. By the end of this guide you should have a basic grasp on how to make your own codes for ProBoards Version 4.5.

2. HTML and CSS
Before continuing with this tutorial, it is vital that you have at least a rudimentary understanding of HTML and CSS. JavaScript essentially modifies the page's HTML or CSS; if you aren't familiar with either of those languages, it will be difficult for you to continue. Use the following links to ensure that you understand HTML and CSS.

W3 Schools - HTML Tutorial
W3 Schools - CSS Tutorial

3. How Stuff Works
Most of the codes for ProBoards deal with modifying something about an HTML element. For example, a code might delete a bit of text from the forum (ex. Remove << Home >>). Or, a code might add a new Private Messaging bar to the forum. Or finally, a code might completely modify how a part of the page looks (ex. Info Center remodels).

All of these examples have something in common: You're dealing with HTML elements and their properties.

When you delete a bit of text from the forum, in most cases, you're essentially just hiding it after the page has loaded by adding a CSS attribute. When you add a PM bar to the forum, you're simply creating an HTML element and inserting it into the page. And when you modify a part of the page, you're just changing its properties or attributes.

Be sure to read on for more in-depth discussion about how and why these codes work how they do.

4. The Basics
Before one can run, one must learn how to walk. You can't expect to dive right in and make a huge code - you need to start slowly and grasp the basics. It's important that you learn why and how a code works. For months I was making codes without understanding what I was doing; copying old codes and changing things is good for practicing, but it's absolutely important that you understand what is going on.

4a. The <script> tag
The HTML <script> tag is what we use to embed JavaScript code into our page.

To begin a JavaScript code, use the following line:
<script type='text/javascript'>

And to end a JavaScript code, simply close the tag like you would any other HTML element:
</script>

4b. Comments
Comments are an important part of a code that many programmers overlook. Comments do not have any effect on a script! They are used to explain or describe a segment of code, or to improve readability.

The following line represents a single-line JavaScript comment:
// This is a comment!

The following represents a multi-line JavaScript comment:
/* This
is
a
comment */

The following represents an HTML comment:
<!-- Place
comments outside of
the script tags! -->

4c. Spacing and Formatting
Properly formatting a code makes it easier to read and understand. Like comments, formatting has no effect on the function of a code. Take a look at the following codes, which looks better?

<script type='text/javascript'>
//This is a comment
//This is a comment
for(x){
if(y){
//code
}
}
</script>

<script type='text/javascript'>
/* This is a comment
This is a comment */

for ( x )
{
    if ( z )
    {
        // code
    }
}
</script>

Hopefully you thought the latter of the two examples (which do the exact same thing) looked better, if not more legible, than the first example.

5. Data Types
An object is a 'special kind of data'. There are different types of objects that serve different purposes. If you're dealing with JavaScript, 99% of the time you'll be dealing with objects.

5a. Strings
A string is a data type that is a sequence of characters.

Here is an example of a very basic string:
"Hello world!"

A string is encapsulated using either the " (double-quote) character or the ' (single-quote) character.

5b. Numbers
Unlike other programming languages, JavaScript isn't picky about whether a number is an int, double, or float. To the JavaScript interpreter, a number is simply a number.

Below are a few examples of numbers:
0
1.5
-10
1.32e3

For more about numbers, read about the JavaScript Math Object

5c. Arrays
An array is a special type of data that can store many values at a given time.

Below are three different methods of creating an array:

// Method 1 (Regular Array)
var fruits = new Array();
fruits[0] = "apple";
fruits[1] = "banana";
fruits[2] = "orange";

// Method 2 (Condensed Array)
var fruits = new Array("apple", "banana", "orange");

// Method 3 (Literal Array)
var fruits = [
    "apple",
    "banana",
    "orange"
];

All of those arrays are the same! They are just created using different methods. If you are stumped by the var fruits section, be sure to read Section 6 of this tutorial carefully.

5d. Booleans
Booleans are a simple type of data that can have either of two values: true or false.

More about booleans will be revealed later in this tutorial.

6. Variables
Variables are used to store information that can be used later. You can think about a variable as a container for information.

You can set a variable like such:
var name = value

or:
name = value

Use the var keyword the first time you set a variable.

In the example below, I set the variable message and use the JavaScript method alert() to display the message in a pop-up box.

<script type='text/javascript'>
var message = "Hello world!";

alert(message);
</script>

The above bit of code does the same thing that this does:

<script type='text/javascript'>
alert("Hello world!");
</script>

Variables can be redeclared after they have already been declared. Consider the following example:

<script type='text/javascript'>
var message = "Hello world!";
alert(message); // Alerts "Hello world!"

message = "Goodbye world!";
alert(message); // Alerts "Goodbye World!"
</script>

Variables can be used inside of variables.

var birthplace = "New York";
var message = "I was born in" + birthplace + "!";
// message = I was born in New York!

Each bit of the variable between the double-quotes is a string. The variable birthplace and the two strings are concatenated to set the value of message. In JavaScript, + is the concatenation operator.

For more about variables, reference W3 Schools - JavaScript Variables

7. Loops
Loops are used to run a block of code a set number of times or while a condition is true. In this guide, two important types of loops will be covered.

7a. for() Loop
The for() loop repeats a block of code a set number of times.

for ( i = 0; i < 3; i++ )
{
    alert(i);
}

The example above would create three alert boxes. The first box would display 0, the second would display 1, and the last would display 2. Let's break down the conditions of the for() loop.

First, we set the variable i to the value 0 using i = 0. Then, we tell the loop to run while i is less than 3. The third segment of the for() loop is a command that will be carried out every time the loop runs. In this case, we are adding 1 to the variable i.

7b. while() Loop
The while() loop repeats a block of code as long as a condition is true.

var x = 1; // set variable x to 1

while ( x < 3 ) // if x is less than three, run the block of code
{
    document.write(x); // write the value of x
    x = x * 2; // multiply x times two
}

Be sure to examine the comments in the snippet above to see exactly what is happening. We're telling the JavaScript interpreter that as long as x is less than 3, to write the value of x. Then, we double the value of x. The above script would write 1, then 2. The value of x would then be 4, so the loop condition would no longer be true. But what if the loop condition is always true? The browser would try to run the block of code forever, and end up freezing. Be sure to read about the break statement.

You'll probably be using for() a lot more often when you're dealing with ProBoards. That doesn't mean you'll never use while() though, as it definitely has its uses!

7c. Break
The break statement can be used inside of a loop, and when it is used, the loop is told to stop executing. The loop stops at the point break is interpreted and the rest of the code (if any) begins to run. Consider the following example:

while ( 10 < 100 )
{
    document.write('Loop is running!');
    break;
    document.write('Loop never gets here!');
}

The example above would write 'Loop is running!' ONCE, and that's it. 10 is always less than 100, but break ends the loop in its first iteration. The second document.write() is never interpreted because the loop has already been broken.

7d. Applying Loops to Arrays
Loops are particularly useful because of how they can interact with arrays. Loops can iterate, or loop (verb), through the elements of an array. As always, check out the example below:

var fruits = new Array();
fruits[0] = "Apple";
fruits[1] = "Banana";
fruits[2] = "Orange";

for ( i = 0; i < fruits.length; i++ )
{
    document.write("My favorite fruit is.. " + fruits[i]);
}

This is a lot of information for now, but I'll break it down as best I can. First, obviously, we set the array and its values. Next comes to the loop: We use i as our variable and tell the loop to run until the value of i is greater than fruits.length. fruits.length is equal to three, because there are three elements in the array. The length property returns the number of elements in an array. The script then writes "My favorite fruit is.. Apple", "My favorite fruit is.. Banana", "My favorite fruit is.. Orange". fruits[i] tells the code to use the i as the number of the array element. Since i is equal to 0 during the first iteration of the loop (we set i = 0 at the beginning of the loop, remember?), fruits[0] is read. i is then incremented by one (i++), so then fruits[1] is used, and so on.

Now just imagine how this could be used with an array of HTML elements (remember getElementsByTagName()?). That's how it applies to ProBoards, and you'll see more of that later in this tutorial.

7e. More About Loops
There are a couple more things you should know about loops before continuing.

continue - This statement is similar to break. Instead of telling the loop to stop completely, only the current iteration is stopped and the next iteration will begin immediately.

do...while() loop - A variant of the while() loop that always runs at least once.

8. Conditional Statements
There are four kinds of conditional statements in JavaScript, but they are pretty flexible (with the exception of the switch statement). The types of conditionals are the if statement, if...else statement, if...else if...else statement, and switch statement.

8a. if() Statement
The if() statement will run if the conditions (within the parentheses) are true.

if ( condition )
{
    code to be executed if condition is true
}

That's relatively straightforward and you shouldn't have any problem understanding it. The conditions are set within the parenthesis and the following block of code is executed.

8b. else Statement
The else statement will run if the conditions are NOT true.

if ( condition )
{
    code to be executed if condition is true
}
else
{
    code to be executed if condition is false
}

Nothing too difficult here - let's take a look at else if(). else if() will help you select one of several blocks of code to be executed - take a look.

if ( condition1 )
{
    code to be executed if condition1 is true
} else if ( condition2 )
{
    code to be executed if condition2 is true
}

[/font]

That's no more difficult if you understand what is going on. Let's take a look at an example of all of this applied together:

var favorite_color = "yellow";

if ( favorite_color == "red" )
{
    alert("Red is your favorite color!");
}
else if ( favorite_color == "blue" )
{
    alert("Blue is your favorite color!");
}
else
{
    alert("Neither red nor blue is your favorite color!");
}

Take a look at the above code - I shouldn't really need to explain any part of it in-depth besides the new == operator that you are seeing. You'll learn more about those operators in the next section. Please note that there can be as many else if() statements as you need, but there should only be one if() and one or zero else statement per grouping.

8c. switch Statement
The switch() statement can be used to select one of several blocks of code, similar to if...else...if statements.

switch ( n )
{
    case 1:
        // code to be executed if case 1 is true
        break;
    case 2:
        // code to be executed if case 2 is true
        break;
    default:
        // code to be executed if neither case 1 nor case 2 is true
}

Let's take a look at this being applied to the Favorite Color example I used above.. compare the two - they do the same thing!

var favorite_color = "yellow";

switch ( favorite_color )
{
    case "red":
        alert("Red is your favorite color!");
        break;
    case "blue":
        alert("Blue is your favorite color!");
        break;
    default:
        alert("Neither red nor blue is your favorite color!");
}

Nothing too crazy is happening here. Note that a default condition doesn't have to be present, just like else statements.

9. More Things You Should Know
This chapter will cover some more things that you will probably need to know before you can begin making scripts for ProBoards. I didn't feel like anything in this thread deserved its own chapter, but these things are still extremely important and you'll probably be using them in just about every script you make for ProBoards.

9a. Operators
Operators are special characters that perform different functions within a script.

Assignment Operators
Assignment operators are used to assign values to variables.

Operator Description
=         Assign value
+=        Append to end or add to value
-=        Subtract from value
*=        Multiply by value
/=        Divide by value

// Numbers/Math
var x = 3; // set x to 3
var y = 2; // set y to 2

x += y; // x now equals 5
x -= y; // x now equals 3
x *= y; // x now equals 6
x /= y; // x now equals 3

// Strings
var name = "John";
var message = "Hello";
message += name;
document.write(message); // writes "HelloJohn!"

Arithmetic Operators
Arithmetic operations should be carried out on Math objects (including numbers!).

Operator Description
+         Addition (Math), Concatenation (strings)
-         Subtraction
*         Multiplication
/         Division
%         Modulus (Division Remainder)
++        Increment (Plus One)
--        Decrement (Minus One)

// Examples
var x;

x = 2 + 2;  // 4
x = 3 - 2;  // 1
x = 3 * 2;  // 6
x = 10 / 2; // 5
x = 5 % 2;  // 1

x = 2;
x++; // 3

x = 2;
x--; // 1

// Strings
x = 1; // set x to 1

y = ""; // empty string
y = x + "hi"; // 1hi
y += "bye"; // 1hibye
y += 2; // 1hibye2

// More Strings (concatenation)
var name = "John";

message1 = "Hello my name is ";
message1 += name;
message2 = "Hello my name is " + name;
// message1 and message2 are the same!

Comparison Operators
Comparison operators are used to test for true or false.

Operator Description
==        is equal to (value)
===       is exactly equal (value and type)
!=        is not equal to
!==       is not exactly equal (type is different)
>         greater than
<         less than
>=        greater than or equal to
<=        less than or equal to

// Comparisons
var bool; // placeholder for returned comparisons
var x = 5;
var y = 2;
var z = "2";

bool = x == y; // 5 == 2 is false
bool = y == z; // 2 == "2" is true
bool = y === z; // 2 === "2" is false, types are different (Math and String)

bool = x != y; // 5 != 2 is true
bool = y != z; // 2 != "2" is false
bool = y !== z; // 2 !== "2" is true, types are different (Math and String)

bool = x > y; // 5 > 2 is true
bool = y > x; // 2 > 5 is false
bool = y > z; // 2 > "2" is false
bool = x > z; // 5 > "2" is true

bool = x >= y; // 5 >= 2 is true
bool = y >= x; // 2 >= 5 is false
bool = y >= z; // 2 >= "2" is true

// EXAMPLE
if ( x > y )
{
     alert("It's true!");
} // if x is greater than 2 the alert will happen

Logical Operators
Logical operators are used to determine the logic between values or variables.

Operator Description
!         not
&&        and
||        or

// Some examples
var x = 5;

if ( x < 10 && x > 3 )
{
    // x is greater than 10 AND less than 3
}

if ( x > 10 || x == 5 )
{
    // if x is greater than 10 OR equal to 5
}

if ( !(x > 10) )
{
    // if x > 10 is NOT true
}

9b. Regular Expressions
A regular expression object defines a pattern of characters. These can be used to check for matches within strings, for example.

Regular expressions can be created in two different ways. Take a look at the syntax below:

pattern1 = /pattern/modifiers;
pattern1 = new RegExp(pattern, modifiers);

The example below will open an alert box if the Regular Expression finds a match, which it will.

var str = "My name is John";

if ( str.match(/name is John/) )
{
    alert("His name is John!");
}

match() will be discussed more in the next section. First though, take a look at this very brief Regular Expression cheatsheet I have made.

Modifiers
Modifiers are special switches that change how the Regular Expression behaves. In JavaScript, there are two modifiers.

Character Description
i          Performs a case-insensitive search
g          Performs a global search (does not stop after first match)

Special Characters
These special characters perform a special match or function within a pattern. If you need to use one of these characters literally (as the character they are, not a special character) in a pattern, be sure to escape them using the \ backslash.

Character Description
/          Starts or ends a Regular Expression pattern
\          Escapes a character in a pattern
( )        Stores the characters inside if a match is found
.          Matches any character besides a new line
?          Zero or one occurrence of the pattern
+          One more occurrence of the pattern
*          Zero or more occurrences of the pattern
\d         A digit
\D         Not a digit
\w         Alphanumeric character or underscore
\W         Not alphanumeric nor underscore
[abc]      A character in the set
[^abc]     A character not in the set
^          Start of the string
$          End of string
|          Or statement

Some Useful Examples
Below are some useful examples that are commonly used when making codes for ProBoards.

Example      Description
(.+?)          Matches and stores any group of non-newline characters
(\d+)(,\d+)?   Matches and stores any digit with or without a comma
(abc|xyz)      Matches abc or xyz, and stores the match

9c. Important Methods and Properties
There are a few methods and properties you should definitely memorize before you begin to code for ProBoards. Familiarize yourself with the examples below.

length Property
The number of elements in an array, or the number of characters in a string.

innerHTML Property
The content inside of an HTML element, as an HTML string.

location.href
location.href can be used to get the current page's URL. This can be used with if() and match() to operate a block of code only on certain pages.

match() Method
This method tries to find a Regular Expression pattern inside of a string, and returns the matches if a match is found.

var greeting = "Hi, my name is John.";

if ( greeting.match(/my name is (.+?)\.$/) )
{
    alert( RegExp.$1 ); // alerts "John"
}

replace() Method
This method does exactly what it says - replaces text within a string.

var greeting = "Hi, my name is John.";

greeting = greeting.replace("John", "Jane");

Either a substring or Regular Expression can be passed as the first argument, so instead of "John", you could have /John/g, which would serve the same purpose. Notice the g modifier - this tells the code not to stop after the first match, meaning that more than one instance of "John" will be replaced.

split() Method
The split() method will break a string into an array.

var fruits_string = "Apple,Banana,Orange";

var fruits = fruits_string.split(",");

// fruits[0] = "Apple";
// fruits[1] = "Banana";
// fruits[2] = "Orange";

fruits_string is split into an array, called fruits, by the character ,. This means every time a , is found, a new element of the array is created.

10. JavaScript and HTML DOM
DOM stands for Document Object Model. This model describes HTML objects and how they relate to "the topmost structure" - the document. In almost everything you'll be doing with JavaScript, you'll be interacting with the document and its children - the inner HTML elements.

10a. DOM Tree
A DOM tree can be compared to a family tree. DOM elements can have parents, children, and siblings. An element's parent is an element that contains the current element. Conversely, an element's child is any element within the current element. An element's sibling is any other child of the element's parent. Consider the following HTML code, and the DOM tree below it.

<DIV>
    This is an <SPAN>example</SPAN><BR />
    <B>Hello! <I>Bye!</I></B>
</DIV>

                           DIV
                            |
         ---------------------------------------
         |           |            |            |
       Text        SPAN           BR           B
                     |                         |
                   Text                  ------------
                                         |          |
                                        Text        I
                                                    |
                                                   Text

It's important that you understand how DOM works and what parents, children, and siblings are.

10b. Getting a DOM Element
As I said before, when you are dealing with a code for ProBoards, you are most likely trying to alter an element in some way. This section describes how you can first get the element you are trying to alter.

By Tag Name
The getElementsByTagName(x) method returns an array that includes every element with the tag name x.

The welcome table of a ProBoards page should be the first <table> on the page. Since we know it should always be the first table, it is easy to get it. Consider the example below:

document.getElementsByTagName("table")[0].style.display = "none";

That example may be overwhelming at first; let's break it down.

document is an object that refers to the current HTML document that is loaded in the browser (the entire page between the <html> tags).

Then we use a JavaScript method that can be used on any HTML DOM object (in this case, we use the document object) getElementsByTagName(). That method does exactly what it says it does: it gets elements by their tag name and returns them as an array. In this case, we want to retrieve the first table, so we use table as an argument of the getElementsByTagName() method.

At this point, we've retrieved an array that contains every table element on the page. We need to somehow select the first piece of data in this array (the first table on the page!). You can do this by using [0]. JavaScript starts counting from zero, rather than one. document.getElementsByTagName("table")[0] literally selects the first <table> element of the HTML document.

After that we set the property style.display to the value none. You'll learn more about this later in this tutorial.

But what if you don't know exactly where the element will be on the page? You won't always be dealing with the first table on the page. Sometimes you'll be dealing with an element in the middle of the page, or near the bottom of the page. This means you can't use a simple numbered index like [0]. To do this, you'll have to deal with loops and conditional statements, which were covered earlier in this guide.

By ID
Some elements have an ID attribute set. If this is the case, the element can easily be retrieved using the getElementById() method.

An example that can be applied for ProBoards deals with the forum jump dropdown at the bottom of a ProBoards page. This is a segment of the HTML code of this dropdown list that can be found by viewing the source of a ProBoards page:

<select id="forumjump">

Because the ID is set, it's simple to get the forum jump. You'd just do something like the following:

var jump = document.getElementById("forumjump")

That bit of code stores the forum jump to the variable jump.

10c. Creating a DOM Element
Creating a DOM element with JavaScript is pretty simple - you can use the document.createElement() function. You can apply properties to them the same way you'd apply a property to any JavaScript object - using the dot preceded by the property's name. Finally, you can place the new element on the page using insertBefore() or appendChild().

var message = document.createElement("div");
message.id = "messageID"; // message.setAttribute("id", "messageID") does the same thing
message.className = "titletext"; // the CSS class name(s)
message.innerHTML = "This is an example: ";

var a_link = document.createElement("A");
a_link.href = "http://google.com";
a_link.innerHTML = "Google";

message.appendChild(a_link); // the new <A> is added to the end of the new <DIV>
document.body.insertBefore(a_link, document.getElementsByTagName("BR")[0]);

// The new <A> is added BEFORE the first existing <BR> tag in the document

Study the snippet above and read the comments. There's a lot of new material introduced here, but most of it should be fairly straightforward.

10d. Removing an Element
In most cases, you won't actually want to remove an element. It's better to hide the element. If an element is hidden, it doesn't alter the clients' view of the page, but it can still be referenced later. A good example is the PM text on a ProBoards page. If the "Hey X..." message is removed, we wouldn't be able to reference it later to retrieve the PM data. If it is hidden, we can still access this data but a user cannot see it.

To hide an element, you'll have to set the CSS display attribute to none. The example below will hide the first <BR> element on the page (removes the first line break).

document.getElementsByTagName("BR")[0].style.display = "none";

11. Custom Functions
Functions allow you to reuse blocks of code, and allow them to be called when they are needed. Putting a block of code in a function can also prevent it from loading when the page starts, so you can control when you want it to run. Define a function with the following syntax:

function funcName()
{
    block of code
}

Let's take a look at the example below:

<div id="my_name">John</div>

<script type="text/javascript">
function changeName()
{
    document.getElementById("my_name").innerHTML = "Jane";
}

changeName();
</script>

When the script gets to the changeName() command, the function is called. Hopefully you don't have much problem understanding this - for now it is pretty simple.

11a. Parameters
Parameters allow values or variables to be passed to a function. This can make a function behave dynamically, and provide different results depending on the parameter provided. Let's take a look at the exact same code as above, but with parameters.

<div id="my_name">John</div>

<script type="text/javascript">
function changeName(name)
{
    document.getElementById("my_name").innerHTML = name;
}

changeName("Jane"); // name is changed to Jane
changeName("Joe"); // name is changed to Joe
</script>

The values "Jane" and "Joe" were passed to the changeName() function as a parameter.

12. ProBoards Variables
ProBoards provides a few variables for developers to use when making a script. These variables are as follows:

pb_username
The current user's username. For example, admin or Guest.

pb_displayname
The current user's display name. For example, Patrick Clinger or Guest.

pb_action
The current page's action name. For example, home or admin.

pb_skinid
The user's current active skin ID. For example, 1.

pb_VersionNo
The current version of ProBoards. For example, 4.5.

pb_forum
The internal name of the forum (visible in the URL). For example, support (support.proboards.com) or devinfroseth (devinfroseth.proboards.com).

13. Applying it all to ProBoards
Now you've learned a lot of important information and you just have to learn how to apply it to ProBoards. Manipulating elements and getting data is how most ProBoards codes are created, so be sure to get very familiar with those sections of this tutorial. In this section, we'll take a look at a few popular ProBoards codes and I'll break them down for you.

Remove "Hey X.." Text
This code removes the PM text at the top of every page.

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

By this point you should be able to decipher what this code does by yourself. getElementsByTagName() is used to get an array of every <TD> tag on the page, and it's CSS display attribute is set to none.

Resize Forum Width
This changes the forum width to the variable forumWidth.

<script type="text/javascript">
var forumWidth = 700;

var table = document.getElementsByTagName("table");
for ( i = 0; i < table.length; i++ )
{
    if ( table[i].width == "92%" )
    {
        table[i].width = forumWidth;
    }
}
</script>

The variable forumWidth is set to 700. This variable will be the new width of the forum. A loop is created with the variable i, and will once for each table on the page (table.length). table[i] is used to get the current table element as the loop iterates. Each table on the page is accessed once by the block of code in the loop. If table[i]'s width is equal to 92%, the width will be set to forumWidth.

Switch-It
The Switch-It code changes a bit of text on a page to a different bit of text.

<script type="text/javascript">
var font = document.getElementsByTagName("font");

function switchIt(oldText, newText)
{
    for ( i = 0; i < font.length; i++ )
    {
        var f = font[i].innerHTML; // the current font's content
        if ( f.match(oldText) && !location.href.match(/(headers|modify)/))
        {
            font[i].innerHTML = f.replace(oldText, newText);
        }
    }
}

switchIt("guest", "visitor");
switchIt("member", "registered user");
</script>

First, the variable font is set to an array of every font element on the page. Then, a function is created so that the Switch-It code can be reused. This function has two parameters oldText and newText. A common loop is created that will check every font element. The variable f is set to the current font element's innerHTML every time the loop runs. Then, an if() statement is used to try to find a match for oldText. Also, a location check is used to make sure the text isn't being replaced on the headers/footers page or a page where some user-inputted text is being modified. If both of the conditions are true, font[i].innerHTML is changed. All instances of oldText are replaced to newText when the function is called.

14. Some Final Advice
This chapter of the tutorial is intended to teach you how you can code more efficiently and effectively. Knowing the syntax of the coding language is only half of the battle.

14a. "Why does this work?"
Every time you write a code, you should ask yourself this question. There's more to coding than writing syntax. You need to understand why your syntax is doing what it is doing, and this will help you write more complex codes in the future. This can't really be taught - it is up to you. Study your own code and the code of others. There's over 1,000 codes written just for ProBoards - look at them. I'm not telling you to copy others' codes, but look at how they write their codes and try to understand what each part of their code is doing. Take the code and play with it on a test forum. Use Google to search a bit of code that you aren't familiar with. Ask others for advice. Knowledge is power, and ignorance is unacceptable.

14b. A Good Developing Environment
Being able to read your code while you are writing it is helpful, to say the least. I sincerely hope that you aren't writing your code in Microsoft Word or the ProBoards headers/footers textareas. At the very least you could use Notepad, but I'd suggest downloading a decent text editor. The most popularly used downloadable text editor software is Notepad++. Notepad++ has syntax highlighting, which colors your text as you write it - making important text stand out more and less important text more obscure. There are a plethora of other features that Notepad++ provides, such as the ability to mark a line, line numbers, and much much more. Compare the two environments below:



Notepad++ is a good text editor to write your code in, but what about testing your code? You'll need an updated browser, for sure. When you begin making more complex codes, you'll need an updated version of every popular browser (Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari). These don't take up too much space and are free to download. For coding, I'd suggest first using Mozilla Firefox - but that's just my preference.

Every browser has plugins that can be installed to help with coding, but I'll only be going over Mozilla Firefox in this tutorial. You can easily search Google to look for one of these addons if you do not use Mozilla Firefox. There are two important addons for Firefox that you should have if you're a web developer: Firebug and Web Developer Toolbar. These plugins can be used to analyze a page and check JavaScript errors easily.

14c. A Good External Environment
Not only should you have a good environment going on on your computer, but you should also have a good environment around you (in real life!). These tips should definitely help you.

Get a drink before you begin coding. I go through Coca-Colas like crazy when I'm coding. If you don't like Coke, grab a water or some beer - your choice (though I wouldn't suggest coding while drunk, bad things can happen!).

Eat before you code. Your brain works better if your body is satisfied. You probably shouldn't eat while you are coding - eat before!

Clean your desk.. and grab some scratch paper. Scratch paper can be helpful when you are coding, you can quickly jot down notes and scheme how things will work. You could use a text editor for this, but you have a bit more freedom when you're writing on a piece of paper.

14d. Some Useful References FOR YOU!
Here are some tools that I use constantly when I'm developing. Some of them may seem obvious, but they're beyond useful.

CTRL+U (View Source) - View the page source when you're coding, or to look at other people's codes
google.com - Enter a function's name followed by "js" and hit search
devshed.com - Programming and web design discussion forums
Regular Expressions Cheat Sheet - The best cheat sheet that I have used for Regular Expressions
W3 Schools - Tutorials for a number of programming languages, and a try-it-yourself editor for testing JavaScript
W3C - The World Wide Web Consortium, stay up to date on coding standards and practices

15. Conclusion
I hope you've enjoyed this tutorial and I hope that it has taught you something. Remember that there is ALWAYS room for improvement. Also remember that this guide is simply an introduction! Do some research to expand your knowledge on each of the basic things that I've taught you and you'll be a solid coder in no time.

I'm heading to BCT for the U.S. Army in a few days here (Aug 2011) and I probably won't be back until the end of this year (2011), so I won't be able to answer questions. There are plenty of other coders that can help you, so be sure to ask them! If anybody notices any errors in this guide, feel free to correct them. Not all scripts have been tested extensively.

Written by Devin Froseth - devinfroseth.proboards.com[/font]

[uzi]

I promised I would make this before I left and I finally completed it. I'm hoping I posted this in the correct place and whatnot, as I don't usually see tutorials in this forum (though I have before).

Hopefully someone can find it useful - the previous two versions were pretty popular.

[jsher]

Very Nice.

Do you have a link to the first two versions?

[uzi]

Edition 3
Edition 2
Edition 1

[SubDevo]

Nice job Devin.

pb_skin
The user's current active skin ID. For example, 1.

Just a small correction: pb_skinid

[uzi]

Fixed, thanks.

[Jordan]

Very nice tutorial, I wish I had something like that when I was starting.

[uzi]

Thanks, me too! Unfortunately I'll have to rewrite some of this for PBv5, but even then I doubt JavaScript will be used then as much as it is now.

[Former Member]

And I'm the first one to post in this thread that will actually use it (hopefully). I've already skimmed through it and plan to give it a thorough reading in an hour or so, when I'm pumped up on Mountain Dew. Thanks a lot for this, Devin. Seriously.

[uzi]

Hehe thanks, have fun reading it. Hopefully it's easy to read.. when I start writing it just becomes a rhythm

[Former Member]

It's really easy to read, but my opinion could be biased. I've already read half of JavaScript: The Missing Manual and a tutorial on DOM by Jordan. I knew a little about variables, data types, conditional statements, loops, operators, and parameters. I can read JavaScript pretty well already. It's just editing/writing it that's my problem, especially since the book didn't delve too deeply into DOM. D: One day, though! I think I feel confident enough after reading this to mess around with things on my test forum. :3 (Expect to see me in coding support a lot?)

[kokotea]

A big Thanks to you.