book

Head First JavaScript Programming, 2nd Edition

by Eric Freeman, Elisabeth Robson

August 2024

Beginner

662 pages

17h 50m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Includes

Includes Quizzes

Who is this book for?Who should probably back away from this book?We know what you’re thinkingWe know what your brain is thinkingMetacognition: thinking about thinkingHere’s what WE did:Here’s what YOU can do to bend your brain into submissionRead MeTech reviewersAcknowledgments for the first editionAcknowledgments for the second edition
The way JavaScript worksHow you’re going to write JavaScriptHow to get JavaScript into your pageA little test driveJavaScript, you’ve come a long way...How to make a statementVariables and valuesConstants, another kind of variableBack away from that keyboard!Express yourselfDoing things more than onceHow the while loop worksMaking decisions with JavaScriptAnd, when you need to make LOTS of decisions...Reach out and communicate with your userA closer look at console.logOpening the consoleCoding a Serious JavaScript ApplicationHow do I add code to my page? (let me count the ways!)We’re going to have to separate you two
Let’s build a Battleship gameOur first attempt......a simplified BattleshipFirst, a high-level designA few more details...Representing the shipsGetting user inputDisplaying the resultsSample game interactionWorking through the pseudocodeOh, before we go any further, don’t forget the HTML!Writing the Simple Battleship codeNow let’s write the game logicStep 1: Setting up the loop, getting some inputHow prompt worksStep 2: Checking the user’s guessSo, do we have a hit?Adding the hit detection codeStep 3: Hey, you sank my battleship!Step 4: Provide some post-game analysisAnd that completes the logic!Doing a little quality assuranceCan we talk about your verbosity...Finishing the Simple Battleship gameHow to assign random locationsThe recipe for generating a random numberA little more QACongrats on your first true JavaScript program, and a short word about reusing code
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 FunctionsFunctions can return things tooTracing through a function with a return statementGlobal and local variablesKnow the difference or risk humiliationKnowing the scope of your local and global variablesThere’s more to the storyAny block can act as the scope of a variableDon’t forget to declare your locals!The short lives of variablesThe Thing-A-Ma-JigThe Thing-A-Ma-Jig
Can you help Bubbles-R-Us?How to represent multiple values in JavaScriptHow arrays workHow to create an arrayHow to access an array itemUpdating a value in the arrayHow big is that array anyway?The Phrase-O-MaticMeanwhile, back at Bubbles-R-Us...Cubicle ConversationHow to iterate over an arrayBut wait, there’s a better way to iterate over an arrayTest drive the bubble reportIt’s that time again... can we talk about your verbosity?Redoing the for loop with the post-increment operatorAnother quick test driveCubicle Conversation continued...Creating an array from scratch (and adding to it)Test drive the final reportAnd the winners are...A quick survey of the codeWriting the printAndGetHighScore functionRefactoring the code using printAndGetHighScorePutting it all together
Did someone say “objects”?!Thinking about properties...How to create an objectWhat is “object-oriented” anyway?How properties workHow does a variable hold an object? Inquiring minds want to know...Comparing primitives and objectsInitializing a primitive variableInitializing an object (reference) variableDoing even more with objectsDoing some prequalificationDoes the taxi cut it?Stepping through prequalificationLet’s talk a little more about passing objects to functionsPutting Fido on a dietThe Auto-O-MaticThe Auto-O-MaticOh, behave! Or, how to add behavior to your objectsImproving the drive methodTake the fiat for a test driveUh-oh, not so fast...Why doesn’t the drive method know about the started property?A test drive with “this”How “this” worksMethod shorthandHow behavior affects stateAdding some gas-o-lineNow let’s affect the behavior with the stateGas up for a test driveCongrats on your first objects!Guess what? There are objects all around you!(And they’ll make your life easier)Crack the Code Challenge
In the last chapter, we left you with a little challenge...the “crack the code challenge”So what does the code do?A quick recapHow JavaScript really interacts with your pageHow to bake your very own DOMA first taste of the DOMGetting an element with getElementByIdWhat, exactly, am I getting from the DOM?Finding your inner HTMLWhat happens when you change the DOMA test drive around the planetsDon’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 setAttributeMore 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?

