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

Quizzes

Other O’Reilly books by Eric T. Freeman and Elisabeth Robson
Authors of Head First JavaScript Programming
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 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
1. A Quick dip into javascript: Getting your feet wet
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
2. Writing Real Code: Going further
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
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 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
4. Putting some order in your Data: Arrays
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
5. Understanding Objects: A trip to Objectville
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
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 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?

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 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?
8. Bringing it all Together: Building an app
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!
9. Handling Events: Getting asynchronous
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
10. Anonymous and Higher-Order Functions: Liberated functions
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
11. Modern Syntax, Lexical Scope, and Closures: Serious functions
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
12. Advanced Object Construction: Creating objects
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
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

Content preview from Head First JavaScript Programming, 2nd Edition

Chapter 9. Handling Events: Getting asynchronous

After this chapter, you’re going to realize you aren’t in Kansas anymore. Up until now, you’ve been writing code that typically executes from top to bottom—sure, your code might be a little more complex than that, and make use of a few functions, objects, and methods, but at some point the code just runs its course. Now, we’re awfully sorry to break this to you this late in the book, but that’s not how you typically write JavaScript code. Rather, most JavaScript is written to react to events. What kind of events? Well, how about a user clicking on your page, data arriving from the network, timers expiring in the browser, changes happening in the DOM...and that’s just a few examples. In fact, all kinds of events are happening all the time, behind the scenes, in your browser. In this chapter we’re going rethink our approach to JavaScript coding, and look at how and why we should write code that reacts to events.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781098147938Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Head First JavaScript Programming, 2nd Edition

by Eric Freeman, Elisabeth Robson

Chapter 9. Handling Events: Getting asynchronous

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.