Free Webmaster Resources .info | Javascript Tutorials

JavaScript Tutorial for Programmers - Objects

In JavaScript you may create your own objects for storing data. More commonly, though, you will use the many "built-in" objects which allow you to work with, manipulate, and access the Web page and Web browser. This set of pre-existing objects is known as the "Document Object Model".

Document Object Model

Often referred to as the DOM,  this object model is a hierarchy of all objects "built in" to JavaScript. Most of these objects are directly related to characteristics of the Web page or browser. The reason we qualify the term "built in" is because the DOM is technically separate from JavaScript itself. That is, the JavaScript language specification, standardized by the ECMA, does not actually specify the nature or specifics of the DOM. Consequently, Netscape and Microsoft have developed their own individual DOM's which are not entirely compatible. Additionally, the DOM stands apart from JavaScript because it could theoretically be accessed by other scripting languages as well.

In summary, then, what we refer to as "JavaScript" is actually made up of both JavaScript, the language, and the DOM, or object model which JavaScript can access. In a future WDVL article we will take a closer look at the DOM and its current and future role.

Below is a graphical chart illustrating a high-level view of Netscape's DOM. Microsoft's DOM is actually a superset of Netscape's, and so the chart below actually represents a subset of Microsoft's own DOM.

Reprinted from Netscape's JavaScript Guide

Properties

Access the properties of an object with a simple notation: objectName.propertyName. Both the object name and property name are case sensitive, so watch your typing. Because a property is essentially a variable, you can create new properties by simply assigning it a value. Assuming, for instance, that carObj already exists (we'll learn to create a new object shortly), you can give it properties named make, model, and year as follows:

carObj.make="Toyota";
carObj.model="Camry";
carObj.year=1990;
document.write(carObj.year);

A JavaScript object, basically, is an array. If you're familiar with other languages you probably recognize an array as a collection of values residing within a single named data structure. You can access an object's properties either using the objectName.propertyName syntax illustrated above, or by using an array syntax:

carObj["make"]="Toyota";
carObj["model"]="Camry";
document.write(carObj["year"]);

Methods

Unlike a basic data array, an object can also contain functions, which are known as methods when part of an object. You call a method using the basic syntax: objectName.methodName(). Any arguments required for the method are passed between the parentheses, just like a normal function call.

For example, the window object possesses a method named close(), which simply closes the specified browser window:

window.close();

Creating Objects

Most of the time you will be referencing objects which are built-in to the DOM. However, you may want to create your own objects for storing data within a JavaScript program. There are several ways to create a new object, but we'll look at two: creating a direct instance of an object and creating an object prototype.

direct instance of an object

Despite the awkward sound name, a "direct instance of an object" simply means creating a new single object, such as myPetDog:

myPetDog=new Object();
 myPetDog.name="Barney"; 
 myPetDog.breed="beagle";
 myPetDog.year=1981;

Assigning a method to your new object is also simple. Assume that you already have coded a function named woof(), which causes a barking sound to play:

myPetDog.woof=woof;

prototype of an object

Sometimes, you'll want to create a "template" or prototype of an object. This does not create an actual instance of the object, but defines the structure of the object. In the future, then, you can quickly stamp out a particular instance of the object. Suppose that instead of myPetDog, you created a prototype object named petDog. This object could then be a template for a particular pet dog object. First, create a function which defines the petDog structure:

function petDog(name, breed, year) 
{ this.name = name;
  this.breed = breed;
  this.year = year;
}

Now that the petDog prototype has been set, you can quickly create single instances of a new object based on the petDog structure:

myPetDog=new petDog("barney","beagle",1981);
yourPetDog=new petDog("max","terrier",1990);