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