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 = 1969;
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"] = 1967
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 = 1967
new operator.
objectName = {property1:value1, property2:value2,..., propertyN:valueN}
where objectName is the name of the new object, each propertyI is an identifier (either a name, a number, or a string literal), and each valueI is an expression whose value is assigned to the propertyI. The objectName and assignment is optional. If you do not need to refer to this object elsewhere, you do not need to assign it to a variable.
If an object is created with an object initializer in a top-level script, JavaScript interprets the object each time it evaluates the expression containing the object literal. In addition, an initializer used in a function is created each time the function is called.
The following statement creates an object and assigns it to the variable x if and only if the expression cond is true.
if (cond) x = {hi:"there"}
The following example creates myHonda with three properties. Note that the engine property is also an object with its own properties.
myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}}
You can also use object initializers to create arrays. See "Array Literals" on page 37.
JavaScript 1.1 and earlier versions.
You cannot use object initializers. You can create objects only using their constructor functions or using a function supplied by some other object for that purpose. See "Using a Constructor Function" on page 102.
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) {
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)
vpgscar = new car("Mazda", "Miata", 1990)
An object can have a property that is itself another object. For example, suppose you 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 McKinnon", 33, "M")
ken = new person("Ken Jones", 39, "M")
Then you 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.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.
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].
The exception to this rule is objects reflected from HTML, such as the forms array. You can always refer to objects in these arrays by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <FORM> tag in a document has a NAME attribute of "myForm", you can refer to the form as document.forms[1] or document.forms["myForm"] or document.myForm.
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.
Car.prototype.color=nullSee the
car1.color="black"
prototype property of the Function object in the Client-Side JavaScript Reference for more information.
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() {
var result = "A Beautiful " + this.year + " " + this.make
+ " " + this.model
pretty_print(result)
}
where pretty_print is function 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 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 the displayCar method for each of the objects as follows:
car1.displayCar()This produces the output shown in the following figure.
car2.displayCar()
Figure 7.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) {
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=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>
delete operator. The following code shows how to remove an object.
myobj=new Number()See "delete" on page 57 for more information. JavaScript 1.1. You can remove an object by setting its object reference to null (if that is the last reference to the object). JavaScript finalizes the object immediately, as part of the assignment expression. JavaScript 1.0. You cannot remove objects--they exist until you leave the page containing the object.
delete myobj // removes the object and returns true
Array, Boolean, Date, Function, Math, Number, RegExp, and String. The predefined client-side objects are described in Chapter 11, "Using Navigator Objects."
Array object and its methods to work with arrays in your applications. The Array object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them. It has a property for determining the array length and other properties for use with regular expressions.
An array is an ordered set of values that you refer to with a name and an index. For example, you could have an array called emp that contains employees' names indexed by their employee number. So emp[1] would be employee number one, emp[2] employee number two, and so on.
Array object:
1. arrayObjectName = new Array(element0, element1, ..., elementN)
2. arrayObjectName = new Array(arrayLength)
arrayObjectName is either the name of a new object or a property of an existing object. When using Array properties and methods, arrayObjectName is either the name of an existing Array object or a property of an existing object.
element0, element1, ..., elementN is a list of values for the array's elements. When this form is specified, the array is initialized with the specified values as its elements, and the array's length property is set to the number of arguments.
arrayLength is the initial length of the array. The following code creates an array of five elements:
billingMethod = new Array(5)Array literals are also
Array objects; for example, the following literal is an Array object. See "Array Literals" on page 37 for details on array literals.
coffees = ["French Roast", "Columbian", "Kona"]
emp[1] = "Casey Jones"You can also populate an array when you create it:
emp[2] = "Phil Lesh"
emp[3] = "August West"
myArray = new Array("Hello", myVar, 3.14159)
myArray = new Array("Wind","Rain","Fire")
You then refer to the first element of the array as myArray[0] and the second element of the array as myArray[1].
The index of the elements begins with zero (0), but the length of array (for example, myArray.length) reflects the number of elements in the array.
Array object has the following methods:
concat joins two arrays and returns a new array. join joins all elements of an array into a string.pop removes the last element from an array and returns that element.push adds one or more elements to the end of an array and returns that last element added.reverse transposes the elements of an array: the first array element becomes the last and the last becomes the first.shift removes the first element from an array and returns that elementslice extracts a section of an array and returns a new array.splice adds and/or removes elements from an array.sort sorts the elements of an array.unshift adds one or more elements to the front of an array and returns the new length of the array.myArray = new Array("Wind","Rain","Fire")
myArray.join() returns "Wind,Rain,Fire"; myArray.reverse transposes the array so that myArray[0] is "Fire", myArray[1] is "Rain", and myArray[2] is "Wind". myArray.sort sorts the array so that myArray[0] is "Fire", myArray[1] is "Rain", and myArray[2] is "Wind".
a = new Array(4)The following code displays the array:
for (i=0; i < 4; i++) {
a[i] = new Array(4)
for (j=0; j < 4; j++) {
a[i][j] = "["+i+","+j+"]"
}
}
for (i=0; i < 4; i++) {
str = "Row "+i+":"
for (j=0; j < 4; j++) {
str += a[i][j]
}
document.write(str,"<p>")
}
This example displays the following results:
Row 0:[0,0][0,1][0,2][0,3]
Row 1:[1,0][1,1][1,2][1,3]
Row 2:[2,0][2,1][2,2][2,3]
Row 3:[3,0][3,1][3,2][3,3]
regexp.exec, string.match, and string.replace. For information on using arrays with regular expressions, see Chapter 4, "Regular Expressions."
Boolean object is a wrapper around the primitive Boolean data type. Use the following syntax to create a Boolean object:
booleanObjectName = new Boolean(value)Do not confuse the primitive Boolean values true and false with the true and false values of the
Boolean object. Any object whose value is not undefined or null, including a Boolean object whose value is false, evaluates to true when passed to a conditional statement. See "if...else Statement" on page 80 for more information.
Date object and its methods to work with dates and times in your applications. The Date object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.
JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00.
The Date object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.
To create a Date object:
dateObjectName = new Date([parameters])where
dateObjectName is the name of the Date object being created; it can be a new object or a property of an existing object.
The parameters in the preceding syntax can be any of the following:
today = new Date().Xmas95 = new Date("December 25, 1995 13:30:00"). If you omit hours, minutes, or seconds, the value will be set to zero.Xmas95 = new Date(1995,11,25). A set of values for year, month, day, hour, minute, and seconds. For example, Xmas95 = new Date(1995,11,25,9,30,0).Date object behaves as follows:
Date object varies from platform to platform.Date object methods for handling dates and times fall into these broad categories:
Date objects.Date objects.Date objects.Date strings.getDay method that returns the day of the week, but no corresponding setDay method, because the day of the week is set automatically. These methods use integers to represent these values as follows:
Xmas95 = new Date("December 25, 1995")
Then Xmas95.getMonth() returns 11, and Xmas95.getFullYear() returns 95.
The getTime and setTime methods are useful for comparing dates. The getTime method returns the number of milliseconds since January 1, 1970, 00:00:00 for a Date object.
For example, the following code displays the number of days left in the current year:
today = new Date()This example creates a
endYear = new Date(1995,11,31,23,59,59,999) // Set day and month
endYear.setFullYear(today.getFullYear()) // Set year to this year
msPerDay = 24 * 60 * 60 * 1000 // Number of milliseconds per day
daysLeft = (endYear.getTime() - today.getTime()) / msPerDay
daysLeft = Math.round(daysLeft) //returns days left in the year
Date object named today that contains today's date. It then creates a Date object named endYear and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between today and endYear, using getTime and rounding to a whole number of days.
The parse method is useful for assigning values from date strings to existing Date objects. For example, the following code uses parse and setTime to assign a date value to the IPOdate object:
IPOdate = new Date()
IPOdate.setTime(Date.parse("Aug 9, 1995"))
JSClock() returns the time in the format of a digital clock.
function JSClock() {
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " P.M." : " A.M."
return temp
}
The JSClock function first creates a new Date object called time; since no arguments are given, time is created with the current date and time. Then calls to the getHours, getMinutes, and getSeconds methods assign the value of the current hour, minute and seconds to hour, minute, and second.
The next four statements build a string value based on the time. The first statement creates a variable temp, assigning it a value using a conditional expression; if hour is greater than 12, (hour - 13), otherwise simply hour.
The next statement appends a minute value to temp. If the value of minute is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to temp in the same way.
Finally, a conditional expression appends "PM" to temp if hour is 12 or greater; otherwise, it appends "AM" to temp.
Function object specifies a string of JavaScript code to be compiled as a function.
To create a Function object:
functionObjectName = new Function ([arg1, arg2, ... argn], functionBody)
functionObjectName is the name of a variable or a property of an existing object. It can also be an object followed by a lowercase event handler name, such as window.onerror.
arg1, arg2, ... argn are arguments to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier; for example "x" or "theForm".
functionBody is a string specifying the JavaScript code to be compiled as the function body.
Function objects are evaluated each time they are used. This is less efficient than declaring a function and calling it within your code, because declared functions are compiled.
In addition to defining functions as described here, you can also use the function statement. See the Client-Side JavaScript Reference for more information.
The following code assigns a function to the variable setBGColor. This function sets the current document's background color.
var setBGColor = new Function("document.bgColor='antiquewhite'")
To call the Function object, you can specify the variable name as if it were a function. The following code executes the function specified by the setBGColor variable:
var colorChoice="antiquewhite"You can assign the function to an event handler in either of the following ways:
if (colorChoice=="antiquewhite") {setBGColor()}
1. document.form1.colorButton.onclick=setBGColor
2. <INPUT NAME="colorButton" TYPE="button"Creating the variable
VALUE="Change background color"
onClick="setBGColor()">
setBGColor shown above is similar to declaring the following function:
function setBGColor() {
document.bgColor='antiquewhite'
}
You can nest a function within a function. The nested (inner) function is private to its containing (outer) function:
Math object has properties and methods for mathematical constants and functions. For example, the Math object's PI property has the value of pi (3.141...), which you would use in an application as
Math.PISimilarly, standard mathematical functions are methods of
Math. These include trigonometric, logarithmic, exponential, and other functions. For example, if you want to use the trigonometric function sine, you would write
Math.sin(1.56)Note that all trigonometric methods of
Math take arguments in radians.
The following table summarizes the Math object's methods.
| Method |
Description
abs
| sin, cos, tan
| acos, asin, atan
| exp, log
| ceil
| floor
| min, max
| pow
| round
| sqrt
| |
|---|
Math object of your own. You always use the predefined Math object.
It is often convenient to use the with statement when a section of code uses several math constants and methods, so you don't have to type "Math" repeatedly. For example,
with (Math) {
a = PI * r*r
y = r*sin(theta)
x = r*cos(theta)
}
Number object has properties for numerical constants, such as maximum value, not-a-number, and infinity. You cannot change the values of these properties and you use them as follows:
biggestNum = Number.MAX_VALUEYou always refer to a property of the predefined
smallestNum = Number.MIN_VALUE
infiniteNum = Number.POSITIVE_INFINITY
negInfiniteNum = Number.NEGATIVE_INFINITY
notANum = Number.NaN
Number object as shown above, and not as a property of a Number object you create yourself.
The following table summarizes the Number object's properties.
Table 7.2 Properties of Number
| Method |
Description
MAX_VALUE
| MIN_VALUE
| NaN
| NEGATIVE_INFINITY
| POSITIVE_INFINITY
| |
|---|
RegExp object lets you work with regular expressions. It is described in Chapter 4, "Regular Expressions."
String object is a wrapper around the string primitive data type. Do not confuse a string literal with the String object. For example, the following code creates the string literal s1 and also the String object s2:
s1 = "foo" //creates a string literal valueYou can call any of the methods of the
s2 = new String("foo") //creates a String object
String object on a string literal value--JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object. You can also use the String.length property with a string literal.
You should use string literals unless you specifically need to use a String object, because String objects can have counterintuitive behavior. For example:
s1 = "2 + 2" //creates a string literal valueA
s2 = new String("2 + 2")//creates a String object
eval(s1) //returns the number 4
eval(s2) //returns the string "2 + 2"
String object has one property, length, that indicates the number of characters in the string. For example, the following code assigns x the value 13, because "Hello, World!" has 13 characters:
myString = "Hello, World!"A
x = mystring.length
String object has two types of methods: those that return a variation on the string itself, such as substring and toUpperCase, and those that return an HTML-formatted version of the string, such as bold and link.
For example, using the previous example, both mystring.toUpperCase() and "hello, world!".toUpperCase() return the string "HELLO, WORLD!".
The substring method takes two arguments and returns a subset of the string between the two arguments. Using the previous example, mystring.substring(4, 9) returns the string "o, Wo." See the substring method of the String object in the Client-Side JavaScript Reference for more information.
The String object also has a number of methods for automatic HTML formatting, such as bold to create boldface text and link to create a hyperlink. For example, you could create a hyperlink to a hypothetical URL with the link method as follows:
mystring.link("http://www.helloworld.com")
The following table summarizes the methods of String objects.
Last Updated: 05/27/99 21:21:27