The Web Wizard

1
The Web Wizards Guide To DHTML and CSS

• Chapter 2
• A Review of CSS2 and JavaScript

2
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

3
A Review of CSS2

• The position property
• The visibility property
• The overflow property
• The clip property
• Add JavaScript to create Dynamic HTML

4
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

5
A Little History

• Invented by Eich at Netscape in 1995
• Became popular with Navigator 3
• JScript Microsofts competing language
• ECMA a standard emerges

6
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

7
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

8
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

9
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.

10
Dynamic HTML over Flash

• Works better with the browsers 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