Comprehensive Javascript

This course provides a complete solution for delivering private or public technical training. Students learn to use JavaScript effectively to make their web pages more dynamic and functional and to reduce the number of roundtrips to the server.

Learning Objectives

• Learn how JavaScript is used
• Learn JavaScript syntax
• Learn about objects, methods, and properties

• Work with JavaScript variables
• Create your own functions in JavaScript
• Write flow control logic in JavaScript
• Validate forms with JavaScript
• Create roll-over images with JavaScript
• Open and work with new windows
• Work with JavaScript timers and intervals
• Work with the navigator history, and location objects
• Review JavaScript functions and the DOM
• Introduce / Review XmlHttpRequest and JSON
• Use advanced techniques, such as anonymous function
• Use regular expressions for advanced form validation
• Create dynamic forms with JavaScript
• Create dynamic web applications with JavaScript and Dynamic HTML
• Check for browser support on a feature by feature basis
• Create dynamic menus
• Create stunning visual effects with Dynamic HTML
• Position elements dynamically
• Modify content on the fly

Prerequisites: Experience in HTML is required. Experience CSS would be beneficial.

Course Outline

1. JavaScript Basics
   1. The Name "JavaScript"
   2. The HTML DOM
   3. JavaScript Syntax

                                                              i.      Basic Rules

                                                            ii.      Dot Notation

                                                          iii.      Square Bracket Notation

4. Where Is JavaScript Code Written?
5. JavaScript Objects, Methods and Properties

                                                              i.      Methods

                                                            ii.      Properties

                                                          iii.      The Implicit window Object

                                                          iv.      The getElementById() Method

6. Event Handlers

2. Variables, Arrays and Operators
   1. JavaScript Variables

                                                              i.      A Loosely-typed Language

                                                            ii.      Storing User-Entered Data

2. Arrays

                                                              i.      Associative Arrays

                                                            ii.      Array Properties and Methods

3. JavaScript Operators

3. JavaScript Functions
   1. Built-in Functions

                                                              i.      Number(object)

                                                            ii.      String(object)

                                                          iii.      isNaN(object)

                                                          iv.      parseFloat() and parseInt()

2. Built-in Functions vs. Methods
3. User-defined Functions

                                                              i.      Function Syntax

                                                            ii.      Passing Values to Functions

                                                          iii.      A Note on Variable Scope

                                                          iv.      Returning Values from Functions

4. Built-In JavaScript Objects
   1. String
   2. Math
   3. Date
   4. typeof Operator

5. Conditionals and Loops
   1. Conditionals

                                                              i.      if - else if - else Conditions

                                                            ii.      Switch / Case

2. Loops

                                                              i.      while Loop Syntax

                                                            ii.      do...while Loop Syntax

                                                          iii.      for Loop Syntax

                                                          iv.      for...in Loop Syntax

6. JavaScript Form Validation
   1. Accessing Form Data
   2. Basics of Form Validation

                                                              i.      The this Object

                                                            ii.      Cleaner Validation

3. Validating Radio Buttons
4. Validating Checkboxes
5. Validating Select Menus
6. Focus, Blur, and Change Events

                                                              i.      Focus and Blur

                                                            ii.      Change

7. Validating Textareas

7. Images, Windows and Timers
   1. Image Rollovers
   2. Preloading Images
   3. Creating a Slide Show
   4. Windows
   5. Timers
   6. Popup Timed Slide Show

8. Navigator, History, and Location Objects
   1. The navigator Object
   2. Feature Detection
   3. history Object
   4. location Object
   5. Creating a Simple Quiz

9. Quick JavaScript Recap
   1. Primitive data types

                                                              i.      Null

                                                            ii.      Undefined

                                                          iii.      Boolean

                                                          iv.      Number

                                                            v.      String

2. Native Types

                                                              i.      Date

                                                            ii.      Array

                                                          iii.      Object

                                                          iv.      Regular Expressions

3. Functions
4. The DOM

                                                              i.      The DOM is not JavaScript

                                                            ii.      JavaScript is not the DOM

                                                          iii.      The window object

5. The XMLHttpRequest object
6. JSON

10. Advanced Techniques
    1. Optional Function Arguments
    2. Truthy and Falsy
    3. Default Operator

                                                              i.      Default Operator Gotcha!

4. Functions Passed as Arguments
5. Anonymous Functions
6. Inner Functions
7. Observing and Capturing Events
8. The eval() Function
9. Variable Scope
10. Error Handling

                                                              i.      Runtime Errors

11. The delete Operator

11. Regular Expressions
    1. Getting Started

                                                              i.      JavaScript's Regular Expression Methods

                                                            ii.      Flags

                                                          iii.      String Methods

2. Regular Expression Syntax

                                                              i.      Start and End ( ^ $ )

                                                            ii.      Number of Occurrences ( ? + * {} )

                                                          iii.      Common Characters ( . \d \D \w \W \s \S )

                                                          iv.      Grouping ( [] )

                                                            v.      Negation ( ^ )

                                                          vi.      Subpatterns ( () )

                                                        vii.      Alternatives ( | )

                                                      viii.      Escape Character ( \ )

3. Backreferences
4. Form Validation with Regular Expressions
5. Cleaning Up Form Entries

12. The HTML Document Object Model
    1. innerHTML
    2. Accessing Element Nodes

                                                              i.      getElementById()

                                                            ii.      getElementsByTagName()

                                                          iii.      getElementsByClassName()

                                                          iv.      querySelectorAll()

                                                            v.      querySelector()

3. Accessing Element and Text Nodes Hierarchically
4. Attaching Events

                                                              i.      Event Propagation: Capturing and Bubbling

                                                            ii.      Detaching Events

5. Accessing Attribute Nodes

                                                              i.      getAttribute()

                                                            ii.      attributes[]

6. Accessing Nodes by Type, Name or Value

                                                              i.      nodeType

                                                            ii.      nodeName

7. Removing Nodes from the DOM

                                                              i.      DOM Differences: The Whitespace Problem

8. Creating New Nodes
9. Identifying the Target of an Event

13. Dynamic Forms
    1. Jump Menus

                                                              i.      The options[] Collection

                                                            ii.      The selectedIndex Property

                                                          iii.      Disabling Form Elements

2. Adding Options to a Select Menu
3. Cascading Select Menus

                                                              i.      Making the Code Modular

4. Creating a JavaScript Timer
5. A Sample Quiz Tool

14. Dynamic HTML
    1. Introduction
    2. Accessing and Modifying Styles
    3. JavaScript style Properties
    4. Hiding and Showing Elements
    5. Manipulating Tables
    6. Dynamically Changing Dimensions

                                                              i.      Creating a Timed Slider

7. Positioning Elements Dynamically

                                                              i.      Creating a Different Timed Slider

8. Changing the Z-Index
9. A Note on JavaScript Frameworks