Table of contents

1. Introduction

Step 1 | Introduction

Step 2 | JavaScript overview

Step 3 | First steps in JavaScript

Step 4 | Example: Printing values

2. Using built-in data types and functions

Step 1 | Using built-in data types and functions

Step 2 | Brief review of programming concepts: variables and constants

Step 3 | Brief review of programming concepts: data types

Step 4 | Brief review of programming concepts: built-in functions

Step 5 | Brief review of programming concepts: functions for numbers and strings

Step 6 | Brief review of programming concepts: functions for Booleans

Step 7 | Flow of control, variables, and constants

Step 8 | Example: Declaration and initialization

Step 9 | Types of data

Step 10 | Numbers

Step 11 | Example: Numbers

Step 12 | Shorthand notation

Step 13 | Strings

Step 14 | Booleans

Step 15 | Functions consuming and/or producing Booleans

Step 16 | Automatic type conversion

Step 17 | Automatic type conversion for numbers and strings

Step 18 | Changing types of data

3. Using objects

Step 1 | Using objects

Step 2 | Overview of objects

Step 3 | Example: Syntax for properties and methods

Step 4 | Strings as objects

Step 5 | Math object

Step 6 | Date object

Step 7 | Example: Date object

Step 8 | Exercise: Computing time until midnight

Step 9 | Canvas

Step 10 | Drawing lines and shapes

Step 11 | Example: Drawing lines and shapes

Step 12 | Drawing rectangles and arcs and adding text

Step 13 | Example: Drawing rectangles and arcs and adding text

Step 14 | Exercise: Drawing initials

4. The Document Object Model (DOM)

Step 1 | The Document Object Model (DOM)

Step 2 | DOM properties and one method

Step 3 | Example: Node properties

Step 4 | Tree structure and navigation

Step 5 | Example: Tree structure and navigation

Step 6 | Extracting information about objects

Step 7 | Example: Extracting information

Step 8 | Making changes to objects

Step 9 | Example: Making changes to objects

Step 10 | Adding objects

Step 11 | Example: Adding objects

Step 12 | Rearranging objects

Step 13 | Deleting objects

Step 14 | Exercise: Using the DOM

5. Creating functions

Step 1 | Creating functions

Step 2 | Function definitions in JavaScript

Step 3 | Example: Function definition

Step 4 | Exercise: Computing elapsed minutes

Step 5 | Events

Step 6 | Example: A single-line script

Step 7 | Events and multiple-line scripts

Step 8 | The variable `this`

Step 9 | The window load event

Step 10 | Events and anonymous functions

Step 11 | Event listeners

Step 12 | Example: Event listeners

Step 13 | Example: Using event listeners and `this`

Step 14 | Exercise: Changing a button

Step 15 | Exercise: Clicking a table entry

Step 16 | Events for forms

Step 17 | Example: Using text input

Step 18 | Exercise: Using form input to draw circles

6. Branching and iteration

Step 1 | Branching and iteration

Step 2 | Branching in JavaScript

Step 3 | Exercise: Branching

Step 4 | Exercise: Using clicks and branching

Step 5 | Branching using a switch statement

Step 6 | Example: Switch statement

Step 7 | Iteration in JavaScript

Step 8 | Example: Iteration using while

Step 9 | Example: Iteration using for

Step 10 | Exercise: Using iteration and the canvas

Step 11 | Exercise: Using iteration and the DOM

7. Arrays and array-like objects

Step 1 | Arrays and array-like objects

Step 2 | Arrays in JavaScript

Step 3 | Example: Arrays

Step 4 | Exercise: Using an array

Step 5 | Exercise: Using clicks and arrays

Step 6 | More array methods

Step 7 | Changing the array

Step 8 | More array mutation

Step 9 | Example: Entering form data into an array

Step 10 | Exercise: Sorting and displaying the array

Step 11 | Array-like DOM objects

Step 12 | Exercise: Using clicks and array-like objects

Step 13 | Using the DOM and radio buttons

Step 14 | Using the DOM and the select object

Step 15 | Using the DOM and checkboxes

8. More to explore

Step 1 | More to explore

Step 2 | Creating objects

Step 3 | Example: Creating objects

Step 4 | Creating classes

Step 5 | Example: Creating classes

Step 6 | Example: Using objects for circles

Step 7 | Exercise: Erasing circles

Step 8 | Exercise: Using objects and the DOM

Step 9 | Recursion

Step 10 | Regular expressions

Step 11 | Example: Simple regular expressions

Step 12 | More patterns

Step 13 | Example: More patterns

Step 14 | Exercise: Using recursion and regular expressions

Step 15 | Next steps