Browser Object Properties, Methods, and Events

Browser Object Properties, Methods , and Events

We've seen that the document object refers to the current page, but how do you actually use this object? We've already seen one way, which is to use object methods, such as the write method, to write text to the web page. You use a method of an object by giving the object's name a dot (.) followed by the method name , such as document.write . Here are a few examples of methods:

document.write . Writes text to the current web page.
document. writeln . Writes a single line to the current web page and skips to the next line.
history.go . Navigates the web browser to a location in the browser's history.
window.alert . Displays an alert dialog box.
window. open . Opens a new browser window.

As you can see, these methods provide a lot of ready-made power for you to work with the browser interactively. Besides performing actions with objects using methods, you can read and change settings in those objects using properties. A property holds some setting of an object. For example, the document.linkcolor property holds the color of hyperlinks in the current web page, and by changing the document.linkcolor property, you can change that color. Here are some example properties and the objects to which they belong:

document. bgcolor . Background color of the current page.
document.fgcolor . Foreground color of the current page.
document.lastmodified . Date the page was last modified.
document.title . Title of the current page.
location.hostname . Name of the Internet service provider (ISP) host.
navigator.appName . Name of the browser, which you can use to determine what browser the user has.

Object properties and methods give you access to what's going on in the browser, enabling you to change just about everything under programmatic control. Besides properties and methods, there is one more very important concept in working with browser objects: events.

How do you know when such an action has occurred? For example, what if you want to change the color of a web page when the user clicks that page? To inform you when something's happened , JavaScript uses events, such as mouse clicks, as we've already seen when we used the onload event to display an alert box like this:

 <HTML>      <HEAD>          <TITLE>              Executing Scripts After a Document Loads          </TITLE>  <SCRIPT LANGUAGE="JavaScript">   <!--   function alerter()   {   window.alert("All loaded.")   }   // -->   </SCRIPT>  </HEAD>  <BODY ONLOAD="alerter()">  <H1>Executing Scripts After a Document Loads</H1>      </BODY>  </HTML>

When the user clicks the page, an onmousedown event occurs. To handle that event, you can use the ONMOUSEDOWN event attribute. Here's an example showing one way of responding to such events. In this case, I'll change the document's background color to red when the mouse is clicked using an inline script:

(Listing 01-06.html on the web site)

 <HTML>      <HEAD>          <TITLE>              JavaScript Event Example          </TITLE>      </HEAD>  <BODY ONMOUSEDOWN="document.bgColor='red'">  <H1>              Click this page to turn it red!          </H1>      </BODY>  </HTML>

In this case, I've indicated that I want to assign the browser-predefined color "red" to document.bgcolor when the user clicks the mouse (both Netscape Navigator and Internet Explorer understand basic color names like "red," "blue," "green," and so on), and I do that with the JavaScript assignment document.bgColor='red' . (As we'll see in Chapter 2, "The JavaScript Language: Data, Operators, and Branching," the equals sign here means that I want to set the document.bgColor property to 'red' , much like the way we've assigned values to HTML attributes already.) The results of this example, in glorious black and white, appear in Figure 1.11 in the Netscape Navigator.

Figure 1.11. Turning a web page red.

graphics/01fig11.gif

Tip

While we're on this example, here's something to note about inline scripts: The entire script is enclosed in quotation marks, because it's assigned to an HTML event attribute, such as ONMOUSEDOWN . If the script itself uses quotes, however, such as document.bgColor="red" , you should make sure you use different quotation marks from those that enclose the script so that the browser doesn't get confused . If you use double quotation marks around the script, for example, use single quotation marks in the script, and vice versa. Both of these will work: <BODY ONMOUSEDOWN="document.bgColor='red'"> and <BODY ONMOUSEDOWN= 'document.bgColor="red"'> .

So what HTML event attributes are available? Here are some common ones that we'll run into (discussed in more detail in Chapter 6):

ONABORT . Occurs when an action is aborted.
ONBLUR . Occurs when an element loses the input focus.
ONCHANGE . Occurs when data in a control, such as a text field, changes.
ONCLICK . Occurs when an element is clicked.
ONDBLCLICK . Occurs when an element is double-clicked.
ONDRAGDROP . Occurs when a drag-and-drop operation is undertaken.
ONERROR . Occurs when there's been a JavaScript error.
ONFOCUS . Occurs when an element gets the focus.
ONKEYDOWN . Occurs when a key goes down.
ONKEYPRESS . Occurs when a key is pressed and the key code is available.
ONKEYUP . Occurs when a key goes up.
ONLOAD . Occurs when the page loads.
ONMOUSEDOWN . Occurs when a mouse button goes down.
ONMOUSEMOVE . Occurs when the mouse moves.
ONMOUSEOUT . Occurs when the mouse leaves an element.
ONMOUSEOVER . Occurs when the mouse moves over an element.
ONMOUSEUP . Occurs when a mouse button goes up.
ONRESET . Occurs when the user clicks a Reset button.
ONRESIZE . Occurs when an element or page is resized.
ONSUBMIT . Occurs when the user clicks a Submit button.
ONUNLOAD . Occurs when a page is unloaded.

I've presented the common DOM model here, but beyond these basics, the object models between the two browsers diverge. As mentioned, one of the biggest issues JavaScript programmers have to deal with is cross-browser compatibility; a web page with a script that works in one browser may not work in another. We'll be looking at this issue throughout the bookit's one of the most important topics we'll cover. I'll take a look at it in overview here in our foundation chapter.