Introduction to Modern JavaScript

Duration
2 Days
Online Duration
3 Days

This richly layered and introductory course provides the perfect framework in which to learn about JavaScript/ECMAScript. The course especially prepares student for the Advanced JavaScript for Front-end Developers coure. Together they are an excellent booster-pack for frameworks such as Angular, React, Vue and Svelte.

Prerequisites

It is expected that delegates will be familiar with basic programming principles in languages such as Java, C#, Python or a similar programming language as well as show experience in HTML/CSS.

Course Contents

The main focus of this course is to work with developers to significantly raise their level of knowledge and understanding o the core of JavaScript/ECMAScript for Web Development.

JavaScript Introduction

Core JavaScript/ECMAScript

  • Introduction to JavaScript/ECMAScript/ES
  • List the various versions and their support
  • Explain language basics (literals, identifiers, operators and reserved words)
  • Introduce the JavaScript Type System
  • Discuss equality (difference between == and ===)
  • Explain falsy/truthy values
  • Introduce global objects
  • Understand type JavaScript type coercion
  • Declare variables (var, let and const)
  • Discuss advantages of immutable values
  • Declare named functions
  • Introduce different string literals (template strings)
  • Understand variable hoisting
  • Discuss different types of expressions (arithmetic, logical etc)
  • Use control structures (if, while etc)
  • Discuss the disadvantages of using statements over expressions
  • Appreciate strict mode
  • Use linters such as JSHint

OO Basics

  • Object literals
  • Defining properties and methods
  • Define accessors (aka getters/setters)
  • Using shorthand property names
  • Appreciate the Destructuring assignment for objects
  • Use destructuring to when using immutable objects
  • Using constructors

JavaScript Language

  • Understand and use Exceptions
  • Declare and use arrays
  • Basic methods on arrays (pop/push/*(un)shift/slice/splice/…)
  • Basic types (Date, string)
  • More on functions
  • Default values for arguments

Functional JavaScript (Introduction)

  • Principles of Functional Programming
  • Functional Programming in JavaScript
  • Dealing with state and mutability
  • Functions as values
  • Higher-order functions
  • Lambda expressions
  • Use arrow functions (and understand the differences)

More OO and Arrays

Arrays and Iterable

  • recap arrays
  • Using array's higher-order functions
  • Using an array as a functor with map
  • Filter arrays
  • predicate logic on arrays
  • Finding elements

Dealing with null and undefined

  • understand the difference between null and undefined
  • Problems of nullish (null/undefined)
  • Protecting against nullish values
  • Using logical operators (&& and ||)
  • Appreciate Conditional Chaining (es2020)
  • Appreciate Nullish coalescing operator (es2020)

JavaScript in the Browser

Introduction

  • Ways to add JavaScript to pages (Unobtrusive, inline, external)
  • Different ways of loading external javascript (async, deferred)
  • Understand the event loop and the stack

Interacting with the Page

  • Introduce the Window and Document objects
  • Understand the structure of a DOM
  • Navigating the DOM
  • Adding and removing elements
  • Changing element properties (inner text, attributes, properties)
  • Working with events
  • Writing event handlers
  • Understand event bubbling
  • Cancelling default behaviour
For an onsite course please contact us