home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWebmaster in a Nutshell, 3rd EditionSearch this book

2.4. Dynamic Content

One of the most important features provided by web page scripting is the ability to detect and react to events that occur while a document is loaded, rendered, and used. Web page authors can set up scripts that will be triggered by such events as a cursor passing over an image, clicking on a link, or even leaving a page. The scripting code that responds to these events may be placed within the <script> element or loaded from a separate file. A special set of common element attributes point to a script when their event is triggered. These attributes are called event handlers.

For example, you might want to invoke a JavaScript function when the user passes the mouse over a hyperlink in a document. You simply add a "mouse over" event handler for the <a> tag called onMouseOver

<a href=doc.html DEFANGED_OnMouseOver="document.status='Click me!'; return 

When the mouse passes over the example link, the browser executes the JavaScript statements. (Here, the JavaScript itself is embedded in the attribute, since it is so simple. Notice that the statements are enclosed in quotes and separated by a semicolon, and that single quotes surround the text-message portion of the first statement.)

While a complete explanation of this code is beyond our scope, the net result is that the browser places the message "Click me!" in the status bar of the browser window. Commonly, HTML authors use this simple JavaScript function to display a more descriptive explanation of a hyperlink, in place of the often cryptic URL the browser traditionally displays in the status window.

HTML supports a rich set of event handlers through related "on" event attributes. The value of any event handler attribute is either the name of a function defined elsewhere in the document, or a quoted string containing one or more script statements separated by semicolons. Extremely long statements can be broken across several lines, if needed.

At the lowest level, HTML event handlers are simply hooks defined by the browser manufacturer to access the Document Object Model of the browser. The DOM models the structure of the client as an interface for controlling it via scripting. For example, document.title is the interface for the title of a document, and window.frame is a single frame. Scripting can be used to alter these objects, whether it is to change their contents or how they are displayed.

An effort is underway at the W3C to implement a standard, platform-neutral DOM specification for web and XML applications. DOM Level 1 defined a core object model for HTML and XML documents. It provides for standard document navigation and manipulation. DOM Level 2 provides an event model and a model for style sheets and manipulating style information.

Currently, browsers support their own specific object models, which roughly comply with DOM Level 1. Currently, DOM Level 2 has been partially implemented in the latest generation of browsers.

Library Navigation Links

Copyright © 2003 O'Reilly & Associates. All rights reserved.