Endless Perspective - Open Role Playing :: Practical JavaScript: Applying what you know to webpages

Shin · Last edited by Shin on Sat Oct 22, 2005 3:04 am; edited 5 times in total

In my last tutorial I went over the basics of JavaScript, but I didn't really tell you what to do with them. That was for a reason. You'll need to understand those basic things before actually attempting to apply them.

I'll try to make this tutorial more organized than my last one. For that purpose, I'll use this thread as an index of the topics I plan to cover.

Recommended prior knowledge: Before starting to read this tutorial, you should first be able to grasp everything I posted in my last tutorial. If you have a hard time understanding those things, it may be a good idea to re-read it, or post for help. =)

My last tutorial can be found by clicking here.
______________________________________________________

~Index

1 ) One more thing to learn first...
2 ) JavaScript Functions
3 ) The document and window objects
4 ) Writing to pages
5 ) JavaScript Arrays and more on objects
6 ) Grabbing HTML elements
7 ) Accessing the properties of HTML tags
8 ) Targeting specific areas of a page

-That list is not finalized. It may be modified as I work on this tutorial.

Nothing is stronger than the human spirit. The will to succeed is the strength that will make you successful. The courage to move on is the strength that will carry you forward. The motivation in your mind is the strength that will help you learn. And the power in your heart is the strength that will take you beyond your limits...

Shin · One more thing to learn first... (Fri Oct 21, 2005 6:37 pm)

~One more thing to learn first...

I probably should have covered this in my last tutorial, but I thought that tutorial was long enough already. =P

Remember when I said that JavaScript is an object-oriented language? Well I didn't cover exactly what that means. It means what it implies, really. That JavaScript is oriented around objects.

In the programming/scripting world, and object is basically something that has it's own set of properties and methods associated with it. A property is usually something that (for lack of a better word) describes the object. A method is an action that the object can perform. Understand? I hope so...

When you access a property or method of an object, you use what is called "dot notation". If you have coded in Java or C++, you'll note that the syntax for this is exactly the same. It basically looks like...

object.property

or...

object.method

I put the dots in bold so you could see them a bit better. It's basically saying object dot method, or object dot property. Simple enough right?

You'll be dealing with objects a lot while using JavaScript, so understanding that is important. Later I may even post a tutorial on how to make your own custom objects, with whatever properties or methods you want... But you'll need to understand the stuff in this tutorial before you'll be ready for that. So keep on reading =)

Nothing is stronger than the human spirit. The will to succeed is the strength that will make you successful. The courage to move on is the strength that will carry you forward. The motivation in your mind is the strength that will help you learn. And the power in your heart is the strength that will take you beyond your limits...

Shin · JavaScript Functions (Fri Oct 21, 2005 7:08 pm)

~JavaScript Functions

Functions... One of my favorite aspects of coding. A function is essentially a block of code that executes whenever you call it. This can save a lot of time and effort when writing a script, because if you need the same block of code to be executed at different moments, for different reasons, you can have a whole block of code executed, just by calling the function.

The first step is declaring the function. Like so...

function functionNameHere(parameter1, parameter2)
{
//coding here
}

The functionNameHere part represents the name of the function. It can be basically anything you want. The proper way to name it is to give it a name that describes what it does. That way it's easy for you to remember what it does if you happen to look at the script a year later, or if someone else reads it.

The parameter1, parameter2 part... functions can have parameters passed to them (any number is allowed), then you can use that parameter in the function. The parameters are given within that set of parenthesis I used. Each parameter must be seperated with a comma (,). The parameters are treated as variables, so once again, you can name them whatever you want. =)

When you make your own functions, it is not required that you give it parameters.

function thisFunction()
{
/*
This function has no parameters.
Notice how there is nothing in the above parenthesis.
The parenthesis is where the parameters would have
been put if parameters were used here.
*/
}

It's important to remember that when you call your function, if you declared it with parameters, you must use those parameters when you call it.

This is how you would call a function...

functionNameHere(parameter1, parameter2);

Simple, just use the name and the parenthesis, and any parameters if the function uses any.

To provide an example, I'll make a simple function that adds one onto a number. Yes I remember the ++ operator, so this function isn't necessary at all, but I just wanted to give a simple example. =)

function addOne(number)
{
return number + 1;
}

I used a new statement in this function. The return statement. this is a simple one. It just returns a value to the function call. Meaning that when you call that function, it will return that value. Because I had the value returned, I can use it outside of the function, after calling it. So the return statement is very useful. =)

Example of using the above function:

var num1 = 5;

var num2 = addOne(num1);

I called the addOne() function that I declared above, and as the parameter I used the num1 variable I made. Since the value is returned to the call from the function, I can then use the value for another variable, in this case num2.

"Wait, why did you use 'number' inside the function, and used something else when you called it?"

Because the name of the parameter only matters inside the function. In the function declaration, the parameter is treated as a variable, and so inside that function, you must use that same parameter name. However when you call the function, you may use a different variable name (as long as you declared it first), because the variable you pass to the function will be treated as the parameter name.

In other words, even though I sent num1 to the function, the function is understanding it as number, like when I first declared the function. Understand that? I hope so...

Note: You do not always need to return the value. This only helps in a situation like in the above example, where I wanted to use the new value after the function call.

That's how functions work in a nutshell. =)

Nothing is stronger than the human spirit. The will to succeed is the strength that will make you successful. The courage to move on is the strength that will carry you forward. The motivation in your mind is the strength that will help you learn. And the power in your heart is the strength that will take you beyond your limits...

Shin · Basic document structure (Sat Oct 22, 2005 2:45 am)

~The document and window objects

Now onto actual webpage stuff. The two primary JavaScript objects that you'll be using are the window object and the document object.

Most of what you'll do on the webpage is done with the document object. The document refers to the HTML document that is currently loaded on the page.

The window refers to the actual browser window.

(You'll be using a lot more objects than these, but these are used the most)

Since the document is contained within the window, the window is the higher level object, and because of that you can reference the document like this...
window.document

However you wouldn't usually do that, unless you're targeting a different window (we'll talk about that in another tutorial). Since the scripting is happening within the window, you don't need to specifiy the window when referencing the document. In fact, most of the window's properties can be accessed without specifying the window, for that very reason. (There are some that do require you to specify the window however.)

The document object has many, many properties and methods. Some of which refer to HTML tags in some way. That makes sense right? Since the document refers to the HTML document in the page.

The window object has properties and methods that affect something about the window itself, or something that the browser itself needs to handle.

I'll get into greater detail on these objects later. The only thing you really need to know for now is what these objects are. =)

Nothing is stronger than the human spirit. The will to succeed is the strength that will make you successful. The courage to move on is the strength that will carry you forward. The motivation in your mind is the strength that will help you learn. And the power in your heart is the strength that will take you beyond your limits...

Shin · Writing to pages (Sat Oct 22, 2005 2:57 am)

~Writing to pages

Alright, now you know about the document object, now to write to it. You'll need to familiarize yourself with a simple method of the document object. The write method. This method does exactly what it implies. It writes a string to the document. Remember the dot notation I mentioned earlier? That's how you'll access this method (or any other) of the document object. Therefore, the syntax is as follows

document.write("This is text that will be written to the page");

Of course, the value of variables can also be written...

var myString = "Hello";

document.write(myString);

Understand? Simple right? Now, since you're writting to an HTML document, anything you write will be treated as HTML. Therefore you can also include HTML tags when you write to the page...

document.write("<b>This text is bold!</b>");

Etc, etc.

That's all there is to that part. Very simple. Now because I'm the one teaching you, I'll give a few more advanced tips also, later on. =)

Nothing is stronger than the human spirit. The will to succeed is the strength that will make you successful. The courage to move on is the strength that will carry you forward. The motivation in your mind is the strength that will help you learn. And the power in your heart is the strength that will take you beyond your limits...

Shin · JavaScript Arrays and more on objects (Sat Oct 22, 2005 3:26 am)

~JavaScript Arrays and more on objects

Breaking off from the webpage stuff for a moment, this is something I'll need to cover before continuing with more webpage stuff...

Arrays. What is an array? An array is basically a variable, that holds multiple pieces of data at once, instead of just holding a single value. How do you create one? Well come back to that... keep reading...

An important note on objects: There are some objects that can not be directly accessed. These objects will require you to first make an instance of that object, then work with that instance, instead of the object itself. An instance of an object is basically an object that you make by declaring it to be of the same type as another object. The act of creating an object this way is called "constructing". The original object (that you used to make the other object) is called the "constructor". Understand? I hope so...

To declare an instance of an object you would use the new operator. I'll give an example of this with arrays...

Back to arrays, in order to create an array, you'll have to declare a variable as an instance of the Array object. Like so...

var myArray = new Array();

Understand the syntax? I hope so because it's that simple. The Array object is the constructor, being used with the new operator to make a new arrray, which is called myArray.

Now you know what an array is, and how to make one. Now, how do you place multiple values in it?

There are two ways: the first is to pass each value as a parameter to the constructor (the same way you would with functions).

The second (and more useful) way is to declare them manually (I'll show how in a second...). Each individual value of an array has an index number. The index number is used to access that value. the index number starts at 0 for the first value, then increases by 1 each time, so that...

index 0 is the first value
index 1 is the second value
index 2 is the third value
etc, etc.

Now that you know that, you can use that to manually set values in the array, using this syntax...

arrayName[indexNumber]

arrayName refers to the name of the array, and indexNumber of course refers to the index number.

So now, using the array I declared earlier (myArray), I'll place the following values into it: 56, 234, 3167, and 500.

myArray[0] = 56;
myArray[1] = 234;
myArray[2] = 3167;
myArray[3] = 500;

Simple right? Good. By using the appropriate index number, you can also grab the value there and do something with it, like writing it to the page...

document.write(myArray[2]);

That will write the number 3167 to the page. Understand?

"Hey you said that Array is an object... does that mean it has properties and methods?"

Yes it does. The Array object has it's own set of methods and properties, most of which you don't need to worry about just yet. =)

However a property of the Array that you should get familiar with quickly is the length property. The length property is the number of values within the array. Retyping what I had above...

var myArray = new Array();
myArray[0] = 56;
myArray[1] = 234;
myArray[2] = 3167;
myArray[3] = 500;

The length of the array is 4 because there are a total of 4 values. This may be confusing sometimes since the first index is 0, but try not to think about the indexes when thinking of the length. Instead just think about how many values are actually there. In this case, 4.

Now to get the length of myArray, you'll use a syntax which should be familiar to you by now...

myArray.length

Understand why I did it that way? If not, re-read my 2nd post in this thread (the one titled: "One more thing to learn first...").

That's all you'll need to know about arrays for now. =)

Nothing is stronger than the human spirit. The will to succeed is the strength that will make you successful. The courage to move on is the strength that will carry you forward. The motivation in your mind is the strength that will help you learn. And the power in your heart is the strength that will take you beyond your limits...

Shin · Grabbing HTML elements (Sat Oct 22, 2005 10:30 pm)

~Grabbing HTML elements

Back to website stuff. Say you want a script to modify a certain area on the page. You'll first need to grab that area first right?

Become familiar with two very helpful methods of the document object: getElementsByTagName and getElementById

getElementsByTagName does exactly what it implies. It takes a parameter, and that parameter is the HTML tag you want to grab.It then returns an array containing each instance of that HTML tag, in the order that they appear in the document. In other words...

var fontTags = document.getElementsByTagName("FONT");

...Will place all instances of the font tag into an array named fontTags.

getElementbyId will grab an HTML element by the ID you gave it in the document. You give a HTML tag an ID within the tag, like you would any other attribute...

For example:

<div id="someID">blah</div>

The ID is given the same way you would any other attribute, within the tag itself.

Now you can grab that specific tag like this...

var thatDivTag = document.getElementById("someID");

Once you grab the tag you were looking for, you can modify it's different attributes within the code. How do you do that? My next post will tell you. =)

Nothing is stronger than the human spirit. The will to succeed is the strength that will make you successful. The courage to move on is the strength that will carry you forward. The motivation in your mind is the strength that will help you learn. And the power in your heart is the strength that will take you beyond your limits...