JavaScript Object Basics

From Techotopia
Revision as of 20:29, 25 April 2007 by Neil (Talk | contribs) (Creating a Custom JavaScript Object)

Jump to: navigation, search

JavaScript Objects represent self contained entities consisting of variables (called properties in object terminology) and functions (called methods) that can be used to perform tasks and store complex data. JavaScript objects fall into three categories: Built-in Objects, Custom Objects and Document Object Model (DOM) Objects.

Built-in objects are objects that are provided with JavaScript to make your life as a JavaScript developer easier. In many of the examples given in this book we have used the document.write() mechanism to write text to the current web page. Whether you knew it or not, you have been using the write() method of the JavaScript built-in document object when you have run these scripts.

Document Object Model (DOM) Objects provide the foundation for creating dynamic web pages. The DOM provides the ability for a JavaScript script to access, manipulate, and extend the content of a web page dynamically (i.e without having to reload the page). The DOM essentially presents the web page as a tree hierarchy of objects representing the contents and elements of the web page. These objects, in turn, contain properties and methods which allow you to access and change parts of the web page.

Custom objects are objects that you, as a JavaScript developer, create and use. Creating a custom object is possibly the best way to fully understand what objects are, so in this chapter we will by looking at how to create custom objects before covering the Built-in and DOM Objects in later chapters.

Creating a Custom JavaScript Object

Creating a custom JavaScript object is quite similar to constructing a function. The syntax is as follows:

function object(''parameter1, parameter2, parameter3,...'')
     this.property1 = parameter1;
     this.property2 = parameter2;
     this.property3 = parameter3;
     this.method1 = function1;
     this.method2 = function2;
     this.method3 = function3;

In the above outline ''object'' refers to the name of the object - this can be any valid (and hopefully descriptive) name you choose to use. The ''parameters'' define the values that you will pass into the object when you instantiate it later. Each of these parameters is subsequently assigned to the corresponding internal ''properties'' of the object (the ''this'' keyword references the current object). The functions represent the methods of the object and are declared the same way as any other functions and reside outside the object definition.

== Creating an Example JavaScript Object ==

The best way to learn any technical concept is through an example, and JavaScript Objects are no exception to this rule. In this example we will construct a car object that contains a number of ''properties'' and a method. Lets begin  by declaring our object:

function car (make, model, color)
  this.make = make;
  this.model = model;
  this.color = color
  this.displayCar = displayCar;

We have now declared a JavaScript object. The next task is to write the displayCar() function:

function displayCar()
     document.write("Make = " + this.make);
     document.write("Model = " + this.model);
     document.write("Color = " + this.color)

This object is now complete. The next thing we need to do is to learn how to create an instance of the object and access the properties and methods of the object instance.

Creating and using Object Instances

In the previous section we learned how to create an object definition. It is important to note that, at this point, we have only described what the object will do, we have not actually created an object we can work with (this is known as an object instance). Object instances are created using the new keywrod and are assigned to an object variable that will be used to reference the object. For example, in the following example we will create anew instance of the car object with the name myCar:

carObject = new car ("Ford", "Focus", "Red");

We have also passed through parameters to initialize the properties of the object (make, model and color).

Next we need to understand how to call a method on an object and access an object property. This is achieved by using what is called dot noation on the name of the object instance:

To access a property:


To call a method of an object:


In our example we have a method called displayCar() to the 3 properties of the object. Follwoing the above dot notation syntax we can call this method as follows:


We can also access a property, for example the color as follows:

document.write ("The make property of myCar is " + myCar.make );

Finally, we can also change one of the properties of an object instance:

myCar.make = "BMW";