The JavaScript Object Model

JavaScript is based on a simple object-oriented paradigm. An object is a construct with properties that are JavaScript variables. Properties can be other objects. Functions associated with an object are known as the object's methods.

In addition to objects that are built into the Navigator client and the LiveWire server, you can define your own objects.

Objects and Properties

A JavaScript object has properties associated with it. You access the properties of an object with a simple notation:

objectName.propertyName

Both the object name and property name are case sensitive. You define a property by assigning it a value. For example, suppose there is an object named myCar (we'll discuss how to create objects later-for now, just assume the object already exists). You can give it properties named make, model, and year as follows:

myCar.make = "Ford"
myCar.model = "Mustang"
myCar.year = 69;

You can also refer to these properties using an array notation as follows:

mycar["make"] = "Ford
myCar["model"] = "Mustang"
myCar["year"] = 69;

This type of an array is known as an associative array, because each index element is also associated with a string value. To illustrate how this works, the following function displays the properties of the object, when you pass the object and the object's name as arguments to the function:

function show_props(obj, obj_name) {
    var result = ""
    for (var i in obj)
        result += obj_name + "." + i + " = " + obj[i] + "\n"
    return result;
} 

So, the function call show_props(myCar, "myCar") would return the following:

myCar.make = Ford
myCar.model = Mustang
myCar.year = 67

You may also define properties using ordinal numbers, for example:

temp[0] = 34
temp[1] = 42
temp[2] = 56
These statements create three properties of the object temp, and you must refer to these properties as temp[i], where i is an integer between 0 and 2.

Functions and Methods

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure--a set of statments that performs a specific task.

A function definition consists of the function keyword, followed by

In a Navigator application, you can use any functions defined in the current page. It is generally a good idea to define all your functions in the HEAD of a page. When a user loads the page, the functions will then be loaded first.

The statements in a function can include other function calls defined for the current application.

For example, here is the definition of a simple function named pretty_print:

function pretty_print(string) { document.write("<HR><P>" + string) }

This function takes a string as its argument, adds some HTML tags to it using the concatenation operator (+), then displays the result to the current document.

Defining a function does not execute it. You have to call the function for it to do its work. For example, you could call the pretty_print function as follows:

<SCRIPT> pretty_print("This is some text to display") </SCRIPT>

The arguments of a function are not limited to just strings and numbers. You can pass whole objects to a function, too. The show_props function from the previous section is an example of a function that takes an object as an argument.

The arguments of a function are maintained in an array. Within a function, you can address the parameters passed to it as follows:

functionName.arguments[i]
where functionName is the name of the function and i is the ordinal number of the argument, starting at zero. So, the first argument passed to a function named myfunc would be myfunc.arguments[0]. The total number of arguments is indicated by the variable arguments.length.

A function can even be recursive, that is, it can call itself. For example, here is a function that computes factorials:

function factorial(n) {
  if ((n == 0) || (n == 1))
    return 1
  else {
    result = (n * factorial(n-1) )
    return result
  }
}

You could then display the factorials of one through five as follows:

for (x = 0; x < 5; x++) {
   document.write(x, " factorial is ", factorial(x))
   document.write("
") }

The results would be:
0 factorial is 1
1 factorial is 1
2 factorial is 2
3 factorial is 6
4 factorial is 24
5 factorial is 120

Functions with Variable Numbers of Arguments

You can call a function with more arguments than it is formally declared to accept using the arguments array. This is often useful if you don't know beforehand how many arguments will be passed to the function. You can use arguments.length to determine the number of arguments actually passed to the function,a and then treat each argument using the arguments array.

For example, consider a function defined to create HTML lists. The only formal argument for the function is a string that is "U" if the list is to be unordered (bulleted) or "O" if the list is to be ordered (numbered). The function is defined as follows:

function list(type) { document.write("<" + type + "L>") // begin list for (var i = 1; i < list.arguments.length; i++) // iterate through arguments document.write("<LI>" + list.arguments[i]) document.write("</" + type + "L>") // end list }

You can pass any number of arguments to this function and it will then display each argument as an item in the indicated type of list. For example, the following call to the function:

list("o", "one", 1967, "three", "etc, etc...")

results in this output:

Defining Methods

A method is a function associated with an object. You define a method in the same way as you define a standard function. Then, use the following syntax to associate the function with an existing object:

object.methodname = function_name
where object is an existing object, methodname is the name you are assigning to the method, and function_name is the name of the function.

You can then call the method in the context of the object as follows:

object.methodname(params);

Using this for Object References

JavaScript has a special keyword, this, that you can use to refer to the current object. For example, suppose you have a function called validate that validates an object's value property, given the object, and the high and low values:

function validate(obj, lowval, hival) {
   if ((obj.value < lowval) || (obj.value > hival))
      alert("Invalid Value!")
}

Then, you could call validate in each form element's onChange event handler, using this to pass it the form element, as in the following example:

<INPUT TYPE = "text" NAME = "age" SIZE = 3 onChange="validate(this, 18, 99)">

In general, in a method this refers to the calling object.

Creating New Objects

Both client and server JavaScript have a number of predefined objects. In addition, you can create your own objects. Creating your own object requires two steps:

To define an object type, create a function for the object type that specifies its name, and its properties and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called car, and you want it to have properties for make, model, year, and color. To do this, you would write the following function:

function car(make, model, year) {
   this.make = make;
   this.model = model;
   this.year = year;
}

Notice the use of this to assign values to the object's properties based on the values passed to the function.

Now you can create an object called mycar as follows:

mycar = new car("Eagle", "Talon TSi", 1993);

This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

You can create any number of car objects by calls to new. For example,

kenscar = new car("Nissan", "300ZX", 1992)

An object can have a property that is itself another object. For example, suppose I define an object called person as follows:

function person(name, age, sex) {
   this.name = name;
   this.age = age;
   this.sex = sex;
}

And then instantiate two new person objects as follows:

rand = new person("Rand McNally", 33, "M")
ken = new person("Ken Jones", 39, "M")

Then we can rewrite the definition of car to include an owner property that takes a person object, as follows:

function car(make, model, year, owner) {
   this.make = make;
   this.model = model;
   this.year = year;
   this.owner = owner;
}

To instantiate the new objects, you then use the following:

car1 = new car("Eagle", "Talon TSi", 1993, rand);
car2 = new car("Nissan", "300ZX", 1992, ken)

Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:

car2.owner.name

Note that you can always add a property to a previously defined object. For example, the statement:

car1.color = "black"
adds a property color to car1, and assigns it a value of "black". However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the car object type.

Defining Methods

You can define methods for an object type by including a method defnition in the object type definition. For example, suppose you have a set of image GIF files, and you want to define a method that displays the information for the cars, along with the corresponding image. You could define a function such as:

function displayCar() {
   var result = "A Beautiful " + this.year
                + " " + this.make + " " + this.model;
   pretty_print(result)
}
where pretty_print is the previously defined function to display a string. Notice the use of this to refer to the object to which the method belongs.

You can make this function a method of car by adding the statement

this.displayCar = displayCar;
to the object definition. So, the full definition of car would now look like:
function car(make, model, year, owner) {
   this.make = make;
   this.model = model;
   this.year = year;
   this.owner = owner;
   this.displayCar = displayCar;
}

Then you can call this new method as follows:

car1.displayCar()
car2.displayCar()
This will produce output like this:


A Beautiful 1993 Eagle Talon TSi


A Beautiful 1992 Nissan 300ZX