book

Head First HTML5 Programming

by Eric Freeman, Elisabeth Robson

October 2011

Intermediate to advanced

608 pages

16h 7m

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 thinkingAnd we 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 meSoftware requirementsThe technical review teamAcknowledgmentsEven more Acknowledgments!Safari® Books Online
Would the REAL HTML5 please stand up...How HTML5 really works...What can you do with JavaScript?Writing Serious JavaScriptWriting Serious JavaScript Revisited...
The Way JavaScript WorksWhat can you do with JavaScript?Declaring a variableThree steps of creating a variableHow to name your variablesRule#1: Start your variables with a letter, an underscore or a dollar signRule #2: Then you can use any number of letters, numeric digits, underscores or dollar signsRule #3: Make sure you avoid all of JavaScript’s reserved wordsGetting ExpressiveDoing things over and over...Make decisions with JavaScriptMaking more decisions... and, adding a catchallHow and where to add JavaScript to your pagesHow JavaScript interacts with your pageHow to bake your very own DOMA first taste of the DOMTest drive the planetsYou can’t mess with the DOM until the page has fully loadedReload the pageSo, what else is a DOM good for anyway?Can we talk about JavaScript again? Or, how to store multiple values in JavaScriptHow to create an arrayAdding another item to the arrayUsing your array itemsKnow the size of your array, or elseThe Phrase-O-Matic
Get ready for Webville TunesGetting started...Give it a test driveBut nothing happens when I click “Add Song”Handling EventsMaking a Plan...Getting access to the “Add Song” buttonGiving the button a click handlerPutting it to a test...A closer look at what just happened...Getting the song nameHow do we add a song to the page?How to create a new elementAdding an element to the DOMPut it all together......and take it for a test driveReview—what we just didHow to add the Ready Bake Code...Integrating your Ready Bake CodeTest drive the saved songs

Expanding your vocabularyHow to add your own functionsCreate a checkGuess functionHow a function worksLocal and Global VariablesKnow the difference or risk humiliationKnowing the scope of your local and global variablesThe short lives of variablesOh, did we mention functions are also values?What you can do with functions as valuesDid someone say “Objects”?!Thinking about properties...How to create an object in JavaScriptSome things you can do with objectsLet’s talk about passing objects to functionsPutting Fido on a diet....Our next showing is at....Testing at the drive-inObjects can have behavior too...Meanwhile back at Webville Cinema...But we know that can’t be quite right...Let’s get the movie parameter out of there...Now what?Adding the “this” keywordA test drive with “this”How to create a constructorNow let’s use our constructorHow does this really work?Test drive your constructor right off the factory floorWhat is the window object anyway?A closer look at window.onloadAnother look at the document objectA closer look at document.getElementByIdOne more object to think about: your element objects
Location, Location, LocationThe Lat and Long of it...How the Geolocation API determines your locationJust where are you anyway?Test drive your locationWhat we just did...How it all fits togetherRevealing our secret location...Writing the code to find the distanceLocation-enabled test driveMapping your positionHow to add a Map to your PageGetting ready to create a map...Displaying the MapTest drive your new heads-up displaySticking a Pin in it...Testing the markerMeanwhile back at the Geolocation API...Can we talk about your accuracy?Accuracy Test“Wherever you go, there you are”How we’re going to track your movementsGetting the app startedReworking our old code...Writing the watchLocation handlerWriting the clearWatch handlerWe still need to make a small update to displayLocation...Time to get moving!You’ve got some Options...Can we talk about your accuracy, again?The world of timeouts and maximum age...How to specify optionsLet’s finish this app!Integrating our new functionAnd one more time...
Mighty Gumball wants a Web appA little more background on Mighty GumballJust a quick start...Turn the engine over...So how do we make requests to web services?How to make a request from JavaScriptMove over XML, meet JSONA quick example using JSONLet’s get to work!Writing an onload handler functionDisplaying the gumball sales dataWatch Out, Detour Ahead!How to set up your own Web ServerHow to set up your own Web Server, continuedBack to the codeLet’s test this already!Impressing the client...Reworking our code to make use of JSONThe Home Stretch...Moving to the Live ServerA Live Test Drive...It’s a cliffhanger!Remember, we left you with a cliffhanger? A bugSo, what do we do now?!What Browser Security Policy?Acceptable Behavior for JavaScript codeUnacceptable Behavior for JavaScript codeSo, what are our options?Meet JSONPBut what is the “P” in JSONP for?Let’s update the Mighty Gumball web appTest drive your new JSONP-charged codeImproving Mighty GumballStep 1: Taking care of the script element...Step 2: Now it’s time for the timerA time-driven test driveStep 3: Reimplementing JSONPFirst, let’s set up the JSONP URLNext, let’s create a new script elementHow do we insert the script into the DOM?Now let’s write the code to insert the script into the DOMWe almost forgot: watch out for the dreaded browser cacheOne more TIME test driveHow to remove duplicate sales reportsUpdating the JSON URL to include the lastreporttimeTest drive lastReportTimeA Special Message from Chapter 7...
Our new start-up: TweetShirtChecking out the “comps”Let’s drop in on the TweetShirt crew...How to get a canvas into your web pageTest drive your new canvasHow to see your canvasDrawing on the CanvasA little Canvas test drive...A closer look at the codeFailing gracefullyTweetShirt: the Big PictureFirst, let’s get the HTML in placeNow, let’s add the <form>Time to get computational, with JavaScriptWriting the drawSquare functionTime for a test drive!Why are we seeing the old squares and the new squares when we preview?Add the call to fillBackgroundColorAnother quick test drive to make sure our new fillBackgroundColor function works...Meanwhile, back at TweetShirt.com...And, a couple of hours later...Drawing with GeeksBreaking down the arc methodA little taste of using the arcI say degree, you say radianBack to writing the TweetShirt circle codeWriting the drawCircle function......and test drive!Welcome back...Getting your tweetsTest driving TweetsGiving drawText a spinCompleting the drawText functionA quick test drive and then LAUNCH!Yet another test driveSo you have a path! Now what?
Meet Webville TVThe HTML, let’s get it done...Plug that set in and test it out...How does the video element work?Closely inspecting the video attributes...What you need to know about video formatsThe contendersHow to juggle all those formats...How to be even more specific with your video formatsI was told there would be APIs?A little content “programming” on Webville TVImplementing Webville TV’s playlistSo what’s up with that event handler code?How to write the “end of video” handlerAnother test drive...How the canPlayType method worksPutting canPlayType to useIntegrating the getFormatExtension functionAnd test drive...We need your help!Step inside the booth, let’s take a look...Unpacking the Demo UnitInspecting the rest of the factory codeAnd now the JavaScript...Looking at the button handlersThe setEffect and setVideo handlersAnd here are the helper functionsThat new demo machine smell...test drive time!Getting our demo videos ready...Implementing the video controlsImplementing the rest of the video controlsAnother test drive!Taking care of a loose end...And another...Switching test videosSwitch drivers and test drive!It’s time for special effectsThe FX planTime to get those effects buttons workingHow video processing worksHow to process video using a scratch bufferImplementing a scratch buffer with CanvasHow to position the video and canvasesWriting the code to process the videoHow to create the bufferHow to process the bufferWe’ve processed one frame, what next?Now we need to write some effectsA film noir test driveThe Big Test DriveIf only it were a perfect world...How to use error eventsTest Crash!Where can you go from here?
How browser storage works (1995 - 2010)How HTML5 Web Storage worksNote to self...Time for a test drive!Were Local Storage and the Array separated at birth?But wait, there’s more!Getting serious about stickiesCreating the interfaceNow let’s add the JavaScriptTime for another test drive!Completing the user interfaceYet another test drive!We need to stop for a little scheduled serviceDo-It-Yourself maintenanceWe have the technology...Reworking our app to use an arrayBefore...New and improvedConverting createSticky to use an arrayWhat needs to change?Putting it all togetherPutting it all together continued...Test Drive!Deleting sticky notesThe deleteSticky functionHow do you select a sticky to delete?How to get the sticky to delete from the eventDelete the sticky from the DOM, tooOkay, test it...But of course we can!Update the user interface so we can specify a colorJSON.stringify, it’s not just for ArraysUsing the new stickyObjTest drive sticky note colorsNow that you know localStorage, how are you going to use it?
The Dreaded Slow ScriptHow JavaScript spends its timeWhen single-threaded goes BADAdding another thread of control to helpHow Web Workers workYour first Web Worker...How to create a Web WorkerWriting Manager.jsReceiving messages from the workerNow let’s write the workerWriting the worker’s message handlerServing up a test driveVirtual Land GrabTake a look aroundHow to compute a Mandelbrot SetHow to use multiple workersLet’s build the Fractal Explorer appCreating the Fractal Viewer HTML MarkupCreating workers, and giving them tasks...Writing the codeGetting the workers startedImplementing the workerA little pit stop...Time to get back on the road...Back to the code: how to process the worker’s resultsPsychedelic test driveHandling a click eventAnother test driveFitting the canvas to the browser windowThe anal-retentive chef coderTime for the final test drive!Congratulations! You made it to the end
#1 ModernizrIncluding Modernizr in your pageHow to detect support#2 AudioA Standard for Audio Encodings#3 jQuery#4 XHTML is dead, long live XHTML#5 SVG#6 Offline web apps#7 Web Sockets#8 More canvas API#9 Selectors API#10 But, there’s even more!Indexed Database API and Web SQLDrag and DropCross-document MessagingAnd we could go on...The HTML5 Guide to New ConstructionAdding style to your new construction with CSS3