Head First JavaScript Programming: A Learner's Guide to Modern JavaScript. 2 Ed

Cover....1 Authors of Head First JavaScript Programming....10 Table of Contents....11 Preface....25 how to use this book....25 Who is this book for?....26 Who should probably back away from this book?....26 We know what you’re thinking....27 We know what your brain is thinking....27 Metacognition: thinking about thinking....29 Here’s what WE did:....30 Here’s what YOU can do to bend ....31 Read Me....32 Tech reviewers....35 Acknowledgments for the first edition....36 Acknowledgments for the second edition....37 Chapter 1: A quick dip into JavaScript....39 The way JavaScript works....40 How you’re going to write JavaScript....41 How to get JavaScript into your page....42 JavaScript, you’ve come a long way.......44 How to make a statement....48 Variables and values....49 Constants, another kind of variable....50 Back away from that keyboard!....52 Express yourself....55 Doing things more than once....57 How the while loop works....58 Making decisions with JavaScript....62 And, when you need to make LOTS of decisions.......63 Reach out and communicate with your user....65 A closer look at console.log....67 Opening the console....68 Coding a Serious JavaScript Application ....69 How do I add code to my page? (let me count the ways!)....72 We’re going to have to separate you two....73 Chapter 2: Writing real code....85 Let’s build a Battleship game....86 Our first attempt...a simplified Battleship....86 First, a high-level design....87 A few more details.......88 Representing the ships....88 Getting user input....88 Displaying the results....88 Working through the pseudocode....89 Oh, before we go any further, don’t forget the HTML!....91 Writing the Simple Battleship code....92 Now let’s write the game logic....93 Step 1: Setting up the loop, getting some input....94 How prompt works....95 Step 2: Checking the user’s guess....96 So, do we have a hit?....98 Adding the hit detection code....99 Step 3: Hey, you sank my battleship!....99 Step 4: Provide some post-game analysis....100 And that completes the logic!....102 Doing a little quality assurance....103 Can we talk about your verbosity.......107 Finishing the Simple Battleship game....108 How to assign random locations....108 The recipe for generating a random number....109 A little more QA....111 Congrats on your first true JavaScript program, and a short word about reusing code....113 Chapter 3: Introducing functions....121 What’s wrong with the code, anyway?....123 By the way, did we happen to mention FUNCTIONS?....125 Okay, but how does it actually work?....126 What can you pass to a function?....131 JavaScript is pass-by-value....134 Weird Functions....136 Functions can return things too....137 Tracing through a function with a return statement....138 Global and local variables....141 Knowing the scope of your local and global variables....143 There’s more to the story....144 Don’t forget to declare your locals!....146 The short lives of variables....147 Chapter 4: Putting some order in your data....169 Can you help Bubbles-R-Us?....170 How to represent multiple values in JavaScript....170 How arrays work....172 How to create an array....172 How to access an array item....173 Updating a value in the array....173 How big is that array anyway?....174 The Phrase-O-Matic....176 Meanwhile, back at Bubbles-R-Us.......179 How to iterate over an array....182 But wait, there’s a better way to iterate over an array....184 Test drive the bubble report....188 It's that time again...can we talk about your verbosity?....191 Redoing the for loop with the post-increment operator....192 Creating an array from scratch (and adding to it)....196 Test drive the final report....200 And the winners are.......200 A quick survey of the code....202 Writing the printAndGetHighScore function....203 Refactoring the code using printAndGetHighScore....204 Putting it all together....206 Chapter 5: Understanding objects....219 Did someone say “objects”?!....220 Thinking about properties.......221 How to create an object....223 What is “object-oriented” anyway?....226 How properties work....227 How does a variable hold an object? Inquiring minds want to know.......232 Comparing primitives and objects....233 Initializing a primitive variable....233 Initializing an object (reference) variable....233 Doing even more with objects....234 Doing some prequalification....235 Does the taxi cut it?....235 Stepping through prequalification....236 Let’s talk a little more about passing objects to functions....238 Putting Fido on a diet....239 The Auto-O-Matic....241 Oh, behave! Or, how to add behavior to your objects....244 Improving the drive method....245 Take the fiat for a test drive....247 Why doesn’t the drive method know about the started property?....248 A test drive with “this”....249 How “this” works....250 Method shorthand....256 How behavior affects state....257 Now let’s affect the behavior with the state....258 Congrats on your first objects!....260 Guess what? There are objects all around you!....261 Chapter 6: Interacting with your web page....277 In the last chapter, we left you with a little challenge...the “crack the code challenge”....278 So what does the code do?....279 A quick recap....280 How JavaScript really interacts with your page....281 How to bake your very own DOM....282 A first taste of the DOM....283 Getting an element with getElementById....288 What, exactly, am I getting from the DOM?....289 Finding your inner HTML....290 What happens when you change the DOM....292 A test drive around the planets....295 Don’t even think about running my code until the page is fully loaded!....297 Let's try that again.......297 You say “event handler,” I say “callback”....298 Why stop now? Let’s take it further.......302 How to set an attribute with setAttribute....303 More fun with attributes!....304 What happens if my attribute doesn’t exist in the element?....304 Meanwhile, back at the solar system.......305 Test driving the planets one last time.......305 So what else is a DOM good for, anyway?....306 Chapter 7: Types, equality, and all that jazz....313 The truth is out there.......314 Watch out, you might bump into undefined when you aren’t expecting it.......316 How to use null....319 Dealing with NaN....321 It gets even weirder.......321 We have a confession to make....323 Understanding the equality operator ....324 If the two values have the same type, just compare them....324 If the two values have different types, try to convert them into the same type and then compare them....324 How equality converts its operands....325 How to get strict with equality....328 Two values are strictly equal only if they have the same type and the same value.....328 Even more type conversions....334 Another look at concatenation, and addition....334 What about the other arithmetic operators?....334 How to determine if two objects are equal....337 When we test equality of two object variables, we compare the references to those objects.....337 Two references are equal only if they reference the same object.....337 The truthy is out there.......339 What JavaScript considers falsey....340 The Secret Life of Strings....342 How a string can look like a primitive and an object....343 How template literals work....346 A five-minute tour of string properties and methods....347 Chair Wars (or How Really Knowing Types Can Change Your Life)....352 Chapter 8: Bringing it all together....369 This time, let’s build a REAL Battleship game....370 Stepping back...to HTML and CSS....371 Creating the HTML page: the Big Picture....372 Step 1: The basic HTML....372 Step 2: Creating the table....374 Step 3: Player interaction....375 Adding some more style....376 Step 4: Placing the hits and misses....378 Using the hit and miss classes....379 Designing the game....381 Implementing the view....383 How displayMessage works....383 Implementing displayMessage....384 How displayHit and displayMiss work....385 Implementing displayHit and displayMiss....386 The model....388 How the model interacts with the view....388 You’re gonna need a bigger boat...and game board....389 How we’re going to represent the ships....390 Implementing the model object....393 Thinking about the fire method....394 Setting up the fire method....394 Looking for hits....395 Putting it all together....396 Wait, can we talk about your verbosity again?....397 Meanwhile, back at the battleship.......398 A view to a kill.......399 Implementing the controller....401 Processing the player’s guess....402 Planning the code.......403 Implementing parseGuess....404 Meanwhile, back at the controller.......407 Counting guesses and firing the shot....407 Game over?....408 Getting a player’s guess....411 Adding an event handler to the Fire! button....412 Getting the player’s guess from the form....412 Passing the input to the controller....413 What’s left? Oh yeah, darn it,those hardcoded ships!....415 How to place ships....417 The generateShipLocations function....417 Writing the generateShip method....418 Generating the starting location for the new ship....419 Completing the generateShip method....420 Avoiding a collision!....421 Two final changes....422 Congrats, it’s startup time!....424 Chapter 9: Handling events....435 What are events?....437 What’s an event handler?....438 Creating an event handler....439 Getting your head around events...by creating a game....442 Implementing the game....443 Step 1: Access the image in the DOM....443 Step 2: Add the handler and update the image....444 Let’s add some more images....448 Now we need to assign the same event handler to each image’s onclick property....449 How to reuse the same handler for all the images....450 Assigning the click handler to all images on the page....450 How the event object works....453 Putting the event object to work....455 Test drive the event object and target....456 Events and queues....458 Even more events....461 How setTimeout works....462 Finishing the image game....466 Test driving the timer....467 Chapter 10: Anonymous and higher-order functions....483 The mysterious double life of the function keyword....484 How functions are values too....485 If functions are values, we can assign them to variables....488 Did we mention functions have first class status in JavaScript?....491 Taking a look at the other side of functions.......492 How to use an anonymous function....493 We need to talk about your verbosity, again....495 We can make the code even shorter with arrow functions....497 Creating arrow functions....499 Webville Cola....502 Understanding the array sort method....504 Putting it all together....505 Meanwhile, back at Webville Cola....506 Introducing higher-order functions....509 Filtering with higher-order functions....510 Don’t forget your anonymous and arrow functions....511 How to get cases sold with map....512 Get the total cases sold with reduce....513 Using reduce to get the total cases sold....514 Chaining map, filter, and reduce....516 Iterating with forEach....519 Chapter 11: Modern syntax, lexical scope, and closures....529 Getting serious about functional syntax....530 Streamlining code with default parameters ....530 Spreading out your arguments....533 There’s something we haven’t told you about functions.......535 Function declarations are “hoisted”....536 We’ve done the function declarations; now we do everything else....537 We need to talk about scope....541 Taking functions beyond global scope....542 A lexical scope refresher....545 Another look at our outer/inner functions....546 Using scope for encapsulation....548 Two important JavaScript scope rules....550 Let's make another change to our code....552 Solving the mystery....554 How to make a closure....554 Stepping through createGreeting....555 Using closures to implement a magic counter....559 Test drive your magic counter....560 Looking behind the curtain.......560 Implementing a counter with a closure....561 How makeTimer works....565 Implementing onlyOnceMaker....570 Chapter 12: Advanced object construction....581 Creating objects with object literals....582 Using conventions for objects....583 Introducing classes....585 How to define a class....586 How to create an object from a class....587 How classes work....589 Let’s add some methods....592 It’s production time!....596 The basic Car class....598 Implementing the Taxi class with extends....601 Adding new methods to the Taxi class....602 Implementing the RocketCar class....605 Overriding Car’s drive method....605 Finishing up the RocketCar class....607 What’s happening here?....607 Using an object literal to clean up our constructor....609 Creating the object literal for the cadi parameters....610 Reworking the Car constructor....612 Accessor properties....613 Using getters....614 What’s a getter without a setter?....615 Static properties and methods....620 Counting our car production....622 Appendix: Leftovers....631 #1 Modules....632 #2 JSON....634 #3 Promises....635 #4 Destructuring assignment....636 #5 Symbols and BigInt....637 #6 Map and Set....638 #7 Doing more with the DOM....641 #8 The window object....642 #9 Server-side JavaScript....643 #10 Recursion....644 Index....647