JavaScript, Fourth Edition

1
JavaScript, Fourth Edition

• Chapter 11
• Creating Dynamic HTML (DHTML)

2
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
2
3
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

4
Modifying Styles with the this Reference

• Use the style property
• Modify an elements 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
5
Modifying Styles with the this Reference
(continued)
JavaScript, Fourth Edition
5
6
Modifying Styles with the this Reference
(continued)

• Example
• Work on the same Als 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 definitions
  parentheses
• Example
• Modify the Als Aviation Web pages so the
  underlines for the anchor elements are turned on
  and off using functions

JavaScript, Fourth Edition
6
7
Modifying Styles with the this Reference
(continued)
JavaScript, Fourth Edition
7
8
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 Als Aviation Web pages
  to modify the style of the anchor elements using
  the getElementById() method instead of the this
  reference

JavaScript, Fourth Edition
8
9
Understanding CSS Positioning

• ltimggt 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
10
Understanding CSS Positioning (continued)
JavaScript, Fourth Edition
10
11
Understanding CSS Positioning (continued)
JavaScript, Fourth Edition
11
12
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 Als Aviation site

JavaScript, Fourth Edition
12
13
Dynamic Positioning (continued)
JavaScript, Fourth Edition
13
14
Dynamic Positioning (continued)
JavaScript, Fourth Edition
14
15
Traveling Animation

• Use dynamic positioning to create animations that
  travel across the screen

JavaScript, Fourth Edition
15
16
Traveling Animation (continued)

• Example
• Animate the airplane image you added to the
  Instruments page of the Als Aviation site so it
  appears to fly across the screen

JavaScript, Fourth Edition
16
17
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

18
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
  block-level elements or inline elements
• Examples ltpgt element and heading elements (lth1gt,
  lth2gt, and so on)

JavaScript, Fourth Edition
18
19
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 ltbgt (bold) and ltbr /gt
  (line break) elements
• ltdivgt 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
20
Expandable Menus (continued)

• Class selector
• Defines different groups of styles for the same
  element
• Created within a ltstylegt 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
21
Expandable Menus (continued)
JavaScript, Fourth Edition
21
22
Expandable Menus (continued)
JavaScript, Fourth Edition
22
23
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
24
Navigation Menus (continued)
JavaScript, Fourth Edition
24
25
Navigation Menus (continued)
JavaScript, Fourth Edition
25
26
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
27
Navigation Menus (continued)
JavaScript, Fourth Edition
27
28
Navigation Menus (continued)
JavaScript, Fourth Edition
28
29
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
30
Sliding Menus (continued)

• Hide the contents of a horizontal navigation
  menu
• Assign a negative value to the tables left
  property
• The onmouseover event handlers in each lttablegt
  element
• Makes each menu visible
• Example
• Add a horizontal sliding menu to PrivatePilot.html

JavaScript, Fourth Edition
30
31
Sliding Menus (continued)
JavaScript, Fourth Edition
31
32
Sliding Menus (continued)
JavaScript, Fourth Edition
32
33
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
34
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 elements 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

35
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 ltdivgt element

36
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