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

Head First HTML5 Programming building web apps with javascript
Dedication
A Note Regarding Supplemental Files
Advance Praise for Head First HTML5 Programming
Praise for other books from Eric Freeman & Elisabeth Robson
Authors of Head First HTML5 Programming
How to Use this Book: Intro
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
1. Getting to Know HTML5: Welcome to Webville
Would the REAL HTML5 please stand up...How HTML5 really works...What can you do with JavaScript?Writing Serious JavaScriptWriting Serious JavaScript Revisited...
2. Introducing JavaScript and the DOM: A Little Code
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
3. Events, Handlers and All that Jazz: A Little Interaction
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

4. JavaScript Functions and Objects: Serious JavaScript
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
5. Making Your HTML Location Aware: Geolocation
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...
6. Talking to The Web: Extroverted Apps
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...
7. Bringing Out Your Inner Artist: The Canvas
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?
8. Not Your Father’s TV: Video ...With Special Guest Star “Canvas”
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?
9. Storing Things Locally: Web Storage
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?
10. Putting JavaScript to Work: Web Workers
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
A. Leftovers: The Top Ten Topics (We Didn’t Cover)
#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
B. This isn’t goodbye
Index
About the Authors
Colophon
Copyright

Content preview from Head First HTML5 Programming

Chapter 1. Getting to Know HTML5: Welcome to Webville

HTML has been on a wild ride. Sure, HTML started as a mere markup language, but more recently HTML’s put on some major muscle. Now we’ve got a language tuned for building true web applications with local storage, 2D drawing, offline support, sockets and threads, and more. The story of HTML wasn’t always pretty, and it’s full of drama (we’ll get to all that), but in this chapter, we’re first going to go on a quick joyride through Webville to get a sense of everything that goes into “HTML5.” Come on, hop in, we’re headed to Webville, and we’re going to start by going from zero to HTML5 in 3.8 pages (flat).

Note

Heads up: XHTML received a “Dear John” letter in 2009 and we’ll be visiting XHTML later in the “Where are they now” segment.

Upgrade to HTML5 TODAY! Why wait? Use my HTML5-o-Matic and do it in only THREE EASY STEPS

Step right up! For a limited time we’ll take that grungy old HTML page of yours and in JUST THREE EASY STEPS upgrade it to HTML5.

Could it really be that easy? You betcha; in fact we’ve got a demonstration already prepared for you.

Check out this tired, worn out, seen-better-days HTML; we’re going to turn it into HTML5 right before your very eyes:

Brain Power

Look how easy it is to write HTML5

Get your feet wet by reviewing ...

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

Web Programming with HTML5, CSS, and JavaScript

Publisher Resources

ISBN: 9781449314712Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Head First HTML5 Programming

by Eric Freeman, Elisabeth Robson

Chapter 1. Getting to Know HTML5: Welcome to Webville