|
PC Magazine - April 20, 2004 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.
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.
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. |
|
Home • Writing • Speaking • Web Design • Graphic Design • Bio • Blog • Contact Web site designed and developed by
Permutations Software, Inc.
Last revised 28 Nov 12 |
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.