The truth is out there...Watch out, you might bump into undefined when you aren’t expecting it...How to use nullDealing with NaNIt gets even weirder...We have a confession to makeUnderstanding the equality operator (otherwise known as ==)If the two values have the same type, just compare themIf the two values have different types, try to convert them into the same type and then compare themHow equality converts its operands(sounds more dangerous than it actually is)How to get strict with equalityTwo values are strictly equal only if they have the same type and the same value.Even more type conversionsAnother look at concatenation, and additionWhat about the other arithmetic operators?How to determine if two objects are equalWhen 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 falseyThe Secret Life of StringsHow a string can look like a primitive and an objectHow template literals workA five-minute tour of string properties and methodsString SoupChair Wars(or How Really Knowing Types Can Change Your Life)In Brad’s cubeIn Brad’s cubeBut wait! There’s been a spec change.Back in Larry’s cubeAt the beach with BradLarry snuck in just ahead of Brad.The suspense is killing me. Who got the chair?
This time, let’s build a REAL Battleship gameStepping back...to HTML and CSSCreating the HTML page: the Big PictureStep 1: The basic HTMLStep 2: Creating the tableStep 3: Player interactionAdding some more styleStep 4: Placing the hits and missesUsing the hit and miss classesDesigning the gameImplementing the viewHow displayMessage worksImplementing displayMessageHow displayHit and displayMiss workImplementing displayHit and displayMissThe modelHow the model interacts with the viewYou’re gonna need a bigger boat...and game boardHow we’re going to represent the shipsImplementing the model objectThinking about the fire methodSetting up the fire methodLooking for hitsPutting it all togetherWait, can we talk about your verbosity again?Meanwhile, back at the battleship...A view to a kill...Implementing the controllerProcessing the player’s guessPlanning the code...Implementing parseGuessMeanwhile, back at the controller...Counting guesses and firing the shotGame over?Getting a player’s guessAdding an event handler to the Fire! buttonGetting the player’s guess from the formPassing the input to the controllerWhat’s left? Oh yeah, darn it, those hardcoded ships!How to place shipsThe generateShipLocations functionWriting the generateShip methodGenerating the starting location for the new shipCompleting the generateShip methodAvoiding a collision!Two final changesCongrats, it’s startup time!
What are events?What’s an event handler?Creating an event handlerGetting your head around events...by creating a gameImplementing the gameStep 1: Access the image in the DOMStep 2: Add the handler and update the imageTest driveCubicle ConversationLet’s add some more imagesNow we need to assign the same event handler to each image’s onclick propertyHow to reuse the same handler for all the imagesAssigning the click handler to all images on the pageHow the event object worksPutting the event object to workTest drive the event object and targetEvents and queuesEven more eventsTest drive your timerHow setTimeout worksFinishing the image gameTest driving the timerEvent Soup
The mysterious double life of the function keywordHow functions are values tooIf functions are values, we can assign them to variablesDid we mention functions have first class status in JavaScript?Taking a look at the other side of functions...How to use an anonymous functionWe need to talk about your verbosity, againWe can make the code even shorter with arrow functionsCreating arrow functionsWebville ColaUnderstanding the array sort methodPutting it all togetherMeanwhile, back at Webville ColaIntroducing higher-order functionsFiltering with higher-order functionsDon’t forget your anonymous and arrow functionsHow to get cases sold with mapGet the total cases sold with reduceUsing reduce to get the total cases soldChaining map, filter, and reduceIterating with forEach
Getting serious about functional syntaxStreamlining code with default parametersSpreading out your argumentsThere’s something we haven’t told you about functions...Function declarations are “hoisted”We’ve done the function declarations; now we do everything elseWe need to talk about scopeTaking functions beyond global scopeA lexical scope refresherAnother look at our outer/inner functionsUsing scope for encapsulationTwo important JavaScript scope rulesLet’s make another change to our codeSolving the mysteryHow to make a closureStepping through createGreetingUsing closures to implement a magic counterTest drive your magic counterLooking behind the curtain...Implementing a counter with a closureHow makeTimer worksImplementing onlyOnceMaker
Creating objects with object literalsUsing conventions for objectsIntroducing classesHow to define a classHow to create an object from a classHow classes workLet’s add some methodsIt’s production time!The basic Car classImplementing the Taxi class with extendsAdding new methods to the Taxi classImplementing the RocketCar classOverriding Car’s drive methodFinishing up the RocketCar classWhat’s happening here?Using an object literal to clean up our constructorCreating the object literal for the cadi parametersReworking the Car constructorAccessor propertiesUsing gettersWhat’s a getter without a setter?Static properties and methodsCounting our car production
#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

Overview

What will you learn from this book?

The new edition of this brain-friendly guide takes you through a comprehensive journey into modern JavaScript, covering everything from core language fundamentals to today's cutting-edge features. You'll dive into the nuances of JavaScript types and the unparalleled flexibility of its functions. You'll also learn how to expertly navigate classes and objects, and finally understand closures. But that's just the beginning. You'll also get hands-on with the browser's document object model (DOM), engaging with JavaScript in exciting ways. You won't just be reading—you'll be playing games, solving puzzles, pondering mysteries, and interacting with JavaScript as never before. And you'll write real code, lots of it, so you can start building your own applications.

What's so special about this book?

If you've read a Head First book, you know what to expect: a visually rich format designed for the way your brain works. If you haven't, you're in for a treat. With this book, you'll learn JavaScript through a multisensory experience that engages your mind—rather than a text-heavy approach that puts you to sleep.