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 the window and document objects

When you use JavaScript, the global object provides access to predefined properties and methods that are useful in JavaScript applications. In a web browser, the global object is the window object, and all named methods and properties that are not a part of another object are part of this global object.

In figure 2-11, you can learn how to use one property and four methods of the window object. Note that you can omit the object name and dot operator when referring to the properties and methods of the window object because it is the global object. In other words, window.alert and alert are both calls to the alert method of the window object.

As the table in this figure describes, you can use the alert method to display a dialog box that displays the value of the one parameter that's passed to it. Similarly, you can use the prompt method to display an input dialog box, but this method also returns the value that the user enters into the dialog box. In the examples, the first statement uses the alert method to display a string literal. The second statement uses the prompt method to get a value from the user and save it in a variable named userEntry.

In contrast, the parseInt and parseFloat methods are used to convert strings to numbers. The parseInt method converts a string to an integer, and the parseFloat method converts a string to a decimal value. Note in the examples that the parseInt method doesn't round the value. It just removes, or truncates, any decimal portion of the string value. Also, if the string can't be converted to a number, these two methods will return the value NaN.

In contrast to the window object, the document object is the highest object in the DOM structure. It represents the XHTML document, and you do need to code the object name (document) and the dot when you use one of its methods. The document object is also a property of the window object. As a result, each of the references to the document object could be coded as window.document instead of just document.

This figure shows how to use three of the document object methods. The first is the getElementById method. It requires one parameter that is the id for an element in the XHTML document. When it is executed, it returns an object that represents that XHTML element.

In contrast, the write and writeln methods can be used to write a string into the XHTML document, and these methods are typically used in the body of an XHTML document. Note, however, that if you call either of these methods after the XHTML document has been loaded into the browser, the web page will be completely replaced by the value passed to the method.

One property of the window object

Property	Description
location	The URL of the current web page. If you set this property, the browserwill load the new page.

Common methods of the window object

Method	Description
alert(message)	Displays a dialog box with the string that's passed to it.
prompt(message,default)	Displays a dialog box with the string in the first parameter and a text box that contains the default value from the second parameter. When the user enters a value and clicks OK, the value is returned.
parseInt(string)	Converts the string that's passed to it to an integer data type. Returns NaN if the string can't be converted to a valid integer.
parseFloat(string)	Converts the string parameter to a numeric data type. Returns NaN if the string can't be converted to a valid number.

Examples that use the properties and methods of the window object

alert("Invalid entry."); // displays "Invalid entry."
var userEntry = prompt(errorMessage,100); // accepts user entry
parseInt("12345.67"); // returns the integer 12345
parseFloat("12345.67"); // returns the floating point value 12345.67
parseFloat("Ray Harris"); // returns NaN

Common methods of the document object

Method	Description
getElementById(id)	Gets the XHTML element that has the id that's passed to it and returns the element to the script.
write(text)	Writes the string that's passed to it to the document.
writeln(text)	Writes the string that's passed to it to the document and advances to a new line.

Examples that use methods of the document object

// gets the DOM object that represents the XHTML element with "rate"
// as its id and stores it in a variable named rateTextbox
var rateTextbox = document.getElementById("rate");
// writes the string in the message variable to the document
document.writeln(message);

Description

• The window object is the global object when JavaScript is used in a web browser. It provides the global and browser properties and methods.
• JavaScript lets you omit the object name and period when referring to the window object.
• The document object is the object that allows you to work with the DOM.

Figure 2-11 How to use the window and document objects