Transcript Chapter 2

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