Cover
Title Page
Copyright Page
Contents at a Glance
Table of Contents
Introduction
Parlez-vous JavaScript?
Contacting Me/Getting Help
1 Hello, World!
What Is JavaScript?
Hello, World!
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 Looping with For, While, and Do…While!
The for Loop
The Starting Point
The Step
The Condition (aka How Long to Keep Looping)
Putting It All Together
Some for Loop Examples
Breaking a Loop
Skipping an Iteration
Going Backwards
You Don’t Have to Use Numbers
Oh, No He Didn’t!
The Other Loops
The while Loop
The do...while Loop
6 Commenting Your Code...FTW!
What Are Comments?
Single Line Comments
Multi-Line Comments
Commenting Best Practices
7 Timers
Delaying with setTimeout
Looping with setInterval
Animating Smoothly with requestAnimationFrame
8 Variable Scope
Global Scope
Local Scope
Miscellaneous Scoping Shenanigans
Block Scoping
How JavaScript Processes Variables
Closures
9 Closures
Functions within Functions
When the Inner Functions Aren’t Self-Contained
10 Where Should Your Code Live?
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!
II: It’s an Object-Oriented World
11 Console Logging Basics
Meet the Console
Displaying the Console
If You Want to Follow Along
Console Logging 101
Meet the Log Method
Going Beyond Predefined Text
Displaying Warnings and Errors
12 Of Pizza, Types, Primitives, and Objects
Let’s First Talk About Pizza
From Pizza to JavaScript!
What Are Objects?
The Predefined Objects Roaming Around in JavaScript
13 Arrays
Creating an Array
Accessing Array Values
Adding Items to Your Array
Removing Items from the Array
Finding Items in the Array
Merging Arrays
Mapping, Filtering, and Reducing Arrays
The Old School Way
Modifying Each Array Item with Map
Filtering Items
Getting One Value from an Array of Items
A Short Foray into Functional Programming
14 Strings
The Basics
String Properties and Methods
Accessing Individual Characters
Combining (aka Concatenating) Strings
Getting Substrings out of Strings
Splitting a String/split
Finding Something Inside a String
Upper and Lower Casing Strings
15 When Primitives Behave Like Objects
Strings Aren’t the Only Problem
Let’s Pick on Strings Anyway
Why This Matters
16 Numbers
Using a Number
Operators
Doing Simple Math
Incrementing and Decrementing
Hexadecimal and Octal Values
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
17 Getters and Setters
A Tale of Two Properties
Meet Getters and Setters
Shout Generator
Logging Activity
Property Value Validation
18 A Deeper Look at Objects
Meet the Object
Creating Objects
Adding Properties
Removing Properties
What Is Going on Behind the Scenes?
Creating Custom Objects
The this Keyword
19 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
20 Using Classes
The Class Syntax and Object Creation
Creating an Object
Meet the Constructor
What Goes Inside the Class
Extending Objects
21 Booleans and the Stricter === and !== Operators
The Boolean Object
The Boolean Function
Strict Equality and Inequality Operators
22 Null and Undefined
Null
Undefined
III: Working with the DOM
23 All About JSON (aka JavaScript Object Notation)
What Is JSON?
Looking Inside a JSON Object
Property Names
The Values
Reading JSON Data
Parsing JSON-looking Data into Actual JSON
Writing JSON Data?
24 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
25 Finding Elements in the Dom
Meet the querySelector Family
querySelector
querySelectorAll
It Really Is the CSS Selector Syntax
26 Modifying Dom Elements
DOM Elements Are Objects—Sort of!
Let’s Actually Modify DOM Elements
Changing an Element’s Text Value
Attribute Values
27 Styling Our Content
Why Would We Set Styles Using JavaScript?
A Tale of Two Styling Approaches
Setting the Style Directly
Adding and Removing Classes Using JavaScript
Checking Whether a Class Value Exists
Going Further
28 Traversing the Dom
Finding Your Way Around
Dealing with Siblings and Parents
Let’s Have Some Kids!
Putting It All Together
Checking If A Child Exists
Accessing All the Child Elements
Walking the DOM
29 Creating and Removing Dom Elements
Creating Elements
Removing Elements
Cloning Elements
30 In-Browser Developer Tools
Meet the Developer Tools
Inspecting the DOM
Debugging JavaScript
Meet the Console
Inspecting Objects
Logging Messages
IV: Dealing with Events
31 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
32 Event Bubbling and Capturing
Event Goes Down. Event Goes Up
Meet the Phases
Who Cares?
Event, Interrupted
33 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
34 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
35 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
36 Handling Events for Multiple Elements
How to Do All of This
A Terrible Solution
A Good Solution
Putting It All Together
37 Conclusion
Glossary
A-F
G-S
T-W
Index
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W