CSS, DHTML, and Ajax, Fourth Edition

2017-07-07 02:10:07

I'll let you in on a little secret: There really isn't a DHTML language. At least, not in the way that there is an HTML language or a JavaScript language. HTML and JavaScript are specific, easily identified technologies for the Web. Dynamic HTML, on the other hand, is a marketing term coined by both Netscape and Microsoft to describe a set of technologies introduced in their version 4 Web browsers to enhance the interactive capabilities of those browsers (see "The History of DHTML" later in this chapter).

These interactive technologies were created or added in an attempt to overcome what were considered to be the chief limitations of Web pages designed with static HTML. Although the Web was great for delivering pages of text and graphics, they lacked the interactivity needed to create robust Web-based applications or deliver media beyond text. Those who were used to multimedia were left wanting more.

Adding DHTML to your Web site means that your pages can act and react to the user without continually returning to the Web server for more data. In programming terms, placing all of the code in the Web page is called client-side code. For you, it means not having to learn server-side programming to create interactive Web sites (see the sidebar "What DHTML Should Be").

What DHTML Should Be

Although there's no official or even standard definition of dynamic HTML, a few things are undeniably part of the DHTML mission:

DHTML should use HTML or XHTML tags and scripting languages without requiring the use of plug-ins or any software other than the browser.

DHTML, like HTML, should work (or at least have the potential to work) with all browsers and on all platforms.

DHTML should enhance the interactivity and visual appeal of Web pages.

DHTML is a combination of different standards-based Web technologies that, when used together, allow greater interactivity on your Web page (Figure 11.2).

Figure 11.2. The components of DHTML.

Cascading Style Sheets (CSS)

CSS allows you to define the style properties of any element on the page. Earlier browsers (such as Netscape Navigator 4 and Microsoft Internet Explorer 4) supported CSS Level 1 and CSS-P; most modern browsers support CSS Level 2.1. CSS is a standard defined by the World Wide Web Consortium (W3C). For more details on CSS, see Chapter 1.

Document Object Model (DOM)

The Document Object Model (DOM) describes how HTML and XML documents are represented using a tree-branching structure. The DOM allows you to treat individual elements on the page as objects, which can then be manipulated using JavaScript.

All DHTML-capable browsers have some version of the DOM that you can use to access the properties of any element-turned-object in the browser window. The problem is that the W3C did not standardize the DOM until 1998, and earlier browsers (Netscape Navigator 4 and Microsoft Internet Explorer 4) implemented their own conflicting DOMs. The good news is that the majority of modern browsers now support the W3C DOM, and legacy coding is becoming increasingly unnecessary, unless backward compatibility is required. For more details on the DOM, see Chapter 12.

JavaScript

The simple syntax of JavaScript lets you easily create code to control the behavior of Web page objects. Although browsers do not always agree on the exact implementation of JavaScript, they're close enough that you can work around the inconsistencies.

Unlike CSS and the DOM, JavaScript is not a standard set by the W3C. Instead, it has been standardized by the European Computer Manufacturers Association (ECMA) and is officially referred to as ECMAScript (Figure 11.3).

Figure 11.3. ECMA International's ECMAScript Web page (ecma-international.org/publications/standards/Ecma-262.htm).

There were several versions of JavaScript in existence before ECMA started its standards initiative in 1996. Originally, JavaScript was incorporated into a beta release of Netscape Navigator 2.0. Microsoft implemented its own version, called JScript, in Internet Explorer 3.0. However, today, nearly all browsers support JavaScript 1.5 (its official designation is ECMA-262 Edition 3) as the JavaScript standard, so that's what we'll be using in this book.

JavaScript is far from frozen, though, and is still undergoing revisions. Mozilla, the rendering engine on which many browsers, including Firefox, are based, supports JavaScript 1.6.

Markup Language

Markup languages are used by Web browsers to define how a Web page should be structured. This can take many forms. HTML (Hypertext Markup Language) is used to define the structure of a Web page, while XML (Extensible Markup Language) can define not only the structure but also the content of a page. In addition, there are several other specialized technologies such as SVG (Scalable Vector Graphics) and SMIL (Synchronized Multimedia Integration Language) used to add graphics and interactivity to the page. All of these languages can work with CSS, JavaScript, and the DOM to create dynamic Web pages.

XHTML (Extensible Hypertext Markup Language) is a hybrid of XML and HTML that is gradually replacing HTML in common use (see Figure 11.4). Although DHTML can be applied to a wide variety of markup languages, in this book we'll be coding using the XHTML standard.