The Web Wizard’s Guide To DHTML and CSS Chapter 2 A Review of CSS2 and JavaScript

Chapter Objectives To review how to position, hide, and show content, using CSS2 To understand how CSS works with a scripting language to create Dynamic HTML To review the fundamentals of JavaScript To learn about the Document Object Model To create a three-dimensional animation To examine the pros and cons of animation with DHTML versus Flash

A Review of CSS2 The position property The visibility property The overflow property The clip property Add JavaScript to create Dynamic HTML

Why Learn JavaScript? Broad support among web browsers Vast libraries of scripts available online Applicable to other host environments Allows use of reusable code libraries Similar syntax to C, C++, and Java Encourages creative problem solving

A Little History Invented by Eich at Netscape in 1995 Became popular with Navigator 3 JScript: Microsoft’s competing language ECMA: a standard emerges

Fundamental Concepts Objects: The nouns of the language Instances: incarnations of objects Properties: attributes of objects Values: content for properties Events and Events Handlers Variables: containers for data Arrays: ordered collections of data Methods: The verbs of the language Operators: Assignment versus Comparison Functions: groups of statements

The Document Object Model Internal road map of objects on a web page Hierarchical model of web browser objects Old DOMs for Netscape, Microsoft New browsers use the standard DOM by W3C

Animating with DHTML Create the HTML Absolute position your objects Be aware of z-index stacking Call an init() function in the onload handler Store generic functions in an external library

Flash over Dynamic HTML Flash gives more control over animations. Flash animations look the same on all browsers and platforms. Flash files embed any fonts needed for display of highly stylized text. Flash works better with sound and video. Flash is a little easier to learn than DHTML There are versions of the Flash plug-in for obsolete browsers.

Dynamic HTML over Flash Works better with the browser’s back button. DHTML text can be searched and selected. DHTML requires only a text editor. Flash files require a plug-in. DHTML integrates well with HTML. DHTML is often better for navigation. DHTML works anywhere on the page