In this JavaScript training course, 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.
Goals
Learn how JavaScript is used.
Learn JavaScript syntax.
Learn about objects, methods, and properties.
Learn to work with JavaScript variables.
Learn to create your own functions in JavaScript.
Learn to write flow control logic in JavaScript.
Learn to validate forms with JavaScript.
Learn to create roll-over images with JavaScript.
Learn to open and work with new windows.
Learn to work with JavaScript timers and intervals.
Learn to work with the navigatorhistory, and location objects.
Outline
JavaScript Basics
The Name "JavaScript"
What is ECMAScript?
The HTML DOM
JavaScript Syntax
Accessing Elements
Dot Notation
Square Bracket Notation
Where Is JavaScript Code Written?
The "javascript" Pseudo-Protocol
JavaScript Objects, Methods and Properties
Methods
Properties
The Implicit window Object
Exercise: Alerts, Writing, and Changing Background Color
Variables, Arrays and Operators
JavaScript Variables
A Loosely typed Language
Variable Naming
Storing User Entered Data
Constant
Associative Arrays
Array Properties and Methods
Exercise: Using Variables
Arrays
Exercise: Working with Arrays
JavaScript Operators
Exercise: Working with Operators
JavaScript Functions
Global Functions
Exercise: Working with Global Functions
User-defined Functions
Exercise: Writing a JavaScript Function
Returning Values from Functions
Event Handlers
Event Handlers
Exercise: Using Event Handlers
Dot Notation and Square Bracket Notation
querySelector()
Exercise: Working with querySelector()
Exercise: Working with Hierarchical Node Properties
Built-In JavaScript Objects
String
Math
Date
The typeof Operator
Helper Functions
Exercise: Returning the Day of the Week as a String
Conditionals and Loops
Conditionals
Exercise: Conditional Processing
Loops
Exercise: Working with Loops
JavaScript Form Validation
Accessing Form Data
Exercise: Textfield to Textfield
Basics of Form Validation
Exercise: Validating a Registration Form
Validating Radio Buttons
Validating Check Boxes
Validating Select Menus
Focus, Blur, and Change Events
Validating Textareas
Exercise: Improving the Registration Form
The HTML Document Object Model
The innerHTML Property
Accessing Element Nodes
Exercise: Accessing Elements
Attaching Events
Exercise: Attaching Events
Event Propagation: Capturing and Bubbling
Exercise: A Simple Soccer Game
Accessing Attribute Nodes
getAttribute()
attributes[]
hasAttribute()
setAttribute()
removeAttribute()
Accessing Nodes by Type, Name or Value
Removing Nodes from the DOM
Creating New Nodes
Identifying the Target of an Event
Exercise: Creating and Inserting DOM Nodes
CSS Object Model
Changing CSS with JavaScript
Hiding and Showing Elements
Exercise: Showing and Hiding Elements
Manipulating Tables
Exercise: Tracking Results in the Math Quiz
Dynamically Changing Dimensions
Positioning Elements Dynamically
Exercise: Changing the Math Quiz Timer to a Slider
Changing the Z-Index
The CSS Object Model
Images, Windows and Timers
Image Rollovers
Preloading Images
Exercise: Creating a Slide Show
Windows
Timers
Exercise: Popup Timed Slide Show
Debugging and Testing with Chrome
Chrome DevTools
The Panels
Exercise: Using the Chrome DevTools "Elements" and "Console" Panels
The Sources Panel
Exercise: Using the Chrome DevTools "Sources" Panel
Other DevTools Panels
Chrome DevTools API and Extensions
Exercise: Accessibility Developer Tools Extension
Class Materials
Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.
Class Prerequisites
Experience in the following is required for this JavaScript class:
HTML
Experience in the following would be useful for this JavaScript class:
CSS
Programming experience
Prerequisite Courses
Courses that can help you meet these prerequisites: