Download 01501_ch11 - CarlPetersheim.us

JavaScript, Fourth Edition
Chapter 11
Creating Dynamic HTML (DHTML)
Objectives
•
•
•
•
Use JavaScript to modify CSS styles
Work with CSS positioning
Create DHTML menus
Learn how to check for browser compatibility
JavaScript, Fourth Edition
2
Manipulating CSS Styles with
JavaScript
• Primary purpose of CSS
– Format the display of a Web page
• Options for manipulating CSS with JavaScript
– Write code that functioned only in Navigator
– Write code that functioned only in Internet
Explorer
– Write both sets of code and design the script so
that the correct set would execute
• Depending on which browser rendered the page
JavaScript, Fourth Edition
3
Modifying Styles with the this
Reference
• Use the style property
– Modify an element’s CSS properties with JavaScript
• CSS properties without hyphens
– Referred to in JavaScript with all lowercase letters
• CSS properties with hyphens
– Remove the hyphen, convert the first word to
lowercase
• Convert the first letter of subsequent words to
uppercase
JavaScript, Fourth Edition
4
Modifying Styles with the this
Reference (continued)
JavaScript, Fourth Edition
5
Modifying Styles with the this
Reference (continued)
• Example
– Work on the same Al’s Aviation Web pages that
you worked with in Chapter 10
• You can pass the this reference as an argument
to a function
– Becomes the curElement variable
• Defined within the function definition’s parentheses
• Example
– Modify the Al’s Aviation Web pages so the
underlines for the anchor elements are turned on
and off using functions
JavaScript, Fourth Edition
6
Modifying Styles with the this
Reference (continued)
JavaScript, Fourth Edition
7
Modifying Styles with Methods of the
Document Object
• Gain access to the styles
– By using the getElementById(),
getElementsByName(), or
getElementsByTagName()
• Example
– Modify the functions in Al’s Aviation Web pages
to modify the style of the anchor elements using
the getElementById() method instead of the
this reference
JavaScript, Fourth Edition
8
Understanding CSS Positioning
• <img> elements create stationary animations
• CSS positioning
– Used to position or lay out elements on a Web
page
• position property
– Most critical CSS positioning property
– Determines type of positioning applied to an
element
JavaScript, Fourth Edition
9
Understanding CSS Positioning
(continued)
JavaScript, Fourth Edition
10
Understanding CSS Positioning
(continued)
JavaScript, Fourth Edition
11
Dynamic Positioning
• Easiest way to dynamically position an element
with CSS
– Use the left and top properties
• Both property values are assigned in pixels
• Example
– Dynamically position an image in the
Instruments page of the Al’s Aviation site
JavaScript, Fourth Edition
12
Dynamic Positioning (continued)
JavaScript, Fourth Edition
13
Dynamic Positioning (continued)
JavaScript, Fourth Edition
14
Traveling Animation
• Use dynamic positioning to create animations
that “travel” across the screen
JavaScript, Fourth Edition
15
Traveling Animation (continued)
• Example
– Animate the airplane image you added to the
Instruments page of the Al’s Aviation site so it
appears to “fly” across the screen
JavaScript, Fourth Edition
16
Creating DHTML Menus
• Popular use of DHTML is to create menus
• Types of menus
– Expandable menus
– Navigation menus
– Sliding menus
• DHTML menus are most often used for
organizing navigational links to other Web
pages
JavaScript, Fourth Edition
17
Expandable Menus
• display property
– Specifies whether to display an element on a
Web page
• You typically use the display property with a
block-level element
– Which gives a Web page its structure
• Block-level elements can contain other blocklevel elements or inline elements
– Examples: <p> element and heading elements
(<h1>, <h2>, and so on)
JavaScript, Fourth Edition
18
Expandable Menus (continued)
• Inline, or text-level, elements
– Describe the text that appears on a Web page
– Appear within the line of the block-level element
that contains them
– Inline elements include the <b> (bold) and <br
/> (line break) elements
• <div> element
– Formats a group of block-level and inline
elements with styles
– Use the display property to simulate
expandable and collapsible menus
JavaScript, Fourth Edition
19
Expandable Menus (continued)
• Class selector
– Defines different groups of styles for the same
element
– Created within a <style> element by
appending a name for the class to a selector
with a period
• Example
– Modify the right frame of the Instrument Training
Web page so the content beneath each heading
is contained within expandable menus
JavaScript, Fourth Edition
20
Expandable Menus (continued)
JavaScript, Fourth Edition
21
Expandable Menus (continued)
JavaScript, Fourth Edition
22
Navigation Menus
• Drop-down, or pull-down menus
– Can greatly improve the design of your Web page
– Very useful in helping visitors navigate through your
Web site
• Create a navigation menu
– Create a “master” table that will contain nested
tables for each individual menu
• Format the table to look something like a menu bar
– For each navigation menu, you nest another table
within the same cell as the menu heading
JavaScript, Fourth Edition
23
Navigation Menus (continued)
JavaScript, Fourth Edition
24
Navigation Menus (continued)
JavaScript, Fourth Edition
25
Navigation Menus (continued)
• Show and hide each menu using the
visibility property
– Determines whether an element is visible
– Allocates space for an element on a Web page
• Example
– Add a navigation menu to AviationHome.html
JavaScript, Fourth Edition
26
Navigation Menus (continued)
JavaScript, Fourth Edition
27
Navigation Menus (continued)
JavaScript, Fourth Edition
28
Sliding Menus
• Sliding menus
– Menus that appear to slide open and closed
• visibility and display properties
– Display their associated elements without any
effect
• Simulate a sliding effect
– Use the left and top properties along with
simple animation techniques
• With a horizontal navigation menu
– Create each individual menu within its own table
JavaScript, Fourth Edition
29
Sliding Menus (continued)
• “Hide” the contents of a horizontal navigation
menu
– Assign a negative value to the table’s left
property
• The onmouseover event handlers in each
<table> element
– Makes each menu visible
• Example
– Add a horizontal sliding menu to PrivatePilot.html
JavaScript, Fourth Edition
30
Sliding Menus (continued)
JavaScript, Fourth Edition
31
Sliding Menus (continued)
JavaScript, Fourth Edition
32
Checking Browser Compatibility
• Write code that checks whether the browser is
compliant with the W3C DOM
– And open an alternate Web page that does not
include DHTML
• Browser sniffer
– Checks which type of browser is running
• Easiest way to test whether a Web browser is
compatible with the W3C DOM
– Check whether the browser includes the
getElementById() method
JavaScript, Fourth Edition
33
Summary
• The easiest way to refer to a CSS style in
JavaScript is to use the this reference
• Use the style property to modify an element’s
CSS properties with JavaScript
• CSS positioning is used to position or lay out
elements on a Web page
• Most critical CSS positioning property is the
position property
• Easiest way to dynamically position an element
with CSS is to use the left and top properties
JavaScript, Fourth Edition
34
Summary (continued)
• With DHTML, you can use dynamic positioning to
create animations that “travel” across the screen
• DHTML menus are most often used for organizing
navigational links
• The display property specifies whether to display
an element on a Web page
• Inline, or text-level, elements describe the text that
appears on a Web page
• One block-level element you may be familiar with
is the <div> element
JavaScript, Fourth Edition
35
Summary (continued)
• A class selector defines different groups of
styles for the same element
• To show and hide each menu, you use the
visibility property
• Sliding menus appear to slide open and closed
• To simulate a sliding effect, you must use the
left and top properties
• A browser sniffer checks which type of browser
is running
JavaScript, Fourth Edition
36