Chapter 2: How to code a JavaScript application

This chapter presents a subset of JavaScript and DOM scripting that will soon have you writing significant applications. If you don't have any programming experience, this chapter also makes a great aptitude test. If you read it and can do the exercises at the end of the chapter, you're ready for the rest of this book.

How to use objects in JavaScript

To use JavaScript effectively, you need to know how to use the objects that are provided by JavaScript and the web browser. So that's what you'll be introduced to next.

An introduction to objects, properties, and methods

An object is a collection of related variables and functions. A variable stored in an object is known as a property, and a function stored in an object is known as a method. In figure 2-10, you can learn the basic syntax for working with objects, properties, and methods. Then, the next three figures show you how to work with specific objects, properties, and methods.

The syntax at the top of this figure summarizes the code for creating an instance of an object. Here, the italicized words are the ones that vary. The words and characters that aren't italicized are the ones that are always the same.This notation is used in the syntax summaries throughout this book.

To create an object, then, you code the keyword new, the name of the object type, and a set of parentheses. This calls the object's constructor function, which creates the object and initializes its properties. The resulting object is called an instance of the object type. You can then use object's properties and methods.

The two examples after the syntax show how this syntax is applied. The first one creates a Date object and stores it in a variable named today. The second one creates an Array object and stores it in a variable named states. Here, Date and Array are specific types of objects that are supported by JavaScript.

To access a property of an object, you code the name of the object followed by the dot operator (period) and the name of the property. This is illustrated by the second syntax summary and set of examples. Here, the first statement gets the screenX property of the window object, and the second statement assigns a URL to the location property of the window object. Since a property is a variable, you can usually use it in an expression or assign a value to it. However, some properties of JavaScript and browser objects are read-only so you can't assign values to them.

To call a method of an object, you code the name of the object, the dot operator, the name of the method, and a set of parentheses that contains any required parameters (which are also referred to as arguments). This is illustrated by the third set of examples. Here, the first statement calls the getElementById method of the document object and passes one parameter to it. Similarly, the second statement calls the writeln method of the document object and passes one parameter to it. In this case, though, the parameter is the value returned by the getFullYear method of the today object.

Often, when you use JavaScript, it's best to nest the use of one object within another. This is called object chaining, and this is illustrated by the fourth set of examples. Here, the first statement uses the getElementById method of the document object to get the object for an XHTML element with "rate" at its id, and then it gets the value property of that object. The second statement gets the location property of the window object, which is a string, and then uses the toLowerCase method of the string object to convert the location property to lowercase letters.

The syntax for creating a new object

new ObjectType()

Examples that create new objects and store them in variables

var today = new Date(); // creates a Date object named today
var states = new Array(); // creates an Array object named states

The syntax for accessing a property of an object

objectName.propertyName

Examples that access a property of an object

alert(window.screenX); // Displays the width of the user's screen
window.location = "http://www.murach.com"; // Loads the murach.com home page

The syntax for calling a method of an object

objectName.methodName(parameters)

Examples that call a method of an object

// Stores a reference to the XHTML element with the id "rate"
var rateTextbox = document.getElementById("rate");
// Gets the full year and writes it to the web page
document.writeln( today.getFullYear() );

Examples of object chaining

// Uses the alert method to display the value property
// of the DOM object that is returned by the getElementById method.
alert( document.getElementById("rate").value );
// Uses the alert method to display the location property
// of the current page after it has been converted to lowercase letters
// by the toLowerCase method.
alert( window.location.toLowerCase() );

Description

• An object has properties that represent attributes like the width of a window or the value that's in an XHTML element.
• An object also has methods that do functions that are related to the object.
• When you call a method, you may need to pass one or more parameters (or arguments) to it by coding them within the parentheses after the method name. If the method requires more than one parameter, you must separate them with commas.
• Object chaining lets you access the properties or methods of objects that are nested inside other objects.
• Often, an object is stored in the property of another object or returned by a method of another object.

Figure 2-10 An introduction to objects, properties, and methods

If this is confusing right now, you're going to see many more examples of the use of objects and object chaining in the rest of this chapter. So by the end of this chapter, you should become comfortable with the use of object chaining.