100 likes | 106 Vues
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
E N D
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