Post by Devin Froseth on Aug 20, 2011 23:44:47 GMT -5
Introduction to JavaScript for ProBoards - 2nd Edition
Written by: Devin Froseth
1) Introduction
Have you ever wanted to start making your own codes for ProBoards, but you have no clue where to start? This tutorial should get you on the right track to making your own hacks and scripts. Please note that in order for this guide to be effective, you should have at least a rudimentary knowledge of HTML and CSS. The scripts and methods that this tutorial highlights are intended to teach you the basics of modifying the layout and get you started. If you feel that you are getting overwhelmed, get a piece of scratch paper, open up a text editor, or try taking it slowly.
2) How It Works
This tutorial is built around teaching you how to find the content you want to edit, then doing what you like to that content. A very high percentage of scripts for ProBoards are made for the purpose of doing so, some being simple, and some being more complex. We first find our element, make sure it is the right element we are looking for, then editing what we want to be edited. A critical point that must be remembered is that you must place the script in the right place. Scripts must be placed AFTER the element you are editing, so that the script can find the element. If a script previously placed on the page alters the element you are trying to find, your script may be ineffective.
3) Starting and Editing Your Script
Before we start writing our script, how about we start it? To start a script, simply write the following:
The type attribute of the script tag is not necessary, but we include it because it is a good practice to maintain.
Ending a script is just like ending any other tag in HTML, you simply write:
It is also a good practice to add
at the beginning of your script, and
at the end of your script, so the script won't be shown in browsers that can't execute JavaScript.
If we put that all together, we get the following:
4) Comments and Tabbing
This section will teach you how to place comments and get in the habit of spacing your script. Neither of these will affect what your script does, but both will make your script easier to understand and easier on the eyes.
4a) Comments
Comments are lines of text that you can write in your script, and let your client or yourself know what is happening.
Those are pretty self-explanatory, so let's move along to the tabbing section.
4b) Tabbing
Tabbing and spacing serve the purpose of making your script look more organized, and that is about it. It is a good habit to get into, and try finding your own style. Most styles of tabbing are built around putting tabs before each line that is inside of brackets. For example, see:
Also notice the line breaks (new lines) throughout the script. Please note that that is simply my style, and you should develop your own. Now compare that script, to the same script, but without spacing, tabbing, and comments.
I'll let you decide which you think looks better.
5) Strings and Variables
This section will teach you about strings and variables, you must pay close attention in this section.
5a) Strings
Strings are groups of characters.
The value of that string is "This is a string" (without the double quotations). You can also stop the text portion of a string and add in a variable:
The first line defines the variable "a". The second line defines variable "b" as "My name is John Doe". The first double quotation started the text portion of our string, then we had our bit of text, then I ended the text portion of our string, and added the value of variable "a". Here are a view examples for you to look at:
After looking at those, you might be saying, what if I want to use a " or ' inside of a string. To do this, you must do what is called "escaping" it. To escape a character, you must add a backslash before the character. For example, " would become \".
That should be about all you really need to know about strings to get started with JavaScript, let's take a look at variables now.
5b) Variables
Variables are like placeholders in your script. Variables store information, shorten your script, and make the same info easy to reuse.
The 'var' prefix lets the browser know that you are defining a variable. variable_name represents the name of the variable, please note that this is case-sensitive. The equal sign says that variable_name is equal to "contents of variable", and the semicolon lets the browser know that that line of script is over. Please note that semicolons are NOT mandatory. Don't use semicolons after left parenthesis/braces.
You could also set a variable to equal the contents of another variable:
This line says that the contents of variable_two are equal to those of variable_one. Another cool thing you can do with variables is..
Now there are several different things we can do with variables, which you will learn more about later in this guide.
5a) Arrays
Arrays are used to store multiple values in one variable. There are several ways in which you can define an array:
That should explain itself pretty simply. You may wonder why we start at array_name[0], rather than array_name[1]. This is because JavaScript starts counting at 0, PLEASE REMEMBER THIS.
There are many other ways to define an array:
or
or
Those will all do the exact same thing as each other. Let's take a quick look at the document.write() method. That method simply writes text to the document (page). Here is an example script:
Do not be overwhelmed by that script. That script simply defines the values of the array, then writes the value of fruits[1]. If that script was placed on a web page, it would add the text "Oranges" (without the double quotations) to the web page.
6) Grabbing Your Item
This section will teach you how to pull your item from the HTML on the web page, which in this case is ProBoards. There are several ways to find your element, but you must know its properties. On your web browser, go to View -> Page Source (CTRL + U in Mozilla Firefox), and look for your element. Press CTRL+F and search (possibly the text inside of your element, or an attribute you may know) to find your element. The three methods of grabbing the item you are looking for are described below.
6a) By Tag Name
This method will grab your item by its tag name. "Tag name" refers to the name of the element. For example, the <font> tag's tag name would be 'font'.
This will save the table element to the variable "table". That does nothing now, because we have not actually picked which table to use. The tag name "table" could be replaced by any tag you like.
6b) By ID
If the ID attribute of the tag is defined, you can pull the item by the ID.
We'll go over the rest of that script later, but you can see how it pulls the element with the first bit. An example of this that can relate to ProBoards would be the forum jump dropdown. The forum jump dropdown is one of the only few ProBoards elements that has an ID assigned to it, and that makes it a lot easier on us. The ID of that dropdown is "forumjump".
That script would pull and hide the forum jump.
6c) By Form
Forms are very simply to pull from, so long as it, and all of its children (the elements inside of it) have their name attribute defined. Let's take a look at this example script:
This example will make a form then change the contents of its username field, you can probably find out what it means by looking through it quickly. You can relate the method of pulling by using a form with the posting form on ProBoards.
First this script uses an if statement (which you will learn about shortly) to first check if the form "postForm" is on the current page. postForm is the name of the posting form. The name of the textarea of the posting form is "message". So "document.postForm.message" would grab that textarea, then we set the "width" attribute to "100%".
7) Loops
Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true. That statement, taken from w3schools.com, sums up the use of loops perfectly. There are two types of loops that we will be going over, the "for" and "while" loops. Loops can save you from writing a nearly identical block of code repeatedly, and save you an immense amount of time.
7a) For
The for loop is used to execute the same block of code a specified number of times. Let's take a look at the syntax of how to use a for loop:
Now that says that the variable "loop_var" is equal to "start value", the loop will execute as long as "loop_var" is less than or equal to "end_value", and to add "increment" to "loop_var" every time the loop runs. This may seem overwhelming, but there is nothing to fret about. Let's look at a working example:
That script says variable 'i' is equal to '1', the loop will execute so long as variable 'i' is less than or equal to 3, and every time the loop runs the math equation 'i + 1' will occur. Then we use document.write() as the block of script to be executed. That code would simply write "This is sentence 1. This is sentence 2. This is sentence 3.". I'll show you a way to relate this to ProBoards later, in section 8.
7b) While
The while loop is used to execute the same block of code while a specified condition is true. The syntax to use for this script would be:
The operator <= could be any operator, such as !=, ==, <, >, >=. There will be more on operators in the next section. That script says "while loop_var is greater than or equal to end_value, the block of code will be executed.
That script will do the exact same thing as the for loop example I showed you earlier. First I defined the variable 'i' as '1', then I said 'while i is less than or equal to 3, write "This is sentence #.", and do the math equation 'i + 1'.
7c) Break
The break command will tell the loop to stop executing. This is useful so that the script doesn't run forever and cause the browser to crash, or that the loop doesn't run longer than you want it to.
Here is the example script from before with break added:
Adding in the break tells the while statement to stop running. Since the break is ran during the first execution of the block of code, the code will only run once. You can use an if statement to prolong the duration of the loop while using break. Now let's learn about those if statements that I've been talking about.
8) Conditional Statements
Conditional statements are used to execute different blocks of code depending on whether a certain condition, or multiple conditions are true. Before we start all that, let's look at a few comparison operators.
"Comparison operators are used in logical statements to determine equality or difference between variables or values." - w3schools
Comparison operators are what you will be using to compare things to each other. Here are all of the comparison operators:
Another thing I would like to go over now is the match() method. Instead of using an operator, you can use match(). The match() method will search for a specified value in a string, and we can use this in a conditional as well. We'll be seing more of this later, so don't forget about it.
8a) If Statement
The if() statement is used to execute a block of code if the statement defined in the parentheses is true. Let's take a look at the syntax:
That says "if the condition is true, run the block of code". Let's say we want to run a script that outputs "adult" if the variable is over or equal to 18.
Let's find a way to relate this to ProBoards. A good method would be a simple board width resize script.
8b) Else and If Else Statements
Let's add in the else() method now. This will add another condition saying that if the if() statement was not true, then run this block instead. Let's take a look at the syntax then:
Take a look at that and you should see that it is pretty simple. Here is an extended version of the earlier age script we just made.
As you can see, it is pretty straightforward. Let's take a look at else if() statements now. An else if() statement allows multiple conditions to be checked, and depending on the correct statement that block will be executed. It's not as difficult as it may seem, let's take a look at the syntax once again:
That is the basic syntax, as you can see it is just a little extension of what we had before. Let's take a look at a different example:
This example should help you understand how to write an else if() statement.
8c) Regular Expressions
Regular expressions aren't a type of conditional statement, but I put it in this section of the tutorial because this is where you'll be using them mostly. Regular expressions define a pattern of characters. There are numerous different modifiers and properties that you can use, but I am only going over several. You are probably not understand what I am saying right now, so study this example.
Now I will probably need to explain that to you. First I made the div, then I pulled it. The next line uses the match() method to see if the innerHTML (contents) of the div I just pulled equals the string in the parentheses. Let's look at what is inside of the parentheses:
/The dog is (.+?)\./i
The first forward slash ( / ) defines the beginning of a regular expression pattern, and the second forward slash defines the end of the pattern. First we check to see if the innerHTML of the div matches "The dog is (.+?)\./i". So, what does the (.+?) mean? The parentheses ( ) mean you are looking for a group of characters inside the parentheses. If you use parentheses, the contents of the parentheses will also be saved for use later, which you will learn about in a moment. The . (dot) defines any character other than a newline. The + (plus sign) defines that one or more instances of the pattern may occur. The ? defines that one or zero instances of that pattern may occur. So since the . (dot) defines any character, the + (plus sign) says that more than one character can occur in the pattern, which is obviously necessary in most cases. Then the ? says that zero or one instance of THAT pattern may be matched. I'll break it down further for you, since I'm having a hard time writing this, and you are probably having a hard time understanding. If it were simply (.), that would match one of any character other than a newline. If it were (.+), it could any character or any group of characters. And the ? just says that the pattern may or may not occur, so it is a good idea to add it just in case the pattern doesn't occur. So (.+?) matches ANY group of characters (other than a newline, of course), it took me a while to explain that, eh?
Anyways, after the (.+?) in that expression we were working on, you'll see '\.' (without the quotes). '\.' simply matches the period that was in that sentence in the div, I just had to escape it because it is a sensitive character that must be escaped in a regular expression. At the end of that you will see '/i', the forward slash ends the expression, and the 'i' is an attribute which says that the expression is not case sensitive.
Here is a table briefly highlighting some major characters to know:
Here are some examples for you, that you might use in a script for ProBoards:
9) Editing Your Item
Now we get to actually do stuff. We'll be editing the items on the page and customizing them to your liking using what we've learned in this guide. Here is the syntax for editing the attribute of an item.
So let's make a little script to change the URL of a link:
That was easy enough, wasn't it? I'm sure you'll be able to find several ways to apply this to ProBoards.
9a) Some Attributes
There are many different attributes of an element you can change, here is a list of some you might use:
9b) Removing an Item
There are two ways of removing an item that I will go over. One method will simply hide the item, so it will still be on the page, just not visible. The other method completely removes the element from the page.
The first method, which simply hides your element, is
where item is the item you want to hide of course. And the method that removes it is:
That finds the parent (the item containing the one you are dealing with), and removes "item", its child. You'll learn more about trees in section 11.
10) Creating an Element
This section will teach you how to create a new element and place it where you want to.
10a) Creating Your Element
To create our element, we will be using the createElement() function. Let's take a brief look at the syntax, which is pretty simple:
Pretty simple right? Let's make a new span as an example:
10b) Setting Its Properties
Let's customize our element with some properties. Here are a few example properties, this is just like modifying an element that is already on the page, as you learned earlier.
10c) Placing the Element
You can easily place the element using the two methods below.
The appendChild() method will place your element at the end of the parent you put it in. Let's take a look at the syntax:
Simple enough, a really easy method of adding your element where you want it. But what if you want your element to be placed at a certain spot in its parent? That can be done with the insertBefore() method, let's look at the syntax for that then.
Take a look at an example of that now:
Now look at that, we made a new line break (<br>) and inserted it before the second link, following the syntax shown above. We also incorporated the getElementsByTagName() method, and the [1] tells us that it is the second link. Remember, JavaScript starts counting at 0!
11) Some Other Methods
Here are some other methods you may find useful that couldn't fit into other categories.
11a) Replace
The replace() method replaces the text in a string. See the syntax below:
Again, pretty simple, here is an actual example now:
The output of that script would be "Hello, I am Jane. Jane Doe is my name.". Also notice in the regular expression portion of that, I used "gi". Remember that "g" makes the regular expression global, so it finds all occurrences of "john", if the "g" modifier was not included, only the first instance of "john" would have been replaced. And of course, the "i" modifier, makes it case-insensitive, so I can capitalize it however I like.
11b) Split
The split() method will turn a string into an array. But first, here is the syntax:
The first parameter, "separator", tells the script where to divide the string at. If the separator was a space, then the string would be split at every space. The times_to_split parameter, tells the script how how big to let the array get, I won't get into detail with that parameter because that is very scarcely used in any type of hack for ProBoards. Here is a simple example:
We turned the my_cars string into an array. That is exactly equivalent to:
You can use this method for several things on ProBoards, such as pulling the users online list from the info center. You'd just have to split the innerHTML of the cell after the first line break. For a challenge, go try and do that yourself.
12) Trees
I am going to try to make this section brief. DOM Trees are like a family tree or hierarchy of the elements you are dealing with. Here is a brief model of a simple tree:
*PLEASE NOTE: By tabbing and spacing, a #text node is added, so the following table would not be 100% accurate, but it will accurately teach you about the hierarchy of items.
The tree of the table above is shown below:
*Please note that every instance of #text refers to a text node. While this is not actually an element, it is still considered a node. This is just plain text, you can create a text node with JavaScript by using createTextNode().
So you can see the hierarchy in that tree above, and it should be pretty easy to understand.
12a) Parent
In JavaScript, a parent is a node that is containing your curent node. The parentNode() method grabs the parent of your current item.
Using the table above, use we are going to pull the br with the id "baby_br". And with that, we will pull the table containing it.
That bit of code just pulled the_table, using DOM and "baby_br".
12b) Children
In JavaScript, a child is a node that your current node contains. There are a few child node methods that you will learn about now, childNodes, firstChild, and lastChild.
Let's look at childNodes first, we are going to pull the first #text node of the font tag containing "baby_br".
Or, we can pull that first #text node using the firstChild method:
And finally, lets pull that last text node inside of that font tag.
12c) Siblings
In JavaScript, a sibling is a node that has the same parent as your current node, and is on the same level of the tree. For example, the first #text, <br>, and second #text are siblings. Let's first look at the previousSibling method, by pulling the first text node using "baby_br".
and let's pull the last text node using "the_first_text_node":
13) Custom Functions
A function is best defined as a reusable block of code. Let's make a function that changes "John" to "Jane" in the element "the_div".
13a) Functions With Parameters
In a function, a parameter is a variable or value that is passed into the function. Below is a modified version of the above script, but with a parameter.
Where the function is called, in the "a" tag, you can see that it says "changeName('Jane')" rather than just "changeName". 'Jane' is the value of the new parameter. In the script, "function changeName()" is replaced with "function changeName(new_name)", and in the function, "Jane" is changed to "new_name".
14) Some Useful Stuff
Here is a list of some useful websites you should check out to further your knowledge of coding:
w3schools.com
tizag.com
quirksmode.org
google.com
And I would highly recommending using Notepad++ as a text editor if it is compatible with your operating system.
You can also private message me on ProBoards Support or ProVision for any questions or concerns.
15) Conclusion
Thank you for using my tutorial, all 35,920 characters of it. All comments and questions would be greatly appreciated! I'm hoping that all of this was easy enough to understand, and helped you expand your knowledge on JavaScript. Thank you!
Written by: Devin Froseth
Contents
1) Introduction
2) How It Works
3) Starting and Ending Your Script
4) Comments and Tabbing
4a) Comments
4b) Tabbing
5) Strings and Variables
5a) Strings
5b) Variables
5c) Arrays
6) Grabbing Your Item
6a) By Tag Name
6b) By ID
6c) Through a Form
7) Loops
7a) For
7b) While
7c) Break
8) Conditional Statements
8a) If Statements
8b) Else and If Else Statements
8c) Regular Expressions
9) Editing Your Item
9a) Some Attributes
9b) Removing an Item
10) Creating An Element
10a) Creating the Element
10b) Setting Its Properties
10c) Placing the Element
11) Some Other Methods
11a) Replace
11b) Split
12) Trees
12a) Parent
12b) Children
12c) Siblings
13) Custom Functions
12a) Functions With Parameters
14) Some Useful Stuff
15) Conclusion
1) Introduction
Have you ever wanted to start making your own codes for ProBoards, but you have no clue where to start? This tutorial should get you on the right track to making your own hacks and scripts. Please note that in order for this guide to be effective, you should have at least a rudimentary knowledge of HTML and CSS. The scripts and methods that this tutorial highlights are intended to teach you the basics of modifying the layout and get you started. If you feel that you are getting overwhelmed, get a piece of scratch paper, open up a text editor, or try taking it slowly.
2) How It Works
This tutorial is built around teaching you how to find the content you want to edit, then doing what you like to that content. A very high percentage of scripts for ProBoards are made for the purpose of doing so, some being simple, and some being more complex. We first find our element, make sure it is the right element we are looking for, then editing what we want to be edited. A critical point that must be remembered is that you must place the script in the right place. Scripts must be placed AFTER the element you are editing, so that the script can find the element. If a script previously placed on the page alters the element you are trying to find, your script may be ineffective.
3) Starting and Editing Your Script
Before we start writing our script, how about we start it? To start a script, simply write the following:
<script type="text/javascript">The type attribute of the script tag is not necessary, but we include it because it is a good practice to maintain.
Ending a script is just like ending any other tag in HTML, you simply write:
</script>It is also a good practice to add
<!--at the beginning of your script, and
//-->at the end of your script, so the script won't be shown in browsers that can't execute JavaScript.
If we put that all together, we get the following:
<script type="text/javascript">
<!--
//-->
</script>4) Comments and Tabbing
This section will teach you how to place comments and get in the habit of spacing your script. Neither of these will affect what your script does, but both will make your script easier to understand and easier on the eyes.
4a) Comments
Comments are lines of text that you can write in your script, and let your client or yourself know what is happening.
// this is a one line comment
/* this comment
can span throughout
multiple lines */Those are pretty self-explanatory, so let's move along to the tabbing section.
4b) Tabbing
Tabbing and spacing serve the purpose of making your script look more organized, and that is about it. It is a good habit to get into, and try finding your own style. Most styles of tabbing are built around putting tabs before each line that is inside of brackets. For example, see:
<script type="text/javascript">
<!--
// tabbing example
for(x){
if(y){
alert("hi"); // pop up box that says hi
}
}
//-->
</script>Also notice the line breaks (new lines) throughout the script. Please note that that is simply my style, and you should develop your own. Now compare that script, to the same script, but without spacing, tabbing, and comments.
<script type="text/javascript">
<!--
for(x){
if(y){
alert("hi");
}
}
//-->
</script>I'll let you decide which you think looks better.
5) Strings and Variables
This section will teach you about strings and variables, you must pay close attention in this section.
5a) Strings
Strings are groups of characters.
var variable = "This is a string"; // a simple stringThe value of that string is "This is a string" (without the double quotations). You can also stop the text portion of a string and add in a variable:
var a = "John Doe";
var b = "My name is " + a;The first line defines the variable "a". The second line defines variable "b" as "My name is John Doe". The first double quotation started the text portion of our string, then we had our bit of text, then I ended the text portion of our string, and added the value of variable "a". Here are a view examples for you to look at:
var a = 100; // value of a is 100
var a = 2 + " plus " + 2; // value of a is "2 plus 2"
var a = 2 + 2; // value of a is 4, see a JS math tutorial for more on thisAfter looking at those, you might be saying, what if I want to use a " or ' inside of a string. To do this, you must do what is called "escaping" it. To escape a character, you must add a backslash before the character. For example, " would become \".
var a = 'Mom\'s Car'; // would output Mom's Car
var a = "Mom's Car"; // would output Mom's Car - this is not escaping, just a different kind of quotation
var a = "\"Time is money.\"" // would output "Time is money."
var a = '"Time is money."'; // would output "Time is money." - also not considered escapingThat should be about all you really need to know about strings to get started with JavaScript, let's take a look at variables now.
5b) Variables
Variables are like placeholders in your script. Variables store information, shorten your script, and make the same info easy to reuse.
var variable_name = "contents of variable";The 'var' prefix lets the browser know that you are defining a variable. variable_name represents the name of the variable, please note that this is case-sensitive. The equal sign says that variable_name is equal to "contents of variable", and the semicolon lets the browser know that that line of script is over. Please note that semicolons are NOT mandatory. Don't use semicolons after left parenthesis/braces.
You could also set a variable to equal the contents of another variable:
var variable_two = variable_one;This line says that the contents of variable_two are equal to those of variable_one. Another cool thing you can do with variables is..
var todays_date = new Date(); // save the current date as a variableNow there are several different things we can do with variables, which you will learn more about later in this guide.
5a) Arrays
Arrays are used to store multiple values in one variable. There are several ways in which you can define an array:
var array_name = new Array(); // starts the array
array_name[0] = "contents of the first array item"; // first array item
array_name[1] = "contents of the second array item"; // second array itemThat should explain itself pretty simply. You may wonder why we start at array_name[0], rather than array_name[1]. This is because JavaScript starts counting at 0, PLEASE REMEMBER THIS.
There are many other ways to define an array:
var array_name = new Array("contents of first array item", "contents of second array item");or
var array_name = ["contents of first array item", "contents of second array item"];or
var array_name = [
"contents of first array item",
"contents of second array item"
];Those will all do the exact same thing as each other. Let's take a quick look at the document.write() method. That method simply writes text to the document (page). Here is an example script:
<script type="text/javascript">
<!--
// array example script
var fruits = new Array();
fruits[0] = "Apple";
fruits[1] = "Oranges";
fruits[2] = "Bananas";
document.write(fruits[1]);
//-->
</script>Do not be overwhelmed by that script. That script simply defines the values of the array, then writes the value of fruits[1]. If that script was placed on a web page, it would add the text "Oranges" (without the double quotations) to the web page.
6) Grabbing Your Item
This section will teach you how to pull your item from the HTML on the web page, which in this case is ProBoards. There are several ways to find your element, but you must know its properties. On your web browser, go to View -> Page Source (CTRL + U in Mozilla Firefox), and look for your element. Press CTRL+F and search (possibly the text inside of your element, or an attribute you may know) to find your element. The three methods of grabbing the item you are looking for are described below.
6a) By Tag Name
This method will grab your item by its tag name. "Tag name" refers to the name of the element. For example, the <font> tag's tag name would be 'font'.
var table = document.getElementsByTagName("table");This will save the table element to the variable "table". That does nothing now, because we have not actually picked which table to use. The tag name "table" could be replaced by any tag you like.
6b) By ID
If the ID attribute of the tag is defined, you can pull the item by the ID.
<div id="id_of_element">contents of element</div>
<script type="text/javascript">
<!--
// get element by id example
var new_element_variable = document.getElementById("id_of_element"); // pull the element by its ID
new_element_variable.innerHTML = "new contents of element"; // changes its contents to the new string
//-->
</script>We'll go over the rest of that script later, but you can see how it pulls the element with the first bit. An example of this that can relate to ProBoards would be the forum jump dropdown. The forum jump dropdown is one of the only few ProBoards elements that has an ID assigned to it, and that makes it a lot easier on us. The ID of that dropdown is "forumjump".
<script type="text/javascript">
<!--
// hides the forum jump using javascript
document.getElementById("forumjump").style.display = "none";
//-->
</script>That script would pull and hide the forum jump.
6c) By Form
Forms are very simply to pull from, so long as it, and all of its children (the elements inside of it) have their name attribute defined. Let's take a look at this example script:
<form name="commentForm">
Name: <input name="username" type="text" />
Comment: <textarea name="comment">Place your comment here</textarea>
<input type="submit" value="Post Comment" /> <input type="reset" value="Reset" />
</form>
<script type="text/javascript">
<!--
// form example script
var comment_form = document.commentForm; // pulls the comment form
var comment_form_name = comment_form.username; // pulls the name field
// changes the content (value) of the username field
comment_form_name.value = "new content of username field";
//-->
</script>This example will make a form then change the contents of its username field, you can probably find out what it means by looking through it quickly. You can relate the method of pulling by using a form with the posting form on ProBoards.
<script type="text/javascript">
<!--
// change the width of the posting form's textarea
if(document.postForm){ // if the post form is on the page
document.postForm.message.width = "100%"; // change the width
}
//-->
</script>First this script uses an if statement (which you will learn about shortly) to first check if the form "postForm" is on the current page. postForm is the name of the posting form. The name of the textarea of the posting form is "message". So "document.postForm.message" would grab that textarea, then we set the "width" attribute to "100%".
7) Loops
Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true. That statement, taken from w3schools.com, sums up the use of loops perfectly. There are two types of loops that we will be going over, the "for" and "while" loops. Loops can save you from writing a nearly identical block of code repeatedly, and save you an immense amount of time.
7a) For
The for loop is used to execute the same block of code a specified number of times. Let's take a look at the syntax of how to use a for loop:
for(loop_var = start_value; loop_var <= end_value; loop_var + increment){
block of code
}Now that says that the variable "loop_var" is equal to "start value", the loop will execute as long as "loop_var" is less than or equal to "end_value", and to add "increment" to "loop_var" every time the loop runs. This may seem overwhelming, but there is nothing to fret about. Let's look at a working example:
<script type="text/javascript">
<!--
// example of loops, write a few sentences using for
for(i = 1; i <= 3; i++){
document.write("This is sentence " + i + ". ");
}
//-->
</script>That script says variable 'i' is equal to '1', the loop will execute so long as variable 'i' is less than or equal to 3, and every time the loop runs the math equation 'i + 1' will occur. Then we use document.write() as the block of script to be executed. That code would simply write "This is sentence 1. This is sentence 2. This is sentence 3.". I'll show you a way to relate this to ProBoards later, in section 8.
7b) While
The while loop is used to execute the same block of code while a specified condition is true. The syntax to use for this script would be:
while(loop_var <= end_value){
block of code
}The operator <= could be any operator, such as !=, ==, <, >, >=. There will be more on operators in the next section. That script says "while loop_var is greater than or equal to end_value, the block of code will be executed.
<script type="text/javascript">
<!--
// example of loops, write a few sentences using while
var i = 1;
while(i <= 3){
document.write("This is sentence " + i + ". ");
i ++; // add 1 to i each time the block executes
}
//-->
</script>That script will do the exact same thing as the for loop example I showed you earlier. First I defined the variable 'i' as '1', then I said 'while i is less than or equal to 3, write "This is sentence #.", and do the math equation 'i + 1'.
7c) Break
The break command will tell the loop to stop executing. This is useful so that the script doesn't run forever and cause the browser to crash, or that the loop doesn't run longer than you want it to.
Here is the example script from before with break added:
<script type="text/javascript">
<!--
// example of loops, write a few sentences using while
var i = 1;
while(i <= 3){
document.write("This is sentence " + i + ". ");
i ++; // add 1 to i each time the block executes
break;
}
//-->
</script>Adding in the break tells the while statement to stop running. Since the break is ran during the first execution of the block of code, the code will only run once. You can use an if statement to prolong the duration of the loop while using break. Now let's learn about those if statements that I've been talking about.
8) Conditional Statements
Conditional statements are used to execute different blocks of code depending on whether a certain condition, or multiple conditions are true. Before we start all that, let's look at a few comparison operators.
"Comparison operators are used in logical statements to determine equality or difference between variables or values." - w3schools
Comparison operators are what you will be using to compare things to each other. Here are all of the comparison operators:
Operator What it does
== equal to
=== equal to (value and type)
!= not equal to
> greater than
< less than
>= greater than or equal to
<= less than or equal to
Another thing I would like to go over now is the match() method. Instead of using an operator, you can use match(). The match() method will search for a specified value in a string, and we can use this in a conditional as well. We'll be seing more of this later, so don't forget about it.
8a) If Statement
The if() statement is used to execute a block of code if the statement defined in the parentheses is true. Let's take a look at the syntax:
if(condition){
block of code
}That says "if the condition is true, run the block of code". Let's say we want to run a script that outputs "adult" if the variable is over or equal to 18.
var age = 35; // define the age as 35
if(age >= 18){ // start conditional (if age is greater than or equal to 18)
document.write("adult"); // write adult
} // end conditionalLet's find a way to relate this to ProBoards. A good method would be a simple board width resize script.
<script type="text/javascript">
<!--
// forum width resize
var table = document.getElementsByTagName("table"); // pull the table
for(i = 0; i < table.length; i ++){ // loop through all the tables
if(table[i].width == "92%"){ // if the table's width is equal to 92%
table[i].width = "700"; // make the table's width 700
} // end the if statement
} // end the loop
//-->
</script>8b) Else and If Else Statements
Let's add in the else() method now. This will add another condition saying that if the if() statement was not true, then run this block instead. Let's take a look at the syntax then:
if(condition){
block of code
} else {
other block of code
}Take a look at that and you should see that it is pretty simple. Here is an extended version of the earlier age script we just made.
var age = 10; // define the age as 10
if(age >= 18){ // start the if statement
document.write("adult"); // write if the statement is true
} else { // run this next block if that statement was not true
document.write("minor"); // write if the statement was false
} // end the conditionalAs you can see, it is pretty straightforward. Let's take a look at else if() statements now. An else if() statement allows multiple conditions to be checked, and depending on the correct statement that block will be executed. It's not as difficult as it may seem, let's take a look at the syntax once again:
if(condition){
block of code
} else if(a different condition){
block of code
} else {
block of code
}That is the basic syntax, as you can see it is just a little extension of what we had before. Let's take a look at a different example:
var eating = "Omnivore";
if(eating == "Carnivore"){
document.write("I eat meat");
} else if(eating == "Herbivore"){
document.write("I eat plants");
} else {
document.write("I eat meat and plants");
}This example should help you understand how to write an else if() statement.
8c) Regular Expressions
Regular expressions aren't a type of conditional statement, but I put it in this section of the tutorial because this is where you'll be using them mostly. Regular expressions define a pattern of characters. There are numerous different modifiers and properties that you can use, but I am only going over several. You are probably not understand what I am saying right now, so study this example.
<div id="my_div">The dog is brown.</div>
<script type="text/javascript">
<!--
var my_div = document.getElementById("my_div");
if(my_div.innerHTML.match(/The dog is (.+?)\./i)){
var dog_color = RegExp.$1;
document.write(dog_color);
}
//-->
</script>Now I will probably need to explain that to you. First I made the div, then I pulled it. The next line uses the match() method to see if the innerHTML (contents) of the div I just pulled equals the string in the parentheses. Let's look at what is inside of the parentheses:
/The dog is (.+?)\./i
The first forward slash ( / ) defines the beginning of a regular expression pattern, and the second forward slash defines the end of the pattern. First we check to see if the innerHTML of the div matches "The dog is (.+?)\./i". So, what does the (.+?) mean? The parentheses ( ) mean you are looking for a group of characters inside the parentheses. If you use parentheses, the contents of the parentheses will also be saved for use later, which you will learn about in a moment. The . (dot) defines any character other than a newline. The + (plus sign) defines that one or more instances of the pattern may occur. The ? defines that one or zero instances of that pattern may occur. So since the . (dot) defines any character, the + (plus sign) says that more than one character can occur in the pattern, which is obviously necessary in most cases. Then the ? says that zero or one instance of THAT pattern may be matched. I'll break it down further for you, since I'm having a hard time writing this, and you are probably having a hard time understanding. If it were simply (.), that would match one of any character other than a newline. If it were (.+), it could any character or any group of characters. And the ? just says that the pattern may or may not occur, so it is a good idea to add it just in case the pattern doesn't occur. So (.+?) matches ANY group of characters (other than a newline, of course), it took me a while to explain that, eh?
Anyways, after the (.+?) in that expression we were working on, you'll see '\.' (without the quotes). '\.' simply matches the period that was in that sentence in the div, I just had to escape it because it is a sensitive character that must be escaped in a regular expression. At the end of that you will see '/i', the forward slash ends the expression, and the 'i' is an attribute which says that the expression is not case sensitive.
Here is a table briefly highlighting some major characters to know:
Character What It Does
/ starts and ends the expression
\ escapes a character in an expression
i case sensitive (enter after the ending forward slash)
g global (enter after ending forward slash)
( ) starts and ends a group of characters that will be stored
. any character other than newline
? zero or one occurrence of the pattern
+ one or more occurrence of the pattern
* zero or more occurrences of the pattern
\d a single digit
/D not a digit
\w alphanumeric character including underscore
\W any non-word character
/s a space
/S not a space
[abc] any character in the set
[^abc] any character not in the set
^ start of a string
$ end of a string
| or statement
Here are some examples for you, that you might use in a script for ProBoards:
Example What It Does
(.+?) any group of characters
(\d+)(,\d+)? any digit, may or may not have a comma in it
(x|y) either x or y, replace x and y with text of your choice
9) Editing Your Item
Now we get to actually do stuff. We'll be editing the items on the page and customizing them to your liking using what we've learned in this guide. Here is the syntax for editing the attribute of an item.
element.attribute = new value;So let's make a little script to change the URL of a link:
<a href="http://proboards.com" id="proboards_link">ProBoards</a>
<script type="text/javascript">
<!--
// change color of our link
// pull proboards_link, then change the URL to ProBoards support
document.getElementById("proboards_link").href = "http://support.proboards.com";
//-->
</script>That was easy enough, wasn't it? I'm sure you'll be able to find several ways to apply this to ProBoards.
9a) Some Attributes
There are many different attributes of an element you can change, here is a list of some you might use:
Attribute What It Does
innerHTML contents of the item
style.attribute CSS attribute
style.display visibility of the item
width width of the item
href url of the link (for the <a> tag)
9b) Removing an Item
There are two ways of removing an item that I will go over. One method will simply hide the item, so it will still be on the page, just not visible. The other method completely removes the element from the page.
The first method, which simply hides your element, is
item.style.display = "none";where item is the item you want to hide of course. And the method that removes it is:
item.parentNode.removeChild(item)That finds the parent (the item containing the one you are dealing with), and removes "item", its child. You'll learn more about trees in section 11.
10) Creating an Element
This section will teach you how to create a new element and place it where you want to.
10a) Creating Your Element
To create our element, we will be using the createElement() function. Let's take a brief look at the syntax, which is pretty simple:
var new_element = document.createElement("node_type");Pretty simple right? Let's make a new span as an example:
var my_span = document.createElement("span");10b) Setting Its Properties
Let's customize our element with some properties. Here are a few example properties, this is just like modifying an element that is already on the page, as you learned earlier.
var my_span = document.createElement("span"); // create my span
my_span.innerHTML = "This is my span!"; // change contents of my span
my_span.style.backgroundColor = "#ff0000"; // change background color of my span to red
10c) Placing the Element
You can easily place the element using the two methods below.
The appendChild() method will place your element at the end of the parent you put it in. Let's take a look at the syntax:
the_parent.appendChild(your_element)Simple enough, a really easy method of adding your element where you want it. But what if you want your element to be placed at a certain spot in its parent? That can be done with the insertBefore() method, let's look at the syntax for that then.
the_parent.insertBefore(your_element, a_child);Take a look at an example of that now:
<div id="google_box">
<a href="http://google.com">Google.com</a>
<a href="http://yahoo.com">Yahoo.com</a>
</div>
<script type="text/javascript">
<!--
/* insertBefore() example
putting a line break between the two URLs */
var google_box = document.getElementById("google_box");
var new_linebreak = document.createElement("br");
google_box.insertBefore(new_linebreak, google_box.getElementsByTagName("a")[1]);
//-->
</script>Now look at that, we made a new line break (<br>) and inserted it before the second link, following the syntax shown above. We also incorporated the getElementsByTagName() method, and the [1] tells us that it is the second link. Remember, JavaScript starts counting at 0!
11) Some Other Methods
Here are some other methods you may find useful that couldn't fit into other categories.
11a) Replace
The replace() method replaces the text in a string. See the syntax below:
the_string = the_string.replace(old, new);Again, pretty simple, here is an actual example now:
<script type="text/javascript">
<!--
var the_string = "Hello, I am John. John Doe is my name.";
the_string = the_string.replace(/john/gi, "Jane");
document.write(the_string);
//-->
</script>The output of that script would be "Hello, I am Jane. Jane Doe is my name.". Also notice in the regular expression portion of that, I used "gi". Remember that "g" makes the regular expression global, so it finds all occurrences of "john", if the "g" modifier was not included, only the first instance of "john" would have been replaced. And of course, the "i" modifier, makes it case-insensitive, so I can capitalize it however I like.
11b) Split
The split() method will turn a string into an array. But first, here is the syntax:
string_name.split(separator, times_to_split)The first parameter, "separator", tells the script where to divide the string at. If the separator was a space, then the string would be split at every space. The times_to_split parameter, tells the script how how big to let the array get, I won't get into detail with that parameter because that is very scarcely used in any type of hack for ProBoards. Here is a simple example:
var my_cars = "Dodge Charger, Chrysler 300C, Ford Mustang";
var my_cars_array = my_cars.split(",");We turned the my_cars string into an array. That is exactly equivalent to:
var my_cars_array = new Array();
my_cars_array[0] = "Dodge Charger";
my_cars_array[1] = "Chrysler 300C";
my_cars_array[2] = "Ford Mustang";You can use this method for several things on ProBoards, such as pulling the users online list from the info center. You'd just have to split the innerHTML of the cell after the first line break. For a challenge, go try and do that yourself.
12) Trees
I am going to try to make this section brief. DOM Trees are like a family tree or hierarchy of the elements you are dealing with. Here is a brief model of a simple tree:
<table id="the_table">
<tr>
<td>
<font>
Text in a font tag
<br id="baby_br" />
the br tag is also a child of font
</font>
<br />
<a href="link">my parent is td, my sibling is font</a>
</td>
<td>Text, my parent is TD</td>
</tr>
<tr>
<td colspan="2">text, my parent is TD</td>
</tr>
</table>*PLEASE NOTE: By tabbing and spacing, a #text node is added, so the following table would not be 100% accurate, but it will accurately teach you about the hierarchy of items.
The tree of the table above is shown below:
Table
____________|____________
| |
TR TR
_______|_______ |
| | |
TD TD TD
_____|_____ | |
| | | #text #text
Font BR A
_____|_____ |
| | | |
#text BR #text #text
*Please note that every instance of #text refers to a text node. While this is not actually an element, it is still considered a node. This is just plain text, you can create a text node with JavaScript by using createTextNode().
So you can see the hierarchy in that tree above, and it should be pretty easy to understand.
12a) Parent
In JavaScript, a parent is a node that is containing your curent node. The parentNode() method grabs the parent of your current item.
Using the table above, use we are going to pull the br with the id "baby_br". And with that, we will pull the table containing it.
var the_table = document.getElementById("baby_br").parentNode.parentNode.parentNode.parentNode;That bit of code just pulled the_table, using DOM and "baby_br".
12b) Children
In JavaScript, a child is a node that your current node contains. There are a few child node methods that you will learn about now, childNodes, firstChild, and lastChild.
Let's look at childNodes first, we are going to pull the first #text node of the font tag containing "baby_br".
var the_first_text_node = document.getElementById("baby_br").parentNode.childNodes[0];Or, we can pull that first #text node using the firstChild method:
var the_first_text_node = document.getElementById("baby_br").parentNode.firstChild;And finally, lets pull that last text node inside of that font tag.
var the_last_text_node = document.getElementById("baby_br").parentNode.lastChild;12c) Siblings
In JavaScript, a sibling is a node that has the same parent as your current node, and is on the same level of the tree. For example, the first #text, <br>, and second #text are siblings. Let's first look at the previousSibling method, by pulling the first text node using "baby_br".
var the_first_text_node = document.getElementById("baby_br").previousSibling;and let's pull the last text node using "the_first_text_node":
var the_last_text_node = the_first_text_node.nextSibling.nextSibling;13) Custom Functions
A function is best defined as a reusable block of code. Let's make a function that changes "John" to "Jane" in the element "the_div".
<div id="the_div">My name is John.</div>
<a href="javascript: changeName()">Change Name</a>
<script type="text/javascript">
<!--
// change name to Jane function
function changeName(){
document.getElementById("the_div").innerHTML = document.getElementById("the_div").innerHTML.replace(/John/i, "Jane");
}
//-->
</script>13a) Functions With Parameters
In a function, a parameter is a variable or value that is passed into the function. Below is a modified version of the above script, but with a parameter.
<div id="the_div">My name is John.</div>
<a href="javascript: changeName('Jane')">Change Name</a>
<script type="text/javascript">
<!--
// change name to Jane function
function changeName(new_name){
document.getElementById("the_div").innerHTML = document.getElementById("the_div").innerHTML.replace(/John/i, new_name);
}
//-->
</script>Where the function is called, in the "a" tag, you can see that it says "changeName('Jane')" rather than just "changeName". 'Jane' is the value of the new parameter. In the script, "function changeName()" is replaced with "function changeName(new_name)", and in the function, "Jane" is changed to "new_name".
14) Some Useful Stuff
Here is a list of some useful websites you should check out to further your knowledge of coding:
w3schools.com
tizag.com
quirksmode.org
google.com
And I would highly recommending using Notepad++ as a text editor if it is compatible with your operating system.
You can also private message me on ProBoards Support or ProVision for any questions or concerns.
15) Conclusion
Thank you for using my tutorial, all 35,920 characters of it. All comments and questions would be greatly appreciated! I'm hoping that all of this was easy enough to understand, and helped you expand your knowledge on JavaScript. Thank you!