A Brief Look at JavaScript - Web Development and Design Foundations with XHTML - page 540

CHECKPOINT 14.1
1. Describe at least three popular uses for JavaScript.
2. How many JavaScript code blocks can be embedded in an XHTML document?
3. Describe a method that can be used to find an error in a JavaScript code block.
14.5 Document Object Model Overview
JavaScript can manipulate the elements of an XHTML document. Elements include
container tags such as paragraphs, and text contained in <span> or <div> tags.
Elements also include images, forms, and individual form elements such as text boxes
and select lists. In order to access these elements, we need to understand a little about
the Document Object Model (DOM).
In general, an objec t is an entity or a “thing”. When using the DOM, the browser
window, Web page document, and any XHTML element are considered to be objects.
The browser window is an object. When a Web page loads in the browser, the Web
page is considered to be a document. The document itself is an object. The document
can contain objects such as images, headings, paragraphs, and individual form elements
such as text boxes. The objects may have properties that can be detected or manipulated.
For instance, a property of the document is its title. Another property of the document
is its background color.
There are some actions that can be performed on some objects. For instance, the window
object can display the alert message box, or display a prompt box. These actions are called
methods . The command to display an alert message is referred to as a method of the win-
dow object. The DOM is the collection of objects, properties, and methods. JavaScript uses
the DOM to detect and manipulate elements in the XHTML document.
Let's look at this system of objects, properties, and methods differently. Let's say that
your car is an object. It has properties such as color, manufacturer, and year. Your car
has elements such as the hood and trunk. The hood and trunk can be opened and
closed. If we were to use a programming language to open and close the hood and
trunk, the commands might look something like the following:
car.hood.open()
car.hood.close()
car.trunk.open()
car.trunk.close()
If we wanted to know the color, year, and manufacturer of the car, the commands might
look something like the following:
car.color
car.year
car.manufacturer
When we use the values, car.color might be equal to “blue” and car.manufacturer
might be equal to “Ford.” We might be able to change the values, or only read them