DHTML:Cross-browser Techniques (Second Edition)

Upcoming Class Dates

Course Specifications

Course Description

• JavaScript: Programming (Second Edition)
• Web Development With Cascading Style Sheets

Benefits:  Students will be able to add interactivity, animation, and dynamic features to their Web pages.

Target student:  Students enrolling in this course should be interested in creating dynamic HTML elements, including animation and stylistic effects.

Performance-Based Objectives

Lesson objectives help students become comfortable with the course, and also provide a means to evaluate learning. Upon successful completion of this course, students will be able to:

• Describe the component technologies of DHTML, define Document Object Model (DOM), describe the DOMs from both Navigator 4.x and Internet Explorer 4.x-5.x, and compare the early DOM models to determine similarities and overlap. You'll also be able to create dynamic images that change when the mouse pointer is placed over them.
• Describe the W3C-standard DOM and use it to examine a document's hierarchy and to access document components.
• Use DOM-enabled methods to change styles associated with page elements.
• Animate elements using DOM-standard methods and properties.
• Modify the document structure, write to existing elements, read and write attributes, and create and delete page elements all using DOM-standard techniques.
• Examine the real-world difficulties of creating cross-browser DHTML-enabled Web pages, as well as the techniques for dealing with those challenges. You will also be able to write a constructor function that defines the DHTML-enabling ActiveElement custom object.
• Add methods to a custom object, describe the prototype-based inheritance model of JavaScript, and add secondary methods to a custom object through linked-in libraries.
• Move elements on the page by using methods of the custom ActiveElement object.
• Add clipping effects through methods of the ActiveElement object.
• Get user input through mouse events.
• Enable drag-and-drop functionality that relies on handling mouse events, create drop-down menus that are enabled by events, and create auto-generating code.
  

Course Content

Lesson 1: DHTML and the Document Object Model

Topic 1A: DHTML Defined
Topic 1B: Document Object Model Beginnings
Topic 1C: The Level 0+ DOMs
Topic 1D: DOM Standards

Lesson 2: The W3C HTML DOM

Topic 2A: Page Hierarchy
Topic 2B: Standard Methods and Properties

Lesson 3: Changing Styles

Topic 3A: Exploring the Style Object
Topic 3B: Changing Styles
Topic 3C: The DOCTYPE Switch

Lesson 4: Animating Page Elements

Topic 4A: Positioning Elements on the Page
Topic 4B: Moving Elements

Lesson 5: Modifying the Document Structure

Topic 5A: Reading From and Writing to Existing Elements
Topic 5B: Reading, Writing, and Adding Attributes and Values
Topic 5C: Creating Nodes
Topic 5D: Removing and Replacing Nodes

Lesson 6: Creating the Core DHTML Library

Topic 6A: Coding for Backward Compatibility
Topic 6B: The Custom Object Technique

Lesson 7: Adding Methods to the Custom Object

Topic 7A: Adding Methods
Topic 7B: Adding Secondary Methods to the ActiveElement Object

Lesson 8: Moving Elements on the Page

Topic 8A: Moving in Geometric Shapes

Lesson 9: Clipping

Topic 9A: Clipping
Topic 9B: Clipping With Code

Lesson 10: Getting User Input With Events

Topic 10A: Events
Topic 10B: Event Information
Topic 10C: Events and the ActiveElement Object

Lesson 11: Applying Mouse Events

Topic 11A: Dragging and Dropping
Topic 11B: Drop-down Menus

Appendix A: ActiveElement Reference