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

Other O’Reilly books by Eric T. Freeman and Elisabeth Robson
Table of Contents (the real thing)
How to use this book Intro
   Who is this book for?
      Who should probably back away from this book?
   We know what you’re thinking
   We know what your brain is thinking
   Metacognition: thinking about thinking
   Here’s what WE did:
   Here’s what YOU can do to bend your brain into submission
   Read Me
   Tech reviewers
   Acknowledgments for the first edition
   Acknowledgments for the second edition
1. A Quick dip into javascript: Getting your feet wet
   The way JavaScript works
   How you’re going to write JavaScript
   How to get JavaScript into your page
   A little test drive
   JavaScript, you’ve come a long way...
   How to make a statement
   Variables and values
   Constants, another kind of variable
   Back away from that keyboard!
   Express yourself
   Doing things more than once
   How the while loop works
   Making decisions with JavaScript
   And, when you need to make LOTS of decisions...
   Reach out and communicate with your user
   A closer look at console.log
   Opening the console
   Coding a Serious JavaScript Application
   How do I add code to my page? (let me count the ways!)
   We’re going to have to separate you two
2. Writing Real Code: Going further
   Let’s build a Battleship game
   Our first attempt...
      ...a simplified Battleship
   First, a high-level design
   A few more details...
      Representing the ships
      Getting user input
      Displaying the results
      Sample game interaction
   Working through the pseudocode
   Oh, before we go any further, don’t forget the HTML!
   Writing the Simple Battleship code
   Now let’s write the game logic
   Step 1: Setting up the loop, getting some input
   How prompt works
   Step 2: Checking the user’s guess
   So, do we have a hit?
   Adding the hit detection code
   Step 3: Hey, you sank my battleship!
   Step 4: Provide some post-game analysis
   And that completes the logic!
   Doing a little quality assurance
   Can we talk about your verbosity...
   Finishing the Simple Battleship game
   How to assign random locations
   The recipe for generating a random number
   A little more QA
   Congrats on your first true JavaScript program, and a short word about reusing code
3. Introducing Functions: Getting functional
   What’s wrong with the code, anyway?
   By the way, did we happen to mention FUNCTIONS?
   Okay, but how does it actually work?
   What can you pass to a function?
      Variables (and constants)
   JavaScript is pass-by-value
      (that means pass-by-copy)
   Weird Functions
   Functions can return things too
   Tracing through a function with a return statement
   Global and local variables
      Know the difference or risk humiliation
   Knowing the scope of your local and global variables
   There’s more to the story
      Any block can act as the scope of a variable
   Don’t forget to declare your locals!
   The short lives of variables
   The Thing-A-Ma-Jig
   The Thing-A-Ma-Jig
4. Putting some order in your Data: Arrays
   Can you help Bubbles-R-Us?
   How to represent multiple values in JavaScript
   How arrays work
      How to create an array
   How to access an array item
   Updating a value in the array
   How big is that array anyway?
   The Phrase-O-Matic
   Meanwhile, back at Bubbles-R-Us...
      Cubicle Conversation
   How to iterate over an array
   But wait, there’s a better way to iterate over an array
   Test drive the bubble report
   It’s that time again... can we talk about your verbosity?
   Redoing the for loop with the post-increment operator
   Another quick test drive
   Cubicle Conversation continued...
   Creating an array from scratch (and adding to it)
   Test drive the final report
   And the winners are...
   A quick survey of the code
   Writing the printAndGetHighScore function
   Refactoring the code using printAndGetHighScore
   Putting it all together
5. Understanding Objects: A trip to Objectville
   Did someone say “objects”?!
   Thinking about properties...
   How to create an object
   What is “object-oriented” anyway?
   How properties work
   How does a variable hold an object? Inquiring minds want to know...
   Comparing primitives and objects
      Initializing a primitive variable
      Initializing an object (reference) variable
   Doing even more with objects
   Doing some prequalification
   Does the taxi cut it?
   Stepping through prequalification
   Let’s talk a little more about passing objects to functions
   Putting Fido on a diet
   The Auto-O-Matic
      The Auto-O-Matic
   Oh, behave! Or, how to add behavior to your objects
   Improving the drive method
   Take the fiat for a test drive
   Uh-oh, not so fast...
   Why doesn’t the drive method know about the started property?
   A test drive with “this”
   How “this” works
   Method shorthand
   How behavior affects state
      Adding some gas-o-line
   Now let’s affect the behavior with the state
   Gas up for a test drive
   Congrats on your first objects!
   Guess what? There are objects all around you!
      (And they’ll make your life easier)
   Crack the Code Challenge
6. Interacting with your web page: Getting to know the DOM
   In the last chapter, we left you with a little challenge...the “crack the code challenge”
   So what does the code do?
   A quick recap
   How JavaScript really interacts with your page
   How to bake your very own DOM
   A first taste of the DOM
   Getting an element with getElementById
   What, exactly, am I getting from the DOM?
   Finding your inner HTML
   What happens when you change the DOM
   A test drive around the planets
   Don’t even think about running my code until the page is fully loaded!
      Let’s try that again...
   You say “event handler,” I say “callback”
   Why stop now? Let’s take it further...
   How to set an attribute with setAttribute
   More fun with attributes!
      (You can GET attributes too)
      What happens if my attribute doesn’t exist in the element?
   Meanwhile, back at the solar system...
      Test driving the planets one last time...
   So what else is a DOM good for, anyway?
