JavaScript: The soil from which the modern web grows

How to use the exercise files

Exploring the lab environment

JavaScript: First contact

Navigating the JS landscape

Tools for working with JavaScript

Linting and formatting

Get to know the browser console

JavaScript language basics

Learning JavaScript backward

JavaScript in an HTML document

JavaScript as an external file

Modern JavaScript loading

JavaScript modules

Objects: A practical introduction

JavaScript objects: The code version

Object containers

Object properties

Accessing objects

Accessing object properties

Practice: Build a new object

Object methods

Practice: Build a new method

Classes: Object blueprints

Object constructors

Practice: Build a new object with a constructor

Global objects

Challenge intro: Create a new object type

Solution: Create a new object type

Mix text and variables with template literals

Traditional string output

Challenge intro: Create a template literal

Solution: Create a template literal

DOM: The Document Object Model

Access elements with querySelector methods

Access elements using older methods

Practice: Find an element

Modifying element classes

Attributes

Inline style

Practice: Modify classes and attributes, and styles

Add DOM elements

Challenge intro: Create elements

Solution: Create elements

Variables: Containers for everything

Var

Scope

Let

Const

Data types

Assignment vs. comparison

Math operators

Challenge intro: Calculate sales tax

Solution: Calculate sales tax

Arrays explained

Arrays in code

Array methods

Challenge intro: Array manipulation

Solution: Array manipulation

The real-world function

Functions and methods

A standard function

The arrow function

Arrow functions and "this"

Practice: Build a function

Pass data to a function with parameters

Return values from a function

Practice: Pass values between functions

Callbacks

Conditional if...else statement

Logical operators

Conditional switch statement

Looping through content

Using the map() array method

Challenge intro: Create a content factory

Solution: Create a content factory

DOM events explained

Typical DOM events

Event listeners

Practice: Experiment with event listeners

Advanced event listeners and "this"

Pass arguments through event listeners

Challenge intro: Create an event listener

Solution: Create an event listener

Troubleshooting JavaScript in the browser

Making sense of a React component

Next steps on your learning journey