Duration : 2 days

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.

Audience

Web developers

Prerequisites

Basic skills for using HTML and CSS

Contents

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)