Head First JavaScript Programming: A Learner's Guide to Modern JavaScript, 2nd Edition

Cover
Authors of Head First JavaScript Programming
Table of Contents
Preface
	how to use this book
	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
	Read Me
	Tech reviewers
	Acknowledgments for the first edition
	Acknowledgments for the second edition
Chapter 1: A quick dip into JavaScript
	The way JavaScript works
	How you’re going to write JavaScript
	How to get JavaScript into your page
	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
Chapter 2: Writing real code
	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
	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
Chapter 3: Introducing functions
	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?
	JavaScript is pass-by-value
	Weird Functions
	Functions can return things too
	Tracing through a function with a return statement
	Global and local variables
	Knowing the scope of your local and global variables
	There’s more to the story
	Don’t forget to declare your locals!
	The short lives of variables
Chapter 4: Putting some order in your data
	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...
	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
	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
Chapter 5: Understanding objects
	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
	Oh, behave! Or, how to add behavior to your objects
	Improving the drive method
	Take the fiat for a test drive
	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
	Now let’s affect the behavior with the state
	Congrats on your first objects!
	Guess what? There are objects all around you!
Chapter 6: Interacting with your web page
	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!
	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?
Chapter 7: Types, equality, and all that jazz
	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
		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
	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
	Chair Wars (or How Really Knowing Types Can Change Your Life)
Chapter 8: Bringing it all together
	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!
Chapter 9: Handling events
	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
	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
	How setTimeout works
	Finishing the image game
	Test driving the timer
Chapter 10: Anonymous and higher-order 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
Chapter 11: Modern syntax, lexical scope, and closures
	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
Chapter 12: Advanced object construction
	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
Appendix: Leftovers
	#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