Introduction to Javascript

[Triad]

This tutorial very briefly covers the basics of JavaScript by using basic vocabulary and showing you how to get started. I'll show you how to actually make something happen in the following tutorials.

Every script that is placed directly into the page source must contain the following tags around it.

<script type="text/javascript">
<!--

//-->
</script>

The red part is optional but recommended as it acts as an HTML comment which comments out all the code in browsers that are incapable of running JavaScript. There will always be that one person who is using an ancient browser, and that's what this is for.

Variables: This is where your high school algebra comes into play. Every programming and scripting language uses them because they are absolutely necessary. A variable simply holds a value that can be accessed or set when needed.

Use the following syntax to declare a variable.

var variable_name;

All this does is create the variable by telling the browser to create a place for it in your memory. To initialize, or give it a value, just use the = sign.

variable_name = "This is a string";

This initializes the variable called "variable_name" with a string of characters. In this case, the string of characters make up a sentence, but you can have HTML or CSS etc. as well.

Here's how you would put it all together.

<script type="text/javascript">
<!--

/*
This is a multi-line comment
that can go as long as you want.
*/

// Declare and initialize the variable
var text = "This is a string";

// Write the text to the document.
document.write(text);

//-->
</script>

The red lines are multi-line and one line comments which are used for notes when scripting. Whenever you start writing codes that are lengthy, you will always want to use them so you can remember what you were doing when you come back to it.

Also, always remember that each statement or line of code ends with a semi-colon. This is where most errors appear when people just begin coding because they forget or misuse them. You don't place them after loops or if statements that open and close with {}. Those are blocks of code that I'll discuss in the next tutorial.

The last thing to show you is concatenation, or the linking of items together.

In Javascript this is very simple as you just use the + sign.

<script type="text/javascript">
<!--

// Declare and initialize our text variable.
var text = "This is a string";

var begin = "<b>";
var end = "</b>";

// Outputs the sentence in bold
document.write(begin + text + end);

// You don't have to use variables.
document.write("<b>" + text + "</b>");

// You don't have to use variables.
document.write("<b>This is a string</b>");

//-->
</script>

Everyone of those statements will output the exact same thing.

---

This was very short, but it's just to get the brain thinking about how it works by having some basic knowledge.

[Triad]

This tutorial is going to be based more on Proboards coding than just general scripting. If you have a good understanding of HTML then by the end of this tutorial you will be able to start making simple Proboards scripts.

if else statements: Your scripts are going to have to make decisions, especially for Proboards, and that's why we have the if statement.

if(expression){
        // True Instructions
} else {
        // False Instructions
}

The expression is what the browser evaluates to true or false. Note that you do not have to have a false path, but you most likely will most of the time. Also note that you can have another expression after the else statement, and that you can have as many else statements as you need.

Below are the different types of comparisons that are available to use in your if else statements.

X == Y	If X and Y are equal
X != Y	If X and Y are not equal
X < Y	If X is less than Y
X <= Y	If X is less than or equal to Y
X > Y	If X is greater than Y
X >= Y	If X is greater than or equal to Y
X && Y	If X and Y have true values
X || Y	If X or Y has a true value
!X	If X has a false value (Think of it as NOT X)

Arrays: For the purpose of the tutorial you need to understand what an array is and how it works. An array is an organized group of variables, usually of the same data type (String, integer, boolean, null) although not required in JavaScript, that makes it easier to store data.

var myArray = [];
var myArray = new Array();

Either way is fine to declare the array variable. To initialize, just add a comma after each value.

var myArray = ["one", 2, true, false, null];
var myArray = new Array("one", 2, true, false, null);

As you can see, we have a string, an integer, a true boolean, a false boolean, and a null value which basically means it has no value. These are all different data types.

To access one of these values we must know it's index. Note that array indexes start counting at 0, NOT 1.

myArray[0] == "one";
myArray[1] == 2;
myArray[2] == true;

and so on...

For Loops: These are the most common loops used in Proboards coding, and probably for all coding because all instructions are set in one line of code.

for(initialization; condition; iteration)

A variable is initialized to a value which is usually an integer, a condition is set which keeps the loop running as long as it is true, and then the variable is iterated or updated/repeated for the next loop.

for(x = 0; x < 10; x++){
        document.write(x);
}

X is initialized to 0; While X is less than 10; Iterate X by 1

This will create a loop that will print 10 integers starting from 0. (0123456789)

For loops are perfect for searching and accessing/initializing arrays as you can just loop through the array using a variable such as x for it's index.

for(x = 0; x < myArray.length; x++){
        document.write(myArray[x])
}

All this does is loop through the entire array and print each value out. length is a property of the array which contains how large the array is. Remember that length starts counting at 1 unlike arrays which start at 0.

---

Now we're going to use all this and make something happen. Note that to view the page source in your browser do View > Page Source.

Many people request how to remove the cell in the welcome table that says "Hey, X, you have X messages", and all you need to know is a tiny bit of JavaScript to accomplish this.

getElementsByTagName(HTML_TAG);

This is a function that returns an array of all the HTML tags on the page that you ask for. So say we want to remove the "Hey, X" cell.

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

Just by looking at this you can probably figure it out. We grab the third table data cell from the document, and use the CSS style object to hide it.

Since that cell is at the top of the page we can easily count ourselves to figure out it's index. However, this usually isn't the case and so we have to use a loop with if statements to find the cell we need.

So say you don't know what the index of the "Hey X" cell is.

<script type="text/javascript"><!--
/*
 * Initialize a variable as an array of all table data elements on the page.
 * We do this so you don't have to write the entire function everytime.
 */
var td = document.getElementsByTagName("td");

for(x = 1; x < td.length; x++){
        if(td[x].className == "windowbg" && td[x-1].height == "50"){
                td[x].style.display = "none;
                break;
        }
}
//--></script>

Loop through all the table data elements on the page.

If the class name is "windowbg" and the cell before it has a height of 50.

Hide the cell.

Terminate the loop since we have found the cell.

I will try to add more examples later, but hopefully you are starting to understand how this all works and goes together. If you want to learn just practice practice practice and experiment.