PC Magazine - April 20, 2004
Understanding Client-Side Scripting

Make your Web pages more dynamic without overburdening your server.

By Sheryl Canter

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.

HomeWritingSpeakingWeb DesignGraphic DesignBioBlogContact