Course Overview
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 course. Together they are an excellent booster-pack for frameworks such as Angular, React, Vue and Svelte.
Course 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.
Outline
The main focus of this course is to work with developers to significantly raise their level of knowledge and understanding 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