Table of Contents
Introduction 1
Parlez-vous JavaScript? 2
Contacting Me/Getting Help 3
Chapter 1 Hello, World! 5
What Is JavaScript? 7
Hello, World! 8
The HTML Document 8
Looking at the Code: Statements and Functions 11
PART I: THE BASIC STUFF
Chapter 2 Values and Variables 15
Using Variables 16
More Variable Stuff 17
Naming Variables 17
More on Declaring and Initializing Variables 18
Chapter 3 Functions 21
What Is a Function? 23
A Simple Function 24
Creating a Function that Takes Arguments 28
Creating a Function that Returns Data 33
The Return Keyword 33
Exiting the Function Early 34
Chapter 4 Conditional Statements: If, Else, and Switch 37
The If / Else Statement 39
Meet the Conditional Operators 41
Creating More Complex Expressions 44
Variations on the If / Else Statement 45
Phew 47
Switch Statements 47
Using a Switch Statement 47
Similarity to an If/Else Statement 51
Deciding Which to Use 53
Chapter 5 Looping with For, While, and DoWhile! 55
The for Loop 57
The Starting Point 61
The Step 61
The Condition (aka How Long to Keep Looping) 62
Putting It All Together 62
Some for Loop Examples 63
Breaking a Loop 63
Skipping an Iteration 64
Going Backwards 64
You Dont Have to Use Numbers 65
Oh, No He Didnt! 65
The Other Loops 66
The while Loop 66
The dowhile Loop 66
Chapter 6 Commenting Your Code...FTW! 69
What Are Comments? 70
Single Line Comments 71
Multi-Line Comments 72
Commenting Best Practices 73
Chapter 7 Timers 77
Delaying with setTimeout 78
Looping with setInterval 79
Animating Smoothly with requestAnimationFrame 80
Chapter 8 Variable Scope 83
Global Scope 84
Local Scope 86
Miscellaneous Scoping Shenanigans 87
Block Scoping 87
How JavaScript Processes Variables 90
Closures 92
Chapter 9 Closures 93
Functions within Functions 94
When the Inner Functions Arent Self-Contained 98
Chapter 10 Where Should Your Code Live? 105
Approach #1: All the Code Lives in Your HTML Document 109
Approach #2: The Code Lives in a Separate File 110
The JavaScript File 110
Referencing the JavaScript File 111
SoWhich Approach to Use? 114
Yes, My Code Will Be Used on Multiple Documents! 114
No, My Code Is Used Only Once on a Single HTML Document! 116
PART II: ITS AN OBJECT-ORIENTED WORLD
Chapter 11 Console Logging Basics 119
Meet the Console 120
Displaying the Console 121
If You Want to Follow Along 124
Console Logging 101 125
Meet the Log Method 125
Going Beyond Predefined Text 127
Displaying Warnings and Errors 128
Chapter 12 Of Pizza, Types, Primitives, and Objects 133
Lets First Talk About Pizza 134
From Pizza to JavaScript! 136
What Are Objects? 138
The Predefined Objects Roaming Around in JavaScript 140
Chapter 13 Arrays 143
Creating an Array 144
Accessing Array Values 145
Adding Items to Your Array 147
Removing Items from the Array 149
Finding Items in the Array 150
Merging Arrays 150
Mapping, Filtering, and Reducing Arrays 151
The Old School Way 151
Modifying Each Array Item with Map 152
Filtering Items 154
Getting One Value from an Array of Items 155
A Short Foray into Functional Programming 157
Chapter 14 Strings 159
The Basics 160
String Properties and Methods 161
Accessing Individual Characters 161
Combining (aka Concatenating) Strings 163
Getting Substrings out of Strings 164
Splitting a String/split 165
Finding Something Inside a String 166
Upper and Lower Casing Strings 168
Chapter 15 When Primitives Behave Like Objects 169
Strings Arent the Only Problem 170
Lets Pick on Strings Anyway 170
Why This Matters 172
Chapter 16 Numbers 175
Using a Number 176
Operators 176
Doing Simple Math 177
Incrementing and Decrementing 177
Hexadecimal and Octal Values 179
Special ValuesInfinity and NaN 180
Infinity 180
NaN 180
The Math Object 180
The Constants 181
Rounding Numbers 182
Trigonometric Functions 183
Powers and Square Roots 184
Getting the Absolute Value 185
Random Numbers 185
Chapter 17 Getters and Setters 187
A Tale of Two Properties 188
Meet Getters and Setters 190
Shout Generator 191
Logging Activity 191
Property Value Validation 192
Chapter 18 A Deeper Look at Objects 195
Meet the Object 196
Creating Objects 197
Adding Properties 197
Removing Properties 200
What Is Going on Behind the Scenes? 201
Creating Custom Objects 205
The this Keyword 209
Chapter 19 Extending Built-in Objects 213
Say Hello to prototypeagainSort of! 214
Extending Built-in Objects is Controversial 219
You Dont Control the Built-in Objects Future 219
Some Functionality Should Not Be Extended or Overridden 219
Chapter 20 Using Classes 221
The Class Syntax and Object Creation 222
Creating an Object 222
Meet the Constructor 224
What Goes Inside the Class 226
Extending Objects 229
Chapter 21 Booleans and the Stricter === and !== Operators 237
The Boolean Object 238
The Boolean Function 238
Strict Equality and Inequality Operators 240
Chapter 22 Null and Undefined 243
Null 244
Undefined 244
PART III: Working with the DOM
Chapter 23 All About JSON (aka JavaScript Object Notation) 247
What Is JSON? 248
Looking Inside a JSON Object 252
Property Names 252
The Values 253
Reading JSON Data 257
Parsing JSON-looking Data into Actual JSON 259
Writing JSON Data? 259
Chapter 24 JS, the Browser, and the Dom 261
What HTML, CSS, and JavaScript Do 262
HTML Defines the Structure 262
Prettify My World, CSS! 264
Its JavaScript Time! 265
Meet the Document Object Model 267
The Window Object 269
The Document Object 269
Chapter 25 Finding Elements in the Dom 273
Meet the querySelector Family 274
querySelector 275
querySelectorAll 275
It Really Is the CSS Selector Syntax 276
Chapter 26 Modifying Dom Elements 279
DOM Elements Are ObjectsSort of! 280
Lets Actually Modify DOM Elements 282
Changing an Elements Text Value 284
Attribute Values 286
Chapter 27 Styling Our Content 289
Why Would We Set Styles Using JavaScript? 290
A Tale of Two Styling Approaches 290
Setting the Style Directly 290
Adding and Removing Classes Using JavaScript 292
Checking Whether a Class Value Exists 294
Going Further 294
Chapter 28 Traversing the Dom 297
Finding Your Way Around 298
Dealing with Siblings and Parents 301
Lets Have Some Kids! 301
Putting It All Together 302
Checking If A Child Exists 303
Accessing All the Child Elements 303
Walking the DOM 303
Chapter 29 Creating and Removing Dom Elements 305
Creating Elements 306
Removing Elements 314
Cloning Elements 315
Chapter 30 In-Browser Developer Tools 323
Meet the Developer Tools 324
Inspecting the DOM 326
Debugging JavaScript 331
Meet the Console 337
Inspecting Objects 338
Logging Messages 340
PART IV: DEALING WITH EVENTS
Chapter 31 Events 343
What Are Events? 344
Events and JavaScript 346
1. Listening for Events 346
2. Reacting to Events 348
A Simple Example 348
The Event Arguments and the Event Type 351
Chapter 32 Event Bubbling and Capturing 355
Event Goes Down Event Goes Up 356
Meet the Phases 361
Who Cares? 363
Event, Interrupted 364
Chapter 33 Mouse Events 367
Meet the Mouse Events 368
Clicking Once and Clicking Twice 368
Mousing Over and Mousing Out 370
The Very Click-like Mousing Down and Mousing Up Events 372
The Event Heard Againand Againand Again! 373
The Context Menu 374
The MouseEvent Properties 375
The Global Mouse Position 375
The Mouse Position Inside the Browser 376
Detecting Which Button Was Clicked 377
Dealing with the Mouse Wheel 378
Chapter 34 Keyboard Events 381
Meet the Keyboard Events 382
Using These Events 383
The Keyboard Event Properties 384
Some Examples 385
Checking That a Particular Key Was Pressed 385
Doing Something When the Arrow Keys Are Pressed 386
Detecting Multiple Key Presses 386
Chapter 35 Page Load Events and Other Stuff 391
The Things That Happen During Page Load 392
Stage Numero Uno 393
Stage Numero Dos 393
Stage Numero Three 394
The DOMContentLoaded and load Events 395
Scripts and Their Location in the DOM 397
Script ElementsAsync and Defer 400
async 400
defer 400
Chapter 36 Handling Events for Multiple Elements 405
How to Do All of This 407
A Terrible Solution 408
A Good Solution 409
Putting It All Together 412
Chapter 37 Conclusion 415
Glossary 419
Index 423
