JavaScript: DOM Scripting (DHTML)

Learn the programming techniques you need to develop cutting-edge web sites. In this 5-day course, you'll learn to fully exploit the capabilities of modern web browsers by using dynamic features of web programming. From simple mouse-driven events to advanced dragging features, you will master the tools to publish a truly interactive web site.

What You Will Learn

Audience

Web designers and developers who need to work with client-side scripting in their web applications.

Prerequistes

Course Outline

1. Review of JavaScript and the DOM

• What is JavaScript?
• What is the DOM?
• What is DHTML? What is DOM Scripting?
• Browser Independence

2. How JavaScript Works

• JavaScript Objects
• Debugging JavaScript

3. Review of Basic Structures

• window Object
• Accessing Objects and Their Attributes
• The window as the Implied Object
• Event Handlers: Embedded JavaScript
  • Exercise 1: Selecting Objects and Attributes
  • A Possible Solution to Exercise 1
• Prompts: alert(), prompt(), confirm()
• Nesting Quotes
• Multiple Statements
• Event Handlers of the Link Object
  • Exercise 2: Adding An Event Handler
  • A Possible Solution to Exercise 2

4. Introduction to Scalar Variables

• JavaScript Data
• Storing Information from a Prompt
  • Exercise 3: Using a Variable to Change the Color
  • A Possible Solution to Exercise 3

5. JavaScript Functions

• Writing a JavaScript Function
• Passing an Argument to a Function
• Concatenating Strings and Variables
  • Exercise 4: Changing Colors Using a Function
  • A Possible Solution to Exercise 4
• Calling Functions from other Functions
  • Exercise 5: Calling Functions from Within other Functions
  • A Possible Solution to Exercise 5
• The .js extension: External JavaScript files
  • Exercise 6: Creating and Referencing an External File for JavaScript Code
  • A Possible Solution to Exercise 6

6. More Event Handlers & Methods

• Event Handlers
• Event Handlers for Text Fields
• Event Methods
  • Exercise 7: Working with Event Handlers
  • A Possible Solution to Exercise 7

7. Storing a List of Variables in an Array

• Creating an Array

8. Introduction to the If Conditional

• The if Conditional
• The Switch Case Statement
• Combining an if Conditional with an Array
  • Exercise 8: Using the If Conditional and an Array
  • A Possible Solution to Exercise 8

9. Working with Forms in JavaScript

• The value Property
• Advanced Form Handling: Making the Function More Portable
  • Exercise 9: Using Forms
  • A Possible Solution to Exercise 9

10. Working with Numbers

• Casting (Converting) Strings to Numbers using Number()
• Comparing Numeric Data

11. Loop Structures in JavaScript

• Basic Arithmetic Operators
• Loop Structures
  • Exercise 10: Processing a Visitor's Registration Form
  • A Possible Solution to Exercise 10

12. The return Statement

• Using the return Statement to Validate Radio Buttons

13. Form Validation

• Validating Numeric Data
• The String Object and Form Validation
• The onsubmit Event Handler and Form Validation
  • Exercise 11: Validating Numeric Input (Optional)
  • A Possible Solution to Exercise 11

14. Advanced Form Validation

• Exercise 12: Take the Modulus of Numbers from User Input (Optional)
• A Possible Solution to Exercise 12

15. Regular Expressions

• The Regular Expression Object
• Character Types and Ranges
• Quantity Indicators
• Location Indicators
• Ignoring Case with the i Modifier
• Specifying Alternates
• Example: Experimenting with Regular Expressions
• Example: Form Validation
• The RegExp() Constructor
  • Exercise 13: Building a RegExp-based Form Validation
  • A Possible Solution to Exercise 13

16. String Methods that Can Use Regular Expressions

• The match() Method
• The replace() Method
• The split() Method
  • Exercise 14: Using String Methods in Form Validation
  • A Possible Solution to Exercise 14

17. Building a Form Toolbox

• Accessing a JavaScript Library
• Example: Using a JavaScript Library for Form Validation
  • Exercise 15: Advanced Form Validation (Optional)
  • A Possible Solution to Exercise 15

18. More Tools for Working with Forms

• Example: Two Generic Form Tools
• The searchRadios() Function
• The getListValue() Function
• The type Property of Form Elements
  • Exercise 16: Adding a General Function to the Toolbox
  • A Possible Solution to Exercise 16

19. Communication between Windows in JavaScript

• Opening a Child Window (from the Parent)
• Two Windows = Two Object Hierarchies
• Example: Parent-Child Interaction
  • Exercise 17: Moving Information between Windows
  • A Possible Solution to Exercise 17

20. Working with Advanced Objects

• Working with the Date Object
• Hidden Form Fields
  • Exercise 18: Date/Time Stamping Form Submissions
  • A Possible Solution to Exercise 18

21. Working with the Location Object

• Using location.hash to Pass Data Between Pages
  • Exercise 19: Using location.hash to Pass Values Between Pages
  • A Possible Solution to Exercise 19

22. Custom Objects

• Creating Custom Objects
• Constructor Functions
• The prototype Object and Inheritance
• Example: Using Custom Objects and Prototypes
  • Exercise 20: Using Custom Objects to Display a Client List
  • A Possible Solution to Exercise 20

23. Objects within Objects

• New Syntax for Accessing Objects
• The for/in Loop
• Example: Multi-Tiered Objects
  • Exercise 21: Using Multi-Tiered Custom Objects
  • A Possible Solution to Exercise 21

24. Working with Images

• Pre-loading Images

25. Image Flipping & Form Validation

• Exercise 22: JavaScript Image Flipping
• A Possible Solution to Exercise 22

26. Positioning Objects with CSS

• CSS Positioning Properties

27. Dynamic Positioning with JavaScript

• Initializing function
• Finding Browser Width and Height
  • Exercise 23: Dynamic Positioning with JavaScript
  • A Possible Solution to Exercise 23

28. Advanced Event Registration

• Event Propagation
• Event Registration
• Internet Explorer and Event Listeners
• Event Listener Example

  Course Labs