Web Development:

Introduction to JavaScript

Course Overview

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.

Course Length

4 days

Learning Outcomes / Objectives

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 navigator history, and location objects.

Topic List

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

Exercise: Alerts, Writing, & Changing Background Color

Variables, Arrays and Operators

JavaScript Variables

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

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

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

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

Footer

As one of Central Texas’s most experienced software education centers, a primary training vendor for the State of Texas, and a Microsoft Certified Solution Partner, Microassist has successfully worked with clients in fields ranging from advertising, real estate, law and politics to state and government agencies.