Lesson 3- Object concept

Ok, in the last section, we had a little peek into the syntax of JavaScript by looking at the basic user interaction methods. Now, its time to really look into it, and from this, understand the syntax of all JavaScript codes. In this section, we'll march on to:

• Introducing objects-what JavaScript's made of.

• Using the document object to explain objects.

Introducing objects-what JavaScript's made of

Eventually we're going to have to face it, so lets just get it over with. I will now explain to you the fundamental structure of ALL JavaScript codes, because in order to truly understand JavaScript, you'll have to understand the structure of it. JavaScript is a language that revolves around the "object" concept, meaning that the majority of what you do with JavaScript involves merely picking of one JavaScript's pre-made code and accessing it. Uh? You say. Don't worry, I'll clear it up.

Using the document object to explain objects.

The document object is one of the most important objects of JavaScript.
Lets have a look at the very first script we wrote, in the beginning of the tutorial, which was:

document.write("Hi there. This text is written using javascript!")

• "document" is the object in the above example.

• "write" is the method of this object. (Think of it as the arm and legs of this object that allows it to do something-anything.

JavaScript is a language of objects, and all objects (95%) of them have both methods and properties. "Document" is just one of the many objects that essentially make up JavaScript as a language-learn these objects, and you are a JavaScript programmer! It is the object that controls the layout of a webpage-background color, text, images etc. Now, the word "write" is a method of the document object. Most objects have more than one method and property (You'll see what property is very soon), and this is true for the document object as well. Lets have a look at some of the others that the document object possess.

The column on the left are properties of the document object. They are static attributes of the object. Lets say you want to write out the date and time of the last modification to your page onto the screen. Here's what you would do:

var example
example=document.lastModified
document.write("This page was last modified: "+example)

Output: This page was last modified: 10/30/97 03:40:56

Whenever you update your page and save it, this script will display the date and time of this occurrence. Something you can add to the end of your page right now! In this example, "document.lastModified" is a property of "document." Its a static attribute of the current document. In order to show this property, we used the non-static method to write this information out. Notice that we used "+" to put together "This page was last modified:" and example. The "+" sign is used to "combine" strings into one-similar to math, in a sense.

As you can see, as long as you know the object name and what methods and properties it contains, you know how to use it! The majority of commands in JavaScript are referenced by first specifying the object name, than a dot (.), plus the method/property. Now, a confusing part here may be how we discussed the shorthand method of writing out the methods in the " three Basic User Interaction methods" discussed in the previous section, which was:

alert("My name is George. Welcome to my page!")

Where is the dot (.), you ask? And where is the object, or method, or whatever. If you really wanted to, you could have written the above code like this:

window.alert("My name is George. Welcome to my page!")

"window" is really the object here, but there are some cases in which you can omit the object name (it is assumed to be there by JavaScript). Now you're really confused. "So when do I have to write out the complete path", you say. My advice right now is, don't worry about it. To be safe, anything you are not sure, write out the complete path-for now.

Lets try playing around with another document method then. Looking at the above chart, lets use "referrer", which gives the URL of the page that you came from to get here. Lets see what this might be useful for:

<script>
document.writeln("Please thank this site for adding a link to me!")
document.write(document.referrer)
</script>

Ok, maybe not so useful like this, but you get the point.

For easy reference, here is the complete document object model with all its methods and properties listed: (Note: As of JavaScript1.1)

We will eventually use some more of these methods/properties. Meanwhile, feel feel to play around with them.

Now, lets plunge into functions and event handlers!

Lesson 4