Modern JavaScript programming

Last modified: 2022-08-17

Audience

Web developers

Duration

3 days

Prerequisites

Basic skills for using HTML and CSS

Description

JavaScript is a programming language that is used to add interactivity to web pages. This allows users to interact with the web page in a more natural way. Most modern web platforms use JavaScript to add interactivity to web page (WordPress, Office 365, Google Maps, etc).

Fact: JavaScript is the most popular programming language in the world.

Course Outline

JavaScript Fundamentals

  • What is JavaScript?
  • Programming environment
  • Browser vs CmdLine vs Server
  • Hello World example

JavaScript Variables

  • Variable declaration (const, let, var)
  • Strict mode
  • Hoisting
  • Scope
  • Types (Number, Boolean, Date, Math, String, Array)
  • Type coercion
  • Typeof
  • Equality vs Strict equality
  • Operators (Logical and Arithmetic)
  • String manipulation
  • Date manipulation
  • Loops (For, while)
  • Conditionals (if, switch, ternary, operators)

Arrays and Objects

  • Working with Arrays
  • Destructuring
  • Spread operator
  • Defining Objects
  • Manipulating Objects
  • Object Literals
  • Property Shorthand

Functions

  • Function declaration
  • Arrow functions
  • Parameters and default parameters
  • Return values
  • Rest parameters and spread operator
  • Destructuring
  • Closure
  • Hoisting
  • Recursion

Tooling

  • Visual Studio Code
  • Browsers (Chrome, Firefox, Edge, etc)
  • Debuggers
  • Kangax

Working with the Document Object Model (DOM)

  • DOM Manipulation
  • Node types (Element, Text, Comment)
  • Window object: alerts, dialogs, timers, etc
  • Working with datasets

Events

  • Event handlers (onclick, onchange, onsubmit, etc)
  • Event delegation (event bubbling)
  • Event.target and event.currentTarget
  • preventDefault() and stopPropagation()

Validating forms

  • Validation with HTML5
  • Validation with JavaScript
  • Intro to Regular Expressions

AJAX and async requests

  • XMLHttpRequest (xhr)
  • Fetch API (fetch)
  • Async Callbacks
  • Promises
  • Async/await
  • FormData

Classes

  • Classes
  • Inheritance
  • Constructors
  • Getters and setters
  • Private properties
  • Static properties and methods
  • Base class access
  • Arrow functions and the 'this' scope

Error handling

  • Try
  • Catch
  • Throw
  • Finally

Modules

  • Import
  • Export
  • Default & Wildcard
  • Html elements to declare modules

Advanced Topics

  • Higher Order Functions
  • Node.js
  • NPM
  • Linters (ESLint, Stylelint, etc)
  • Test Framework (Jest, Cypress, etc)