JavaScript: DOM Scripting (DHTML) Training Class

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

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