7. Types, Equality, Conversion, and all that jazz: Serious types
   The truth is out there...
   Watch out, you might bump into undefined when you aren’t expecting it...
   How to use null
   Dealing with NaN
   It gets even weirder...
   We have a confession to make
   Understanding the equality operator (otherwise known as ==)
      If the two values have the same type, just compare them
      If the two values have different types, try to convert them into the same type and then compare them
   How equality converts its operands
      (sounds more dangerous than it actually is)
   How to get strict with equality
      Two values are strictly equal only if they have the same type and the same value.
   Even more type conversions
      Another look at concatenation, and addition
      What about the other arithmetic operators?
   How to determine if two objects are equal
      When we test equality of two object variables, we compare the references to those objects.
      Two references are equal only if they reference the same object.
   The truthy is out there...
   What JavaScript considers falsey
   The Secret Life of Strings
   How a string can look like a primitive and an object
   How template literals work
   A five-minute tour of string properties and methods
   String Soup
   Chair Wars
      (or How Really Knowing Types Can Change Your Life)
      In Brad’s cube
      In Brad’s cube
      But wait! There’s been a spec change.
      Back in Larry’s cube
      At the beach with Brad
      Larry snuck in just ahead of Brad.
      The suspense is killing me. Who got the chair?
8. Bringing it all Together: Building an app
   This time, let’s build a REAL Battleship game
   Stepping back...to HTML and CSS
   Creating the HTML page: the Big Picture
   Step 1: The basic HTML
   Step 2: Creating the table
   Step 3: Player interaction
   Adding some more style
   Step 4: Placing the hits and misses
   Using the hit and miss classes
   Designing the game
   Implementing the view
   How displayMessage works
   Implementing displayMessage
   How displayHit and displayMiss work
   Implementing displayHit and displayMiss
   The model
      How the model interacts with the view
   You’re gonna need a bigger boat...and game board
   How we’re going to represent the ships
   Implementing the model object
   Thinking about the fire method
   Setting up the fire method
   Looking for hits
   Putting it all together
   Wait, can we talk about your verbosity again?
   Meanwhile, back at the battleship...
   A view to a kill...
   Implementing the controller
   Processing the player’s guess
   Planning the code...
   Implementing parseGuess
   Meanwhile, back at the controller...
   Counting guesses and firing the shot
   Game over?
   Getting a player’s guess
   Adding an event handler to the Fire! button
   Getting the player’s guess from the form
   Passing the input to the controller
   What’s left? Oh yeah, darn it, those hardcoded ships!
   How to place ships
      The generateShipLocations function
   Writing the generateShip method
   Generating the starting location for the new ship
   Completing the generateShip method
   Avoiding a collision!
   Two final changes
   Congrats, it’s startup time!
9. Handling Events: Getting asynchronous
   What are events?
   What’s an event handler?
   Creating an event handler
   Getting your head around events...by creating a game
   Implementing the game
      Step 1: Access the image in the DOM
      Step 2: Add the handler and update the image
   Test drive
   Cubicle Conversation
   Let’s add some more images
   Now we need to assign the same event handler to each image’s onclick property
   How to reuse the same handler for all the images
      Assigning the click handler to all images on the page
   How the event object works
   Putting the event object to work
   Test drive the event object and target
   Events and queues
   Even more events
      Test drive your timer
   How setTimeout works
   Finishing the image game
   Test driving the timer
   Event Soup
10. Anonymous and Higher-Order Functions: Liberated functions
   The mysterious double life of the function keyword
   How functions are values too
   If functions are values, we can assign them to variables
   Did we mention functions have first class status in JavaScript?
   Taking a look at the other side of functions...
   How to use an anonymous function
   We need to talk about your verbosity, again
   We can make the code even shorter with arrow functions
   Creating arrow functions
   Webville Cola
   Understanding the array sort method
   Putting it all together
   Meanwhile, back at Webville Cola
   Introducing higher-order functions
   Filtering with higher-order functions
   Don’t forget your anonymous and arrow functions
      How to get cases sold with map
      Get the total cases sold with reduce
   Using reduce to get the total cases sold
   Chaining map, filter, and reduce
   Iterating with forEach
11. Modern Syntax, Lexical Scope, and Closures: Serious functions
   Getting serious about functional syntax
      Streamlining code with default parameters
   Spreading out your arguments
   There’s something we haven’t told you about functions...
   Function declarations are “hoisted”
   We’ve done the function declarations; now we do everything else
   We need to talk about scope
   Taking functions beyond global scope
   A lexical scope refresher
   Another look at our outer/inner functions
   Using scope for encapsulation
   Two important JavaScript scope rules
   Let’s make another change to our code
   Solving the mystery
   How to make a closure
   Stepping through createGreeting
   Using closures to implement a magic counter
   Test drive your magic counter
   Looking behind the curtain...
   Implementing a counter with a closure
   How makeTimer works
   Implementing onlyOnceMaker
12. Advanced Object Construction: Creating objects
   Creating objects with object literals
   Using conventions for objects
   Introducing classes
   How to define a class
   How to create an object from a class
   How classes work
   Let’s add some methods
   It’s production time!
   The basic Car class
   Implementing the Taxi class with extends
   Adding new methods to the Taxi class
   Implementing the RocketCar class
      Overriding Car’s drive method
   Finishing up the RocketCar class
      What’s happening here?
   Using an object literal to clean up our constructor
   Creating the object literal for the cadi parameters
   Reworking the Car constructor
   Accessor properties
   Using getters
   What’s a getter without a setter?
   Static properties and methods
   Counting our car production
A. Leftovers: The top ten topics (we didn’t cover)
   #1 Modules
   #2 JSON
   #3 Promises
   #4 Destructuring assignment
   #5 Symbols and BigInt
   #6 Map and Set
   #7 Doing more with the DOM
   #8 The window object
   #9 Server-side JavaScript
   #10 Recursion
Index