In this hands-on JavaScript training course, students will learn the basics of JavaScript syntax from variables and arrays to conditionals and loops. They will also learn how to use built-in objects and functions as well as how to create their own functions. Form validation is covered both at an introductory level as well as using Regular Expressions. Finally, students will learn to use JavaScript to manipulate CSS styles on the fly in response to user interaction.

Objectives

Effectively use JavaScript syntax to create dynamic web pages.

Manipulate and retrieve information from objects in the HTML DOM.

Use event handlers to call JavaScript code to react to user input.

Create variables and arrays to hold your program data.

Create functions to modularize your JavaScript programs.

Use the built-in String, Math, and Data JavaScript objects.

Control the flow of your programs with loops and conditionals.

Create roll-over images with JavaScript.

Use Regular Expressions to validate forms.

Create dynamic forms.

Dynamically manipulate the DOM tree.

Detailed Outline

1. JavaScript Basics
   • The Name “JavaScript”
   • The HTML DOM
   • JavaScript Syntax
   • Dot Notations
   • Square Bracket Notation
   • Where Is JavaScript Code Written?
   • Methods
   • Properties
   • The Implicit window Object
   • The getElementsById() Method
   • Event Handlers
2. Variables, Arrays and Operators
   • JavaScript Variables
   • A Loosely-Typed Language
   • Storing User-Entered Data
   • Arrays
   • Associative Arrays
   • Array Properties and Methods
   • JavaScript Operators
3. JavaScript Functions
   • Number(object)
   • String(object)
   • isNaN(object)
   • parseFloat() and parseInt()
   • Built-in Functions vs. Methods
   • Function Syntax
   • Passing Values to Functions
   • Returning Values from Functions
4. Built-In JavaScript Objects
   • String
   • Math
   • Date
   • typeof Operator
5. Conditionals and Loops
   • if – else if – else Conditions
   • Switch / Case
   • while Loop Syntax
   • do…while Loop Syntax
   • for Loop Syntax
   • for…in Loop Syntax
6. JavaScript Form Validation
   • Accessing Form Data
   • Basics of Form Validation
   • The this Object
   • Cleaner Validation
   • Validating Radio Buttons
   • Validating Checkboxes
   • Validating Select Menus
   • Focus, Blur, and Change Events
   • Validating Textareas
7. Images, Windows, and Timers
   • Image Rollovers
   • Preloading Images
   • Creating a Slide Show
   • Windows
   • Timers
   • Popup Timed Slide Show
8. Navigator, History, and Location Objects
   • The navigator Object
   • Feature Detection
   • The history Object
   • The location Object
   • Creating a Simple Quiz
9. Advanced Techniques
   • Optional Function Arguments
   • Truthy and Falsy
   • Default Operator
   • Functions Passed as Arguments
   • Anonymous Functions
   • Inner Functions
   • Observing and Capturing Events
   • The eval() Function
   • Variable Scope
   • Error Handling
   • The delete Operator
10. Regular Expressions
    • Getting Started
    • JavaScript’s Regular Expression Methods
    • Flags
    • String Methods
    • Regular Expression Syntax
    • Start and End (?$)
    • Number of Occurrences
    • (.\d \D \w \W \s \S)
    • Grouping ( [] )
    • Negation (?)
    • Subpatterns ( ( ) )
    • Alternatives ( | )
    • Escape Character ( \ )
    • Backreferences
    • Form Validation with Regular Expressions
    • Cleaning Up Form Entries
11. The HTML Document Object Model
    • innerHTML
    • Accessing Element Nodes
    • getElementByld()
    • getElementsByTagName()
    • getElementsByClassName()
    • querySelectorAll()
    • querySelector()
    • Accessing Element and Text Nodes Hierarchically
    • Attaching Events
    • Accessing Attribute Nodes
    • Accessing Nodes by Type, Name or Value
    • Removing Nodes from the DOM
    • Creating New Nodes
    • Identifying the Target of an Event
12. Dynamic Forms
    • Jump Menus
    • Adding Options to a Select Menu
    • Cascading Select Menus
    • Creating a JavaScript Timer
13. Dynamic HTML
    • Introduction
    • Accessing and Modifying Styles
    • JavaScript style Properties
    • Hiding and Showing Elements
    • Manipulating Tables
    • Dynamically Changing Dimensions
    • Creating a Timed Slider
    • Positioning Elements Dynamically
    • Creating a Different Timed Slider
    • Changing the Z-Index
    • A Note on JavaScript Frameworks