This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.
objectName.propertyNameBoth 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
(for now, just assume the object already exists). You can give it properties named make
, model
, and year
as follows:myCar.make = "Ford"An array is an ordered set of values associated with a single variable name. Properties and arrays in JavaScript are intimately related; in fact, they are different interfaces to the same data structure. So, for example, you could access the properties of the
myCar.model = "Mustang"
myCar.year = 69;
myCar
object as follows:myCar["make"] = "Ford"This type of 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:
myCar["model"] = "Mustang"
myCar["year"] = 67
function show_props(obj, obj_name) {So, the function call
var result = ""
for (var i in obj)
result += obj_name + "." + i + " = " + obj[i] + "\n"
return result
}
show_props(myCar, "myCar")
would return the following:myCar.make = Ford
myCar.model = Mustang
myCar.year = 67
function
keyword, followed by
For example, here is the definition of a simple function named pretty_print
:
function pretty_print(str) {This function takes a string,
document.write("<HR><P>" + str)
}
str
, as its argument, adds some HTML tags to it using the concatenation operator (+), and then displays the result to the current document using the write
method.
In addition to defining functions as described here, you can also define Function
objects, as described in "Function Object".
<SCRIPT>The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function, too. The
pretty_print("This is some text to display")
</SCRIPT>
show_props
function (defined in "Objects and Properties") is an example of a function that takes an object as an argument.function factorial(n) {You could then display the factorials of one through five as follows:
if ((n == 0) || (n == 1))
return 1
else {
result = (n * factorial(n-1) )
return result
}
}
for (x = 0; x < 5; x++) {The results are:
document.write("<BR>", x, " factorial is ", factorial(x))
}
0 factorial is 1
1 factorial is 1
2 factorial is 2
3 factorial is 6
4 factorial is 24
5 factorial is 120
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
.
Using the arguments
array, you can call a function with more arguments than it is formally declared to accept using. This is often useful if you don't know in advance 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, and then treat each argument using the arguments
array.
function list(type) {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
document.write("<" + type + "L>") // begin list
// iterate through arguments
for (var i = 1; i < list.arguments.length; i++)
document.write("<LI>" + list.arguments[i])
document.write("</" + type + "L>") // end list
}
list("o", "one", 1967, "three", "etc., etc...")results in this output:
1. one
2. 1967
3. three
4. etc., etc...
In JavaScript 1.2, arguments
includes additional properties, as described in the JavaScript Reference.
new
.
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) {Notice the use of
this.make = make
this.model = model
this.year = year
}
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 you define an object called
vpgscar = new car("Mazda", "Miata", 1990)
person
as follows:function person(name, age, sex) {and then instantiate two new
this.name = name
this.age = age
this.sex = sex
}
person
objects as follows:rand = new person("Rand McKinnon", 33, "M")Then you can rewrite the definition of
ken = new person("Ken Jones", 39, "M")
car
to include an owner
property that takes a person
object, as follows:function car(make, model, year, owner) {To instantiate the new objects, you then use the following:
this.make = make
this.model = model
this.year = year
this.owner = owner
}
car1 = new car("Eagle", "Talon TSi", 1993, rand)Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects
car2 = new car("Nissan", "300ZX", 1992, ken)
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.nameNote 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.
This applies when you create an object and its properties with a constructor function, as in the above example of the Car
object type, and when you define individual properties explicitly (for example, myCar.color = "red"
). So if you define object properties initially with an index, such as myCar[5] = "25 mpg"
, you can subsequently refer to the property as myCar[5]
.
prototype
property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a color
property to all objects of type car
, and then assigns a value to the color
property of the object car1.
For more information, see the prototype
property of the Function
object in the JavaScript Reference.Car.prototype.color=null
car1.color="black"
birthday.description="The day you were born"
object.methodname = function_namewhere
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);You can define methods for an object type by including a method definition in the object constructor function. For example, you could define a function that would format and display the properties of the previously-defined
car
objects; for example,function displayCar() {where
var result = "A Beautiful " + this.year + " " + this.make
+ " " + this.model
pretty_print(result)
}
pretty_print
is the function (defined in "Functions") to display a horizontal rule and 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 likefunction car(make, model, year, owner) {Then you can call the
this.make = make
this.model = model
this.year = year
this.owner = owner
this.displayCar = displayCar
}
displayCar
method for each of the objects as follows:car1.displayCar()This produces the output shown in Figure 10.1
car2.displayCar()
Figure 10.1 Displaying method output
this
, that you can use within a method 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) {Then, you could call
if ((obj.value < lowval) || (obj.value > hival))
alert("Invalid Value!")
}
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=3In general,
onChange="validate(this, 18, 99)">
this
refers to the calling object in a method.
When combined with the form
property, this
can refer to the current object's parent form. In the following example, the form myForm
contains a Text
object and a button. When the user clicks the button, the value of the Text
object is set to the form's name. The button's onClick
event handler uses this.form
to refer to the parent form, myForm
.
<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
onClick="this.form.text1.value=this.form.name">
</FORM>
Last Updated: 10/31/97 10:38:35