book

Head First JavaScript Programming

by Eric T. Freeman, Elisabeth Robson

March 2014

Beginner

704 pages

18h 25m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who is this book for?Who should probably back away from this book?We know what you’re thinking.And we know what your brain is thinking.Metacognition: thinking about thinkingHere’s what WE did:Here’s what YOU can do to bend your brain into submissionRead MeTech ReviewersAcknowledgments
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 baby...It’s True.How to make a statementVariables and valuesBack away from that keyboard!Express yourselfDoing things more than onceHow the while loop worksMaking decisions with JavaScriptAnd, when you need to make LOTS of decisionsReach out and communicate with your userCreate an alert.Write directly into your document.Use the console.Directly manipulate your document.A 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...First, a high-level designA few more details...Representing the shipsGetting user inputDisplaying the resultsWorking through the PseudocodeOh, before we go any further, don’t forget the HTML!Writing the Simple Battleship codeNow let’s write the game logicStep One: setting up the loop, getting some inputHow prompt worksChecking the user’s guessSo, do we have a hit?Adding the hit detection codeHey, you sank my battleship!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 world-famous recipe for generating a random numberBack to do a 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?JavaScript is pass-by-value.That means pass-by-copy.Weird FunctionsEXPERIMENT #1: what happens when we don’t pass enough arguments?EXPERIMENT #2: what happens when we pass too many argments?EXPERIMENT #3: what happens when we have NO parameters?Functions 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 variablesThe short lives of variablesDon’t forget to declare your locals!
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 operatorQuick 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 code...Writing 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 (a reference) variableDoing even more with objects...Doing some pre-qualificationDoes the taxi cut it?Stepping through pre-qualificationLet’s talk a little more about passing objects to functionsPutting Fido on a diet....The 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 worksHow behavior affects state... Adding 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)
In our 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 furtherHow 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 weirderWe 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)CASE#1: Comparing a number and a string.CASE#2: Comparing a boolean with any other type.CASE#3: Comparing null and undefined.CASE#4: Oh, actually there is no case #4.How to get strict with equalityTwo values are strictly equal only if they have the same type and the same value.Even more type conversions...Another 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 objectsTwo references are equal only if they reference the same objectThe truthy is out there...What JavaScript considers falseyThe Secret Life of StringsHow a string can look like a primitive and an objectA five-minute tour of string methods (and properties)Chair Wars (or How Really Knowing Types Can Change Your Life)In Larry’s cubeIn Brad’s cubeBut wait! There’s been a spec changeBack in Larry’s cubeAt Brad’s laptop at the beachLarry 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 classesHow to design the gameImplementing the ViewHow displayMessage worksImplementing displayMessageHow displayHit and displayMiss workImplementing displayHit and displayMissAnother Test Drive...The 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 that all together...Wait, 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 guessHow to add 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 methodGenerate 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?How to create your first event handlerTest drive your eventGetting 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 driveLet’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 timer
The mysterious double life of the function keywordFunction declarations versus function expressionsParsing the function declarationWhat’s next? The browser executes the codeMoving on... The conditionalAnd finishing up...How functions are values tooDid we mention functions have First Class status in JavaScript?Flying First ClassWriting code to process and check passengersIterating through the passengersPassing a function to a functionTest drive flightReturning functions from functionsWriting the flight attendant drink order codeThe flight attendant drink order code: a different approachWait, we need more drinks!Taking orders with first class functionsTest drive flightWebville ColaHow the array sort method worksPutting it all togetherMeanwhile back at Webville ColaTake sorting for a test drive
Taking a look at the other side of functions...How to use an anonymous functionWe need to talk about your verbosity, againWhen is a function defined? It depends...What just happened? Why wasn’t fly defined?How to nest functionsHow nesting affects scopeA little review of lexical scopeWhere things get interesting with lexical scopeFunctions RevisitedCalling a function (revisited)What the heck is a closure?Closing a functionUsing closures to implement a magic counterTest drive your magic counterLooking behind the curtain...Creating a closure by passing a function expression as an argumentThe closure contains the actual environment, not a copyCreating a closure with an event handlerClick me! without a closureClick me! with a closureTest drive your button counterHow the Click me! closure works
Creating objects with object literalsUsing conventions for objectsIntroducing Object ConstructorsHow to create a ConstructorHow to use a ConstructorHow constructors workYou can put methods into constructors as wellTake the bark method for a quick test driveIt’s Production Time!Let’s test drive some new carsDon’t count out object literals just yetRewiring the arguments as an object literalReworking the Car constructorUnderstanding Object InstancesEven constructed objects can have their own independent propertiesReal World ConstructorsThe Array objectEven more fun with built-in objects
Hey, before we get started, we’ve got a better way to diagram our objectsRevisiting object constructors: we’re reusing code, but are we being efficient?Is duplicating methods really a problem?What are prototypes?Inheriting from a prototypeHow inheritance worksOverriding the prototypeSo where do you get a prototype?How to set up the prototypeTest drive the prototype with some dogsGive Spot his WOOF! in codeTest drive the custom bark methodTeaching a new trickPrototypes are dynamicA more interesting implementation of the sit methodTest drive the new sit methodOne more time: how the sitting property worksHow to approach the design of the show dogsSetting up a chain of prototypesHow inheritance works in a prototype chainCreating the show dog prototypeFirst, we need an object that inherits from the dog prototypeNext, turning our dog instance into a show dog prototypeNow it’s time to fill in the prototypeCreating a show dog instanceTest drive the show dogExamining the exercise resultsA final cleanup of show dogsA little more cleanupStepping through Dog.callThe final test driveThe chain doesn’t end at dogWhat is Object?Object as a prototypeUsing inheritance to your advantage... by overriding built-in behaviorUsing inheritance to your advantage... by extending a built-in objectTest driving the cliché machineGrand Unified Theory ofBetter living through objectsPutting it all togetherWhat’s next?
#1 jQuery#2 Doing more with the DOM#3 The Window Object#4 Arguments#5 Handling exceptionsTry/catch#6 Adding event handlers with addEventListenerEvent handling in IE8 and older#7 Regular ExpressionsThe RegExp constructorUsing a RegExp object#8 Recursion#9 JSON#10 Server-side JavaScript

Content preview from Head First JavaScript Programming

Chapter 9. Handling events

Asynchronous Coding

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 learn how and why we should write code that reacts to events.

Brain Power

You know what a browser does, right? It retrieves a page and all that page’s contents and then renders the page. But the browser’s doing a lot more than just that. What else is it doing? Choose any of the tasks below you suspect the browser is doing behind the scenes. If you aren’t sure just make your best guess.