Head First JavaScript Programming, 2nd Edition

Table of contents

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