JavaScript for Web Designers Course

  • Creating and using variables
  • Working with primitive data types
  • Creating custom objects
  • Using event handlers to handle user-triggered events
  • Defining and invoking functions
  • Using conditional constructs and loops
  • Debugging JavaScript code
  • Using arrow functions
  • Including JavaScript in a Web page
  • Using the Document Object Model (DOM) to access the HTML elements on the page dynamically
  • Using JavaScript objects effectively, including the windowobject and the navigator object
  • Performing pattern matching with regular expressions
  • Validating a form
  • Using Geolocation and Web Storage JavaScript APIs
  • Working with JSON objects
  • Using Ajax to make asynchronous calls to a Web server

Course Prerequisites

Basic computer skills and knowledge of HTML fundamentals including use of Cascading Style Sheets is recommended, but not required to learn JavaScript programming. The Website Development with HTML5, CSS and Bootstrap course provides a thorough introduction into the creation of a Website using HTML and CSS.

Course Overview

Overview of the JavaScript Language

JavaScript Fundamentals

  • Typical Uses of JavaScript
  • Evolution of the JavaScript Language
  • ECMAScript Version Support
  • What is Core JavaScript?
  • What are JavaScript APIs?
  • Writing JavaScript in Visual Studio Code
  • Using Strict Mode
  • JavaScript and Whitespace
  • Adding Comments
  • Declaring Variables
    • var, let and const Keywords
    • Local vs. Global Variables
    • Declaring Block-Scoped Variables
  • JavaScript DataTypes
    • Primitive Types
    • Objects
  • Performing Data Conversions
  • Working with JavaScript Operators
    • Assignment Operators
    • Type Operators
      • Bitwise Operators
      • Conditional Operator

Working with Numeric Data

Dealing with Errors

  • Solving Precision Problems with Numbers
  • Rounding Numbers
  • Creating Random Numbers
  • Arithmetic Operation
  • Working with Exponents
  • Converting to Numbers
  • parseInt, parseFloat and Number Functions
  • Types of JavaScript Errors
  • Error Handling
    • try
    • catch finally
  • Throwing Custom Errors with throw

Controlling Flow

Working with Arrays

  • Creating Boolean Expressions
    • Using Standard and Strict Equality Operators
    • Using Logical and Comparison Operators
  • Conditional Constructs
    • if else
    • switch
  • Looping Constructs
    • do while
    • while
    • for
    • for in
    • for…of
  • Branching Statements
    • break
    • continue
    • Using Labels
  • Creating Arrays
    • Using the Array Constructor
    • Using Literal Notation
    • String.split()
    • Array.of()
  • Accessing Array Elements
  • Common Array Methods
    • forEach()
    • includes()
    • find() and findIndex()
  • Adding and Removing Elements
  • Sorting Arrays
    • Creating a Custom Sort Function
  • Looping through an Array

Working with Strings

Implementing Functions

  • Creating String Objects
  • Using String Methods
    • Searching within a String
    • Returning a Substring
    • Converting Character Case
  • Template Literals
  • Escape Sequences
  • Declaring Functions
  • Function Parameters
    • Default Parameters
    • Rest Parameters
  • Invoking Functions
    • Passing Arguments
    • Spread Operator
  • Named and Anonymous Functions
  • Local vs. Global Variables
  • Returning Values from a Function
  • The this Keyword
  • IIFEs
  • Closures
  • Callback Functions
  • Arrow Functions

Using JavaScript in the Browser

Browser Object Model

  • Embedding JavaScript in a Page
  • Referencing an External Script File
  • Using the JavaScript Console
    • Logging Messages in the Console
    • Debugging with Console
  • Deferring Script Loading
  • Where to Include JavaScript
  • DOMContentLoaded vs Load Events
  • Overview of the Browser Object Model
  • Using the window Object
    • Opening and Closing Windows
    • Using Timers
    • Interacting with the User with Dialogs
  • Using the document Object
    • Writing to the Web Page
    • Useful Properties of the Document
  • navigator Object
  • Feature detection
  • location Object
  • screen Object

Introduction to the Document Object Model (DOM)

Event Handling in JavaScript

  • Overview of Common DOM Types
  • Selecting DOM Elements
    • Selecting Elements By Id and Name
    • Selecting Elements By Class
    • Using CSS Selectors to Select Elements
  • Modifying Page Content with the DOM
    • innerHTML and textContent Properties
    • createElement
    • createDocumentFragment
    • Accessing Attributes
  • Overview of JavaScript Events
    • The event Object Members
    • Event Capturing and Bubbling
  • Adding Event Handlers
    • Traditional (Inline) Model
    • Registering Events in JavaScript
    • Adding Multiple Handlers with addEventListener
  • Mouse and Keyboard Events
  • Preventing Default Behavior
  • Canceling Events

Scripting CSS with JavaScript

Working with Forms

  • Using the style Property
  • CSSStyleDeclaration Objects
  • Get Computed Style
  • Modifying Classes with the class List API
  • Enhancing Forms with JavaScript
    • Preventing a Double Submission
    • Selecting All Checkboxes
    • Conditionally Showing Fields
  • Working with Form Elements

Form Validation

Using Regular Expressions

  • Client-Side vs Server-Side Validation
  • Validating Form Fields
    • Checking Required Fields
    • Checking Length of InputCanceling Form Submission
  • Overview of HTML 5 Validation
  • Constraint API
  • Overview of Regular Expressions
  • Using Regular Expressions in JavaScript
    • Creating a RegExp Object
    • Using i and g Flags
  • Pattern Matching with Regular Expressions
  • Using Backreferences

Working with JavaScript Objects and JSON

Using Ajax

  • Understanding Objects
  • Defining Custom Objects
    • Object Literal Notation
    • Defining Properties and Methods
    • Creating a Constructor
  • Using the in and instanceof Operators
  • Overview of JSON
  • Using JSON.stringify and JSON.parse
  • Overview of Ajax
  • The XMLHttpRequest Object
  • Configuring an Ajax Request
  • Processing JSON with Ajax
  • Using Ajax to Call a Web Service

HTML5 JavaScript APIs

  • Overview of APIs
  • Using Modernizr
  • Geolocation API
    • Using the getCurrentPosition() Method
    • The Position Object
  • Using the Google Maps JavaScript API
    • Obtaining an API Key
    • Creating a Map
    • Adding Custom Markers to a Map
    • Adding Info Windows to a Map
  • Web Storage API
  • Local Storage
  • Session Storage