Client-Side Scripting

You can create an attractive, colorful Web page just using HTML. But without some scripting, the page will
just sit there, unresponsive to user actions. Scripts can run either on the Web server (server-side scripting)
or on the user's computer (client-side scripting).

Server-side scripts are best suited for delivering custom or dynamic content. But what if you want a
Windows-like menu bar on your Web site, or an expandable tree? You could implement these interface
elements in a server-side script, but there are serious disadvantages to doing it this way: Your interface will
be sluggish and you will greatly increase the bandwidth used.

A better solution is client-side scripting, which is designed to manipulate and display the content returned
from the server. This method enables you to respond to user events by hiding or showing elements on the
page, moving elements, or changing colors and fonts. Showing and hiding tables is the essence of how you
create a pull-down menu on a Web page. Displaying a window in response to the mouse position allows a
Web page to support ToolTips.

The most widely used client-side scripting language is JavaScript, which was invented by Netscape
Communications and introduced with Netscape Navigator 2.0. Microsoft's JScript was released in response
to JavaScript's success, and is essentially a clone. However, the two are not completely compatible.

JavaScript is more widely used than it is understood. Thanks to the many cut-and-paste JavaScript Web
sites, Web designers can incorporate JavaScript functions without any concept of how they work. But if you
want to go beyond cut-and-paste to create your own cool effects, you need to understand JavaScript.

JavaScript is an object-oriented scripting language that runs inside a Web browser. It manipulates elements
on a Web page by means of a Document Object Model, or DOM, which is an API for interacting with a Web
page. The elements in HTML documents are hierarchical, and are represented in the DOM as a tree
structure. Each element in the tree is an object with properties and methods that are defined by the DOM.
For example, a Web page is represented by a document object. Its properties and methods include the title
property (document.title), which gives the title for the page, and the write method (document.write), which
lets you output text. Objects can be addressed in terms of their position within the tree, or accessed directly
by tag, name, or ID. The DOM also provides an interface for user events such as mouse movement or key
clicks.

The DOM is separate from the language itself; different languages can implement the same DOM.
Unfortunately, different versions of JavaScript can and do implement different DOMs, which hugely
complicates the job of Web developers. The differences between the Netscape and Microsoft DOMs are
particularly bothersome. JavaScript code of any degree of complexity must include two versions of each
function. Developers end up writing an API where each function they want to call is replaced with a version
that tests the browser and calls the browser-specific version.

To stem the chaos, the W3C stepped in with a DOM standard for HTML and XML. DOM Level 1, which was
completed in October 1998, focuses on basic navigation and manipulation functions. Level 2, completed in
November 2000, adds support for XML namespaces, Cascading Style Sheets (CSS), and user interface
events. Level 3, which is still under development, will offer enhanced XML support and other advanced
features.

But defining a standard is not the same as getting vendors to use it. So far Mozilla, the open-source version
of Netscape Navigator (www.mozilla.org) has the most compliant DOM support, implementing most of Level
2. Microsoft did not support the W3C standard until Internet Explorer 6, which supports Level 1. Adding to
developer stress is the fact that Microsoft's current proprietary implementation has some nice features that
the W3C version lacks, such as the innerHTML property, which represents all the character data between an
element's starting and ending tag.

The best tools for JavaScript development are built into Mozilla. The Mozilla DOM Inspector displays the
DOM tree and flashes the selected element in the rendered Web page, which it displays in the lower
window. Mozilla also has a JavaScript console and a debugger.

The learning curve is steeper for JavaScript than it is for server-based scripting, because of the complexity
of the DOM and the need to learn multiple DOMs in order to support the most popular browsers. But the
payoff is a unique and distinctive Web site that your visitors will enjoy exploring.