JavaScript tutorial:
JavaScript objects

Contents | Previous | Next

What Are Objects?

JavaScript objects encapsulate properties and methods operating on the properties.

The built-in (intrinsic) JavaScript objects are:

Object, and

Apart from intrinsic objects, there are user-created objects (discussed below), and host objects.

The most common host for using JavaScript is the web browser. You have already been using the host objects throughout this tutorial. For example, the document.write() method belongs to the web browser's document objects. The window object is another commonly used browser object.

JavaScript can also manipulate Java applets and ActiveX controls:

Java applets operate on web pages. JavaScript gives you a convenient way of accessing and manipulating the properties of Java objects.

ActiveX controls contain compiled code and expose an interface that programming languages such as C++, C# or JavaScript can use to create instancies of ActiveX objects and manipulate their properties and behavior. For example, in Adding sound to your pages we explain how to use Media Player ActiveX to add multimedia capabilities to your web pages.

Object properties and methods

You can access to object properties in the same way as if you were accessing an array:

By name, using the ObjectName.PropertyName syntax, or
By index, starting with 0.

// Car constructor
function Car()
    this.make = new Array();
    this.colors = new Array();
    this.price = new Array();
    this.year = new Array();
    this.model = new Array();

    this.toString = toString; // Method (member function)

function toString()
    return ("Make: " + this.make + "\n" + "Color: " + this.colors + "\n" + "Year: " + this.year + "\n" + "Model: " + this.model + "\n" + "Price: " + this.price + "\n");

// Create an instance of a Car
BMW = new Car();
BMW.make= "BMW";
BMW.colors[0] = "Blue";
BMW.price = "$50000";
BMW.year = 2006;
BMW.model = "Z4";

//There are two ways to refer to the object model.
MyModel = BMW.model;

MyModel2 = BMW["model"];

//Add more colors
BMW.colors[1] = "Red";
BMW.colors[2] = "Brown";
BMW.colors[3] = "Black";

To run the code above, paste it into JavaScript Editor, and click the Execute button.

If your object's property is another object, use the dot-notation to access its properties:

// The substring method is the property of String object

To run the code above, paste it into JavaScript Editor after the code in the in the first example, and click the Execute button.

The following code creates a multiplication table (as an array of arrays):

// Construct a 17x17 multiplication table
multTable = new Array(17);

for ( j = 0; j < multTable.length; j++)
// Create rows.
        aRow = new Array(17);

        for ( i = 0; i < aRow.length; i++)
            aRow[i] = (i + " times " + j + " = " + i*j);

// Put the filled row into the table.
        multTable[j] = aRow;

// Get only row 7 to get the multiplication table for this number
multiTable7 = multTable[7];

To run the code above, paste it into JavaScript Editor, and click the Execute button.

To refer to one of the elements of an array of this kind, use two sets of brackets.

multiply3x7 = multTable[3][7];