Duration: 3 Days
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.
What You Will 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
Audience
For new programmers, developers, and web designers who want to learn the fundamentals of JavaScript.
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
- 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
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
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...
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
Course Labs