Table of Contents
Introduction
Parlez-vous JavaScript?
Contacting Me/Getting Help
1 Hello, World!
What Is JavaScript?
A Simple Example
Code Editing Tools
The HTML Document
Looking at the Code: Statements and Functions
I The Basic Stuff
2 Values and Variables
Using Variables
More Variable Stuff
Naming Variables
More on Declaring and Initializing Variables
3 Functions
What Is a Function?
A Simple Function
Creating a Function That Takes Arguments
Creating a Function That Returns Data
The Return Keyword
Exiting the Function Early
4 Conditional Statements: If, Else, and Switch
The If/Else Statement
Meet the Conditional Operators
Creating More Complex Expressions
Variations on the If/Else Statement
Phew
Switch Statements
Using a Switch Statement
Similarity to an If/Else Statement
Deciding Which to Use
5 Meet the Loops: For, While, and Do...While!
The for Loop
The Starting Condition
Terminating Condition (aka Are we done yet?)
Reaching the End
Putting It All Together
Some for Loop Examples
Stopping a Loop Early
Skipping an Iteration
Going Backwards
You Don’t Have to Use Numbers
Array! Array! Array!
Oh No He Didn’t!
The Other Loops
The while Loop
The do...while Loop
6 Timers
Meet the Three Timers
Delaying with setTimeout
Looping with setInterval
Animating Smoothly with requestAnimationFrame
7 Variable Scope
Global Scope
Local Scope
Miscellaneous Scoping Shenanigans
Declarations Using var Do Not Support Block Scoping
How JavaScript Processes Variables
Closures
8 Closures
Functions within Functions
When the Inner Functions Aren’t Self-Contained
9 Where Should Your Code Live?
The Options on the Table
Approach #1: All the Code Lives in Your HTML Document
Approach #2: The Code Lives in a Separate File
The JavaScript File
Referencing the JavaScript File
So...Which Approach to Use?
Yes, My Code Will Be Used on Multiple Documents!
No, My Code Is Used Only Once, on a Single HTML Document!
10 Commenting Your Code
What Are Comments?
Single Line Comments
Multi-line Comments
Commenting Best Practices
II It’s an Object-Oriented World
11 Of Pizza, Types, Primitives, and Objects
Let’s First Talk About Pizza
From Pizza to JavaScript
What Are Objects?
The Predefined Objects Roaming Around
12 Strings
The Basics
String Properties and Methods
Accessing Individual Characters
Combining (aka Concatenating) Strings
Making Substrings out of Strings
Splitting a String/split
Finding Something Inside a String
Upper and Lower Casing Strings
13 When Primitives Behave Like Objects
Strings Aren’t the Only Problem
Let’s Pick on Strings Anyway
Why This Matters
14 Arrays
Creating an Array
Accessing Array Values
Adding Items to Your Array
Removing Items from the Array
Finding Items in the Array
Merging Arrays
15 Numbers
Using a Number
Operators
Doing Simple Math
Incrementing and Decrementing
Special Values—Infinity and NaN
Infinity
NaN
The Math Object
The Constants
Rounding Numbers
Trigonometric Functions
Powers and Square Roots
Getting the Absolute Value
Random Numbers
16 A Deeper Look at Objects
Meet the Object
Creating Objects
Specifying Properties
Creating Custom Objects
The this Keyword
17 Extending Built-in Objects
Say Hello to Prototype...Again—Sort of!
Extending Built-in Objects Is Controversial
You Don’t Control the Built-in Object’s Future
Some Functionality Should Not Be Extended or Overridden
18 Booleans and the Stricter === and !== Operators
The Boolean Object
The Boolean Function
Strict Equality and Inequality Operators
19 Null and Undefined
Null
Undefined
20 Immediately Invoked Function Expressions
Writing a Simple IIFE
Writing an IIFE That Takes Arguments
When to Use an IIFE
Avoiding Code Collisions
Closures and Locking in State
Making Things Private
III Working with the DOM
21 JS, The Browser, and The DOM
What HTML, CSS, and JavaScript Do
HTML Defines the Structure
Prettify My World, CSS!
It’s JavaScript Time!
Meet the Document Object Model
The Window Object
The Document Object
22 Finding Elements in the DOM
Meet the querySelector Family
querySelector
querySelectorAll
It Really Is the CSS Selector Syntax
23 Modifying DOM Elements
DOM Elements Are Objects—Sort of!
Let’s Actually Modify DOM Elements
Changing an Element’s Text Value
Attribute Values
24 Styling Your Content
Why Would You Set Styles Using JavaScript?
A Tale of Two Styling Approaches
Setting the Style Directly
Adding and Removing Classes Using classList
Adding Class Values
Removing Class Values
Toggling Class Values
Checking Whether a Class Value Exists
Going Further
25 Traversing the DOM
Finding Your Way Around
Dealing with Siblings and Parents
Let’s Have Some Kids!
Putting It All Together
Checking Whether a Child Exists
Accessing All the Child Elements
Walking the DOM
26 Creating and Removing DOM Elements
Creating Elements
Removing Elements
Cloning Elements
27 In-Browser Developer Tools
Meet the Developer Tools
Inspecting the DOM
Debugging JavaScript
Meet the Console
Inspecting Objects
Logging Messages
IV Dealing with Events
28 Events
What Are Events?
Events and JavaScript
1. Listening for Events
2. Reacting to Events
A Simple Example
The Event Arguments and the Event Type
29 Event Bubbling and Capturing
Event Goes Down. Event Goes Up.
Meet the Phases
Who Cares?
Event, Interrupted
30 Mouse Events
Meet the Mouse Events
Clicking Once and Clicking Twice
Mousing Over and Mousing Out
The Very Click-like Mousing Down and Mousing Up Events
The Event Heard Again...and Again...and Again!
The Context Menu
The MouseEvent Properties
The Global Mouse Position
The Mouse Position Inside the Browser
Detecting Which Button Was Clicked
Dealing with the Mouse Wheel
31 Keyboard Events
Meet the Keyboard Events
Using These Events
The Keyboard Event Properties
Some Examples
Checking That a Particular Key Was Pressed
Doing Something When the Arrow Keys Are Pressed
Detecting Multiple Key Presses
32 Page Load Events and Other Stuff
The Things That Happen During Page Load
Stage Numero Uno
Stage Numero Dos
Stage Numero Three
The DOMContentLoaded and load Events
Scripts and Their Location in the DOM
Script Elements—Async and Defer
async
defer
33 Handling Events for Multiple Elements
How to Do All of This
A Terrible Solution
A Good Solution
Putting It All Together
34 Conclusion
Glossary
Index
