Categories:

Using the document object to explain objects.

The document object is one of the most important objects of JavaScript. Lets have a look at a very simple JavaScript code. The below script writes out a line of text onto the web page:

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 possesses.

Document Object
Properties Methods
bgColor (changes bgcolor) write (writes something)
lastModified (gives date of document's last change) writeln (writes in new line)
referrer (gives URL of the page that linked here)  
fgColor (changes foreground color (text))  

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:

<script type="text/javascript">
var example
example=document.lastModified
document.write("This page was last modified: "+example)
</script>

Output:

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.

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.

As you learn more about JavaScript, you will bump into more objects. All objects' properties and methods are accessed in the same manner as above- first by specifying the object name, then a dot (.), then the method or property you want to use from it.

Remember, JavaScript is a language of objects- 95% of what you'll want to do with JavaScript will involve simply picking the right object and using it!