Learn important techniques that will enable you to design web pages with the user in mind. Through an understanding of the Document Object Model (DOM), you will be able to create fast and efficient client-side scripting code using the JavaScript language. This course builds on your knowledge of simple hypertext mark-up language (XHTML/HTML) to expand the functionality of forms, data entry, and user interfaces. You will supplement your previous knowledge with techniques using images and topics in Cascading Style Sheets (CSS) to enhance your ability to design web sites compliant with the latest Web Standards methodology.

This course is the first part of PB Tech Capstone Series: JavaScript: DOM Scripting (DHTML). PB Tech's Capstone Series courses are project-based and provide hands-on experience to gain practical knowledge of course topics. To take advantage of the Capstone concept, students interested in this course should also enroll in Advanced JavaScript: DOM Scripting (DHTML). If you attend both Introduction to JavaScript: DOM Scripting and Advanced JavaScript: DOM Scripting (DHTML) and complete the Capstone project, you will receive the PB Tech Capstone certificate, along with real-world sample code. Both courses are delivered within the same week.

What You'll Learn

• Understand JavaScript commands and program structure, including arithmetic and logical operators, scalar and array variables, control structures, and functions
• Write compact, extractable script
• Build dynamic image changes that respond to the user's mouse movements
• Build pages with browser independence
• Calculate and validate form content
• Create real-time dynamic content such as the user's time of day
• Build pages that open and close based on the user's actions
• Dynamically position content with CSS to precisely control the position and appearance of the elements
• Employ regular expressions to enable scripts to check whether a string of characters matches a specific pattern

Who Needs to Attend

For new programmers, developers, and web designers who want to learn the fundamentals of JavaScript.

Prerequisites

There are no prerequisites for this course.

Follow-On Courses

• Advanced JavaScript: DOM Scripting - DHTML
• XML Developer

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
• Prompts: alert(), prompt(), confirm()
• Nesting Quotes
• Multiple Statements
• Event Handlers of the Link Object

4. Introduction to Scalar Variables

• JavaScript Data
• Storing Information from a Prompt

5. JavaScript Functions

• Writing a JavaScript Function
• Passing an Argument to a Function
• Concatenating Strings and Variables
• Calling Functions from Other Functions
• The .js Extension: External JavaScript Files

6. More Event Handlers & Methods

• Event Handlers
• Event Handlers for Text Fields
• Event Methods

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

9. Working with Forms in JavaScript

• The value Property
• Advanced Form Handling: Making the Function More Portable

10. Working with Numbers

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

11. Loop Structures in JavaScript

• Basic Arithmetic Operators
• Loop Structures

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

14. Advanced Form Validation

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

16. String Methods that Can Use Regular Expressions

• The match() Method
• The replace() Method
• The split() Method

17. Building a Form Toolbox

• Accessing a JavaScript Library
• Example: Using a JavaScript Library for Form Validation

18. More Tools for Working with Forms

• Example: Two Generic Form Tools
• The searchRadios() Function
• The getListValue() Function
• The type Property of Form Elements

19. Inter-Window Communication in JavaScript

• Opening a Child Window (from the Parent)
• Two Windows = Two Object Hierarchies
• Example: Parent-Child Interaction

20. Working with Advanced Objects

• Working with the Date Object
• Hidden Form Fields

21. Working with the Location Object

• Using location.hash to Pass Data Between Pages

22. Custom Objects

• Creating Custom Objects
• Constructor Functions
• The prototype Object and Inheritance
• Example: Using Custom Objects and prototypes

23. Objects Within Objects

• New Syntax for Accessing Objects
• The for/in Loop
• Example: Multi-Tiered Objects

24. Working with Images

• Pre-loading Images

25. Image Flipping & Form Validation

26. Positioning Objects with CSS

• CSS Positioning Properties

27. Dynamic Positioning with JavaScript

• initializing function
• Finding browser width and height

28. Advanced Event Registration

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

Appendix A: Color Values and Hexadecimal Triplets

Appendix B: DOM Level 0 Notation

Appendix C: DHTML in Various Browsers

• Internet Explorer 4
• Netscape 4
• Version 4+ Cross-Browser DHTML Demo

Appendix D: Regular Expression References

• Character Types and Ranges
• Quantity Indicators
• Location Indicators
• Other Special Characters
• Attributes/Modifiers

Appendix E: Brief Cascading Style Sheet Reference

Appendix F: For Further Reading...

• Books
• Web Sites

Exercises:

Exercise 1: Selecting Objects and Attributes

Exercise 2: Adding an Event Handler

Exercise 3: Using a Variable to Change the Color

Exercise 4: Changing Colors using a Function

Exercise 5: Calling Functions from within Other Functions

Exercise 6: Creating and Referencing an External File for JavaScript Code

Exercise 7: Working with Event Handlers

Exercise 8: Using the If Conditional and an Array

Exercise 9: Using Forms

Exercise 10: Processing a Visitor's Registration Form

Exercise 11: Validating Numeric Input (Optional)

Exercise 12: Take the Modulus of Numbers from User Input (Optional)

Exercise 13: Building a RegExp-Based Form Validation

Exercise 14: Using String Methods in Form Validation

Exercise 15: Advanced Form Validation (Optional)

Exercise 16: Adding a General Function to the Toolbox

Exercise 17: Moving Information Between Windows

Exercise 18: Date/Time Stamping Form Submissions

Exercise 19: Using location.hash to Pass Values Between Pages

Exercise 20: Using Custom Objects to Display a Client List

Exercise 21: Using Multi-Tiered Custom Objects

Exercise 22: JavaScript Image Flipping

Exercise 23: Dynamic Positioning with JavaScript

Exercise 24: Event Listeners