You are previewing Head First HTML5 Programming.

Head First HTML5 Programming

Cover of Head First HTML5 Programming by Elisabeth Robson... Published by O'Reilly Media, Inc.
  1. Head First HTML5 Programming building web apps with javascript
  2. Dedication
  3. A Note Regarding Supplemental Files
  4. Advance Praise for Head First HTML5 Programming
  5. Praise for other books from Eric Freeman & Elisabeth Robson
  6. Authors of Head First HTML5 Programming
  7. How to Use this Book: Intro
    1. Who is this book for?
      1. Who should probably back away from this book?
    2. We know what you’re thinking
    3. And we know what your brain is thinking
    4. Metacognition: thinking about thinking
    5. Here’s what WE did:
    6. Here’s what YOU can do to bend your brain into submission
    7. Read me
    8. Software requirements
    9. The technical review team
    10. Acknowledgments
    11. Even more Acknowledgments!
    12. Safari® Books Online
  8. 1. Getting to Know HTML5: Welcome to Webville
    1. Would the REAL HTML5 please stand up...
    2. How HTML5 really works...
    3. What can you do with JavaScript?
    4. Writing Serious JavaScript
    5. Writing Serious JavaScript Revisited...
  9. 2. Introducing JavaScript and the DOM: A Little Code
    1. The Way JavaScript Works
    2. What can you do with JavaScript?
    3. Declaring a variable
      1. Three steps of creating a variable
    4. How to name your variables
      1. Rule#1: Start your variables with a letter, an underscore or a dollar sign
      2. Rule #2: Then you can use any number of letters, numeric digits, underscores or dollar signs
      3. Rule #3: Make sure you avoid all of JavaScript’s reserved words
    5. Getting Expressive
    6. Doing things over and over...
    7. Make decisions with JavaScript
    8. Making more decisions... and, adding a catchall
    9. How and where to add JavaScript to your pages
    10. How JavaScript interacts with your page
    11. How to bake your very own DOM
    12. A first taste of the DOM
    13. Test drive the planets
    14. You can’t mess with the DOM until the page has fully loaded
      1. Reload the page
    15. So, what else is a DOM good for anyway?
    16. Can we talk about JavaScript again? Or, how to store multiple values in JavaScript
      1. How to create an array
      2. Adding another item to the array
      3. Using your array items
      4. Know the size of your array, or else
    17. The Phrase-O-Matic
  10. 3. Events, Handlers and All that Jazz: A Little Interaction
    1. Get ready for Webville Tunes
    2. Getting started...
      1. Give it a test drive
    3. But nothing happens when I click “Add Song”
    4. Handling Events
    5. Making a Plan...
    6. Getting access to the “Add Song” button
    7. Giving the button a click handler
      1. Putting it to a test...
    8. A closer look at what just happened...
    9. Getting the song name
    10. How do we add a song to the page?
    11. How to create a new element
    12. Adding an element to the DOM
    13. Put it all together...
    14. ...and take it for a test drive
    15. Review—what we just did
    16. How to add the Ready Bake Code...
    17. Integrating your Ready Bake Code
      1. Test drive the saved songs
  11. 4. JavaScript Functions and Objects: Serious JavaScript
    1. Expanding your vocabulary
    2. How to add your own functions
      1. Create a checkGuess function
    3. How a function works
    4. Local and Global Variables
      1. Know the difference or risk humiliation
    5. Knowing the scope of your local and global variables
    6. The short lives of variables
    7. Oh, did we mention functions are also values?
    8. What you can do with functions as values
    9. Did someone say “Objects”?!
    10. Thinking about properties...
    11. How to create an object in JavaScript
    12. Some things you can do with objects
    13. Let’s talk about passing objects to functions
      1. Putting Fido on a diet....
    14. Our next showing is at....
    15. Testing at the drive-in
    16. Objects can have behavior too...
    17. Meanwhile back at Webville Cinema...
    18. But we know that can’t be quite right...
    19. Let’s get the movie parameter out of there...
    20. Now what?
    21. Adding the “this” keyword
    22. A test drive with “this”
    23. How to create a constructor
    24. Now let’s use our constructor
    25. How does this really work?
    26. Test drive your constructor right off the factory floor
    27. What is the window object anyway?
    28. A closer look at window.onload
    29. Another look at the document object
    30. A closer look at document.getElementById
    31. One more object to think about: your element objects
  12. 5. Making Your HTML Location Aware: Geolocation
    1. Location, Location, Location
    2. The Lat and Long of it...
    3. How the Geolocation API determines your location
    4. Just where are you anyway?
    5. Test drive your location
    6. What we just did...
    7. How it all fits together
    8. Revealing our secret location...
    9. Writing the code to find the distance
    10. Location-enabled test drive
    11. Mapping your position
    12. How to add a Map to your Page
      1. Getting ready to create a map...
    13. Displaying the Map
    14. Test drive your new heads-up display
    15. Sticking a Pin in it...
    16. Testing the marker
    17. Meanwhile back at the Geolocation API...
    18. Can we talk about your accuracy?
    19. Accuracy Test
    20. “Wherever you go, there you are”
      1. How we’re going to track your movements
    21. Getting the app started
    22. Reworking our old code...
      1. Writing the watchLocation handler
      2. Writing the clearWatch handler
      3. We still need to make a small update to displayLocation...
    23. Time to get moving!
    24. You’ve got some Options...
      1. Can we talk about your accuracy, again?
    25. The world of timeouts and maximum age...
    26. How to specify options
    27. Let’s finish this app!
    28. Integrating our new function
    29. And one more time...
  13. 6. Talking to The Web: Extroverted Apps
    1. Mighty Gumball wants a Web app
    2. A little more background on Mighty Gumball
    3. Just a quick start...
      1. Turn the engine over...
    4. So how do we make requests to web services?
    5. How to make a request from JavaScript
    6. Move over XML, meet JSON
    7. A quick example using JSON
    8. Let’s get to work!
      1. Writing an onload handler function
    9. Displaying the gumball sales data
    10. Watch Out, Detour Ahead!
    11. How to set up your own Web Server
    12. How to set up your own Web Server, continued
    13. Back to the code
    14. Let’s test this already!
    15. Impressing the client...
    16. Reworking our code to make use of JSON
    17. The Home Stretch...
    18. Moving to the Live Server
    19. A Live Test Drive...
    20. It’s a cliffhanger!
    21. Remember, we left you with a cliffhanger? A bug
    22. So, what do we do now?!
    23. What Browser Security Policy?
      1. Acceptable Behavior for JavaScript code
      2. Unacceptable Behavior for JavaScript code
    24. So, what are our options?
    25. Meet JSONP
    26. But what is the “P” in JSONP for?
    27. Let’s update the Mighty Gumball web app
    28. Test drive your new JSONP-charged code
    29. Improving Mighty Gumball
    30. Step 1: Taking care of the script element...
    31. Step 2: Now it’s time for the timer
    32. A time-driven test drive
    33. Step 3: Reimplementing JSONP
      1. First, let’s set up the JSONP URL
      2. Next, let’s create a new script element
      3. How do we insert the script into the DOM?
      4. Now let’s write the code to insert the script into the DOM
    34. We almost forgot: watch out for the dreaded browser cache
    35. One more TIME test drive
    36. How to remove duplicate sales reports
    37. Updating the JSON URL to include the lastreporttime
    38. Test drive lastReportTime
    39. A Special Message from Chapter 7...
  14. 7. Bringing Out Your Inner Artist: The Canvas
    1. Our new start-up: TweetShirt
    2. Checking out the “comps”
    3. Let’s drop in on the TweetShirt crew...
    4. How to get a canvas into your web page
    5. Test drive your new canvas
    6. How to see your canvas
    7. Drawing on the Canvas
    8. A little Canvas test drive...
    9. A closer look at the code
    10. Failing gracefully
    11. TweetShirt: the Big Picture
    12. First, let’s get the HTML in place
    13. Now, let’s add the <form>
    14. Time to get computational, with JavaScript
    15. Writing the drawSquare function
    16. Time for a test drive!
      1. Why are we seeing the old squares and the new squares when we preview?
    17. Add the call to fillBackgroundColor
      1. Another quick test drive to make sure our new fillBackgroundColor function works...
    18. Meanwhile, back at
      1. And, a couple of hours later...
    19. Drawing with Geeks
    20. Breaking down the arc method
    21. A little taste of using the arc
    22. I say degree, you say radian
    23. Back to writing the TweetShirt circle code
    24. Writing the drawCircle function...
      1. ...and test drive!
    25. Welcome back...
    26. Getting your tweets
    27. Test driving Tweets
    28. Giving drawText a spin
    29. Completing the drawText function
    30. A quick test drive and then LAUNCH!
    31. Yet another test drive
      1. So you have a path! Now what?
  15. 8. Not Your Father’s TV: Video ...With Special Guest Star “Canvas”
    1. Meet Webville TV
    2. The HTML, let’s get it done...
    3. Plug that set in and test it out...
    4. How does the video element work?
    5. Closely inspecting the video attributes...
    6. What you need to know about video formats
    7. The contenders
    8. How to juggle all those formats...
    9. How to be even more specific with your video formats
    10. I was told there would be APIs?
    11. A little content “programming” on Webville TV
    12. Implementing Webville TV’s playlist
    13. So what’s up with that event handler code?
    14. How to write the “end of video” handler
    15. Another test drive...
    16. How the canPlayType method works
      1. Putting canPlayType to use
      2. Integrating the getFormatExtension function
      3. And test drive...
    17. We need your help!
    18. Step inside the booth, let’s take a look...
    19. Unpacking the Demo Unit
    20. Inspecting the rest of the factory code
      1. And now the JavaScript...
      2. Looking at the button handlers
    21. The setEffect and setVideo handlers
    22. And here are the helper functions
    23. That new demo machine smell...test drive time!
    24. Getting our demo videos ready...
    25. Implementing the video controls
    26. Implementing the rest of the video controls
    27. Another test drive!
    28. Taking care of a loose end...
    29. And another...
    30. Switching test videos
      1. Switch drivers and test drive!
    31. It’s time for special effects
    32. The FX plan
    33. Time to get those effects buttons working
    34. How video processing works
    35. How to process video using a scratch buffer
    36. Implementing a scratch buffer with Canvas
    37. How to position the video and canvases
    38. Writing the code to process the video
    39. How to create the buffer
    40. How to process the buffer
      1. We’ve processed one frame, what next?
    41. Now we need to write some effects
    42. A film noir test drive
    43. The Big Test Drive
    44. If only it were a perfect world...
    45. How to use error events
    46. Test Crash!
    47. Where can you go from here?
  16. 9. Storing Things Locally: Web Storage
    1. How browser storage works (1995 - 2010)
    2. How HTML5 Web Storage works
    3. Note to self...
    4. Time for a test drive!
    5. Were Local Storage and the Array separated at birth?
      1. But wait, there’s more!
    6. Getting serious about stickies
    7. Creating the interface
    8. Now let’s add the JavaScript
    9. Time for another test drive!
    10. Completing the user interface
    11. Yet another test drive!
    12. We need to stop for a little scheduled service
    13. Do-It-Yourself maintenance
    14. We have the technology...
    15. Reworking our app to use an array
      1. Before...
      2. New and improved
    16. Converting createSticky to use an array
    17. What needs to change?
    18. Putting it all together
    19. Putting it all together continued...
    20. Test Drive!
    21. Deleting sticky notes
    22. The deleteSticky function
    23. How do you select a sticky to delete?
    24. How to get the sticky to delete from the event
    25. Delete the sticky from the DOM, too
      1. Okay, test it...
    26. But of course we can!
    27. Update the user interface so we can specify a color
    28. JSON.stringify, it’s not just for Arrays
    29. Using the new stickyObj
    30. Test drive sticky note colors
    31. Now that you know localStorage, how are you going to use it?
  17. 10. Putting JavaScript to Work: Web Workers
    1. The Dreaded Slow Script
    2. How JavaScript spends its time
    3. When single-threaded goes BAD
    4. Adding another thread of control to help
    5. How Web Workers work
    6. Your first Web Worker...
      1. How to create a Web Worker
    7. Writing Manager.js
    8. Receiving messages from the worker
    9. Now let’s write the worker
      1. Writing the worker’s message handler
    10. Serving up a test drive
    11. Virtual Land Grab
    12. Take a look around
    13. How to compute a Mandelbrot Set
    14. How to use multiple workers
    15. Let’s build the Fractal Explorer app
      1. Creating the Fractal Viewer HTML Markup
    16. Creating workers, and giving them tasks...
    17. Writing the code
    18. Getting the workers started
    19. Implementing the worker
    20. A little pit stop...
    21. Time to get back on the road...
    22. Back to the code: how to process the worker’s results
    23. Psychedelic test drive
      1. Handling a click event
    24. Another test drive
    25. Fitting the canvas to the browser window
    26. The anal-retentive chef coder
    27. Time for the final test drive!
    28. Congratulations! You made it to the end
  18. A. Leftovers: The Top Ten Topics (We Didn’t Cover)
    1. #1 Modernizr
      1. Including Modernizr in your page
      2. How to detect support
    2. #2 Audio
      1. A Standard for Audio Encodings
    3. #3 jQuery
    4. #4 XHTML is dead, long live XHTML
    5. #5 SVG
    6. #6 Offline web apps
    7. #7 Web Sockets
    8. #8 More canvas API
    9. #9 Selectors API
    10. #10 But, there’s even more!
      1. Indexed Database API and Web SQL
      2. Drag and Drop
      3. Cross-document Messaging
      4. And we could go on...
    11. The HTML5 Guide to New Construction
    12. Adding style to your new construction with CSS3
  19. B. This isn’t goodbye
  20. Index
  21. About the Authors
  22. Colophon
  23. Copyright
O'Reilly logo

How to Use this Book: Intro

image with no caption

In this section, we answer the burning question: “So why DID they put that in an HTML5 book?”

Who is this book for?

If you can answer “yes” to all of these:

  1. Do you have a computer with a web browser and a text editor?

  2. Do you want to learn, understand, remember, and create web applications using the best techniques and most recent standards?

  3. Do you prefer stimulating dinner party conversation to dry, dull, academic lectures?

this book is for you.

Who should probably back away from this book?

If you can answer “yes” to any of these:

  1. Are you completely new to writing web pages?


    Check out Head First HTML with CSS and XHTML for an excellent introduction to web development, and then come back and join us.

  2. Are you already developing web apps and looking for a reference book on HTML5?

  3. Are you afraid to try something different? Would you rather have a root canal than mix stripes with plaid? Do you believe that a technical book can’t be serious if cheesy 50’s educational films and anthropomorphized JavaScript APIs are in it?

this book is not for you.

image with no caption


[Note from marketing: this book is for anyone with a credit card. Cash is nice, too - Ed]

We know what you’re thinking

“How can this be a serious HTML5 programming book?”

“What’s with all the graphics?”

“Can I actually learn it this way?”

And we know what your brain is thinking

Your brain craves novelty. It’s always searching, scanning, waiting for something unusual. It was built that way, and it helps you stay alive.

So what does your brain do with all the routine, ordinary, normal things you encounter? Everything it can to stop them from interfering with the brain’s real job—recording things that matter. It doesn’t bother saving the boring things; they never make it past the “this is obviously not important” filter.

image with no caption

How does your brain know what’s important? Suppose you’re out for a day hike and a tiger jumps in front of you. What happens inside your head and body?

Neurons fire. Emotions crank up. Chemicals surge.

And that’s how your brain knows...

This must be important! Don’t forget it!

But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. You’re studying. Getting ready for an exam. Or trying to learn some tough technical topic your boss thinks will take a week, ten days at the most.

Just one problem. Your brain’s trying to do you a big favor. It’s trying to make sure that this obviously non-important content doesn’t clutter up scarce resources. Resources that are better spent storing the really big things. Like tigers. Like the danger of fire. Like how you should never again snowboard in shorts.

And there’s no simple way to tell your brain, “Hey brain, thank you very much, but no matter how dull this book is, and how little I’m registering on the emotional Richter scale right now, I really do want you to keep this stuff around.”

image with no caption

Metacognition: thinking about thinking

If you really want to learn, and you want to learn more quickly and more deeply, pay attention to how you pay attention. Think about how you think. Learn how you learn.

Most of us did not take courses on metacognition or learning theory when we were growing up. We were expected to learn, but rarely taught to learn.

But we assume that if you’re holding this book, you really want to learn about HTML 5 and JavaScript. And you probably don’t want to spend a lot of time. And since you’re going to build more apps in the future, you need to remember what you read. And for that, you’ve got to understand it. To get the most from this book, or any book or learning experience, take responsibility for your brain. Your brain on this content.

The trick is to get your brain to see the new material you’re learning as Really Important. Crucial to your well-being. As important as a tiger. Otherwise, you’re in for a constant battle, with your brain doing its best to keep the new content from sticking.

image with no caption

So just how DO you get your brain to think that HTML5 (and JavaScript) is a hungry tiger?

There’s the slow, tedious way, or the faster, more effective way. The slow way is about sheer repetition. You obviously know that you are able to learn and remember even the dullest of topics if you keep pounding the same thing into your brain. With enough repetition, your brain says, “This doesn’t feel important to him, but he keeps looking at the same thing over and over and over, so I suppose it must be.”

The faster way is to do anything that increases brain activity, especially different types of brain activity. The things on the previous page are a big part of the solution, and they’re all things that have been proven to help your brain work in your favor. For example, studies show that putting words within the pictures they describe (as opposed to somewhere else in the page, like a caption or in the body text) causes your brain to try to makes sense of how the words and picture relate, and this causes more neurons to fire. More neurons firing = more chances for your brain to get that this is something worth paying attention to, and possibly recording.

A conversational style helps because people tend to pay more attention when they perceive that they’re in a conversation, since they’re expected to follow along and hold up their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” is between you and a book! On the other hand, if the writing style is formal and dry, your brain perceives it the same way you experience being lectured to while sitting in a roomful of passive attendees. No need to stay awake.

But pictures and conversational style are just the beginning.

Here’s what WE did:

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s concerned, a picture really is worth a thousand words. And when text and pictures work together, we embedded the text in the pictures because your brain works more effectively when the text is within the thing the text refers to, as opposed to in a caption or buried in the text somewhere.

image with no caption

We used redundancy, saying the same thing in different ways and with different media types, and multiple senses, to increase the chance that the content gets coded into more than one area of your brain.

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, and we used pictures and ideas with at least some emotional content, because your brain is tuned to pay attention to the biochemistry of emotions. That which causes you to feel something is more likely to be remembered, even if that feeling is nothing more than a little humor, surprise, or interest.

image with no caption

We used a personalized, conversational style, because your brain is tuned to pay more attention when it believes you’re in a conversation than if it thinks you’re passively listening to a presentation. Your brain does this even when you’re reading.

We included loads of activities, because your brain is tuned to learn and remember more when you do things than when you read about things. And we made the exercises challenging-yet-do-able, because that’s what most people prefer.

image with no caption

We used multiple learning styles, because you might prefer step-by-step procedures, while someone else wants to understand the big picture first, and someone else just wants to see an example. But regardless of your own learning preference, everyone benefits from seeing the same content represented in multiple ways.

image with no caption

We include content for both sides of your brain, because the more of your brain you engage, the more likely you are to learn and remember, and the longer you can stay focused. Since working one side of the brain often means giving the other side a chance to rest, you can be more productive at learning for a longer period of time.

And we included stories and exercises that present more than one point of view, because your brain is tuned to learn more deeply when it’s forced to make evaluations and judgments.

We included challenges, with exercises, and by asking questions that don’t always have a straight answer, because your brain is tuned to learn and remember when it has to work at something. Think about it—you can’t get your body in shape just by watching people at the gym. But we did our best to make sure that when you’re working hard, it’s on the right things. That you’re not spending one extra dendrite processing a hard-to-understand example, or parsing difficult, jargon-laden, or overly terse text.

We used people. In stories, examples, pictures, etc., because, well, because you’re a person. And your brain pays more attention to people than it does to things.

image with no caption

Here’s what YOU can do to bend your brain into submission

image with no caption

Cut this out and stick it on your refrigerator.

So, we did our part. The rest is up to you. These tips are a starting point; listen to your brain and figure out what works for you and what doesn’t. Try new things.

  1. Slow down. The more you understand, the less you have to memorize.

    Don’t just read. Stop and think. When the book asks you a question, don’t just skip to the answer. Imagine that someone really is asking the question. The more deeply you force your brain to think, the better chance you have of learning and remembering.

  2. Do the exercises. Write your own notes.

    We put them in, but if we did them for you, that would be like having someone else do your workouts for you. And don’t just look at the exercises. Use a pencil. There’s plenty of evidence that physical activity while learning can increase the learning.

  3. Read the “There are No Dumb Questions”

    That means all of them. They’re not optional sidebars—they’re part of the core content! Don’t skip them.

  4. Make this the last thing you read before bed. Or at least the last challenging thing.

    Part of the learning (especially the transfer to long-term memory) happens after you put the book down. Your brain needs time on its own, to do more processing. If you put in something new during that processing time, some of what you just learned will be lost.

  5. Drink water. Lots of it.

    Your brain works best in a nice bath of fluid. Dehydration (which can happen before you ever feel thirsty) decreases cognitive function.

  6. Talk about it. Out loud.

    Speaking activates a different part of the brain. If you’re trying to understand something, or increase your chance of remembering it later, say it out loud. Better still, try to explain it out loud to someone else. You’ll learn more quickly, and you might uncover ideas you hadn’t known were there when you were reading about it.

  7. Listen to your brain.

    Pay attention to whether your brain is getting overloaded. If you find yourself starting to skim the surface or forget what you just read, it’s time for a break. Once you go past a certain point, you won’t learn faster by trying to shove more in, and you might even hurt the process.

  8. Feel something!

    Your brain needs to know that this matters. Get involved with the stories. Make up your own captions for the photos. Groaning over a bad joke is still better than feeling nothing at all.

  9. Create something!

    Apply this to your daily work; use what you are learning to make decisions on your projects. Just do something to get some experience beyond the exercises and activities in this book. All you need is a pencil and a problem to solve... a problem that might benefit from using the tools and techniques you’re studying for the exam.

Read me

This is a learning experience, not a reference book. We deliberately stripped out everything that might get in the way of learning whatever it is we’re working on at that point in the book. And the first time through, you need to begin at the beginning, because the book makes assumptions about what you’ve already seen and learned.

We expect you to know HTML and CSS.

If you don’t know HTML markup (that is, all about HTML documents including elements, attributes, property structure, structure versus presentation), then pick up a copy of Head First HTML with CSS & XHTML before starting this book. Otherwise, you should be good to go.

Some experience helps, but we don’t expect you to know JavaScript.

If you’ve got any programming or scripting in your background (even if it isn’t JavaScript), it’s going to help you. But, we don’t expect you to know JavaScript going into this book; in fact, this book is designed to follow Head First HTML with CSS & XHTML, which has no scripting in it.

We encourage you to use more than one browser with this book.

We encourage you to test the pages and web applications in this book with several browsers. This will give you experience in seeing the differences among browsers and in creating pages that work well in a variety of browsers. We most highly recommend Google Chrome and Apple Safari for use with this book as they are, in general, the most up-to-date with the current standards. But we do recommend you also try the most recent versions of the other major browsers including Internet Explorer, Firefox and Opera, as well as mobile browsers on devices with iOS and Android.

The activities are NOT optional.

The exercises and activities are not add-ons; they’re part of the core content of the book. Some of them are to help with memory, some are for understanding, and some will help you apply what you’ve learned. Don’t skip the exercises. Even crossword puzzles are important—they’ll help get concepts into your brain. But more importantly, they’re good for giving your brain a chance to think about the words and terms you’ve been learning in a different context.

The redundancy is intentional and important.

One distinct difference in a Head First book is that we want you to really get it. And we want you to finish the book remembering what you’ve learned. Most reference books don’t have retention and recall as a goal, but this book is about learning, so you’ll see some of the same concepts come up more than once.

The Brain Power exercises don’t have answers.

For some of them, there is no right answer, and for others, part of the learning experience of the Brain Power activities is for you to decide if and when your answers are right. In some of the Brain Power exercises, you will find hints to point you in the right direction.

Software requirements

To write HTML5 and JavaScript code, you need a text editor, a browser, and, sometimes, a web server (it can be locally hosted on your personal desktop).

The text editors we recommend for Windows are PSPad, TextPad or EditPlus (but you can use Notepad if you have to). The text editors we recommend for Mac are TextWrangler, TextMate or TextEdit. If you’re on a Linux system, you’ve got plenty of text editors built in, and we trust you don’t need us to tell you about them.

We hope you’ve got the browser bit covered and have installed at least two browsers (see the previous page). If not, do it now. It’s also worth your time to learn how to use the browser developer tools; each of the major browsers has built-in tools you can use to inspect the JavaScript console (you can see errors as well as output you display using console.log, a handy alternative to alert), web storage usage, the DOM, CSS style that’s been applied to elements, and much much more. Some browsers even have plug-ins for additional developer tools. You don’t need the developer tools to get through the book, but if you’re willing to spend the time to investigate how to use these, it will make development easier.

Some HTML5 features and JavaScript APIs require that you serve files from a real web server rather than by loading a file (i.e., your URL will start with http:// rather than file://). We’ve identified which examples you’ll need a server for in the appropriate places in the book, but if you’re motivated, we recommend you go ahead and install a server on your computer now. For Mac and Linux, Apache comes built-in, so you’ll just need to make sure you know how to access it and where to put your files so you can serve them using your local server. For Windows, you’ll need to install Apache or IIS; if you go the Apache route, there are plenty of open source tools like WAMP and XAMPP that are fairly easy to install.

That’s it! Have fun...

The technical review team

image with no caption

Not just a reviewer, Paul’s an experienced Head First author having written Head First Python and Head First Programming!

image with no caption

Our Master Technical Reviewer.

image with no caption

No simple reviewer here, he’s also the series creator! Man, talk about pressure...

image with no caption

We tried to tell her she only needed to help us with graphics, but she couldn’t help herself and was also a stellar tech reviewer.

image with no caption

Rebeca acted as our second pair of eyes; she saved our butts on code details no else saw (including us!).

image with no caption

Our 110% effort reviewer. He even ran around in the middle of the night in his PJs testing our geo code.

Our reviewers:

We’re extremely grateful for our technical review team. The whole team proved how much we needed their technical expertise and attention to detail. David Powers, Rebeca Dunn-Kahn, Trevor Farlow, Paul Barry, Louise Barr, and Bert Bates left no stone unturned in their review and the book is a much much better book for it. You guys rock!


Even more technical review:

This is becoming a recurring theme in our books, but we wanted to give another shout out to David Powers, our esteemed technical reviewer, and author of many books including PHP Solutions: Dynamic Web Development Made Easy. David’s comments always result in signficant improvements to the text, and we sleep better at night knowing that if it’s been through David, then we’ve hit the technical mark. Thanks again, David.


Note to Editor: can we see if we can lock this guy in for our next three books? And see if we can make it an exclusive!

At O’Reilly:

Courtney Nash was given the difficult task managing not only the book Head First HTML5 Programming, but also managing, well, us. Courtney not only cleared all paths for us, but also applied the delicate pressure every editor needs to, to get a book out the door. Most of all, though, Courtney provided extremely valuable feedback on the book and its content, which resulted in a few significant reworks of the book. This is a much better book because of Courtney’s efforts. Thank you.

image with no caption

Lou Barr was also an integral part of this book and contributed in many ways—from reviewer, graphic designer, production designer, web designer, to Photoshop wrangler. Thank you Lou, we could not have done it without you!

image with no caption

And thanks to a few other folks who helped make this happen:

From there we’d like to thank the rest of the O’Reilly crew for support in a hundred different ways. That team includes Mike Hendrickson, Mike Loukides, Laurel Ruma, Karen Shaner, Sanders Kleinfeld, Kristen Borg, Karen Montgomery, Rachel Monaghan, Julie Hawks and Nancy Reinhardt.

Even more Acknowledgments![1]

And thanks to a bunch of other folks:

James Henstridge wrote the original code that became the fractal viewer in Chapter 10, which we shaped to our purposes for use in the book. Apologies for any code we introduced that may not have been as elegant as his original version. Actor and artist Laurence Zankowski, forever type-cast as the Starbuzz CEO, generously reappeared in this book and helped to test the video application in Chapter 8 (a must see). The Bainbridge Island Downtown Association kindly allowed us to use their excellent logo, designed by Denise Harris, for the WickedlySmart Headquarters. Thank you to Anthony Vizzari and A&A Studios for allowing us to use a photo of their fabulous photo booth. Our TweetShirt startup example uses some fine looking icons from ChethStudios.Net. We appreciate the dedicated work of the Internet Archive, home of the films we used for Webville TV. And thank you to Daniel Steinberg for always being there to bounce things off.

image with no caption

And finally, thanks to Kathy and Bert

Last, and anything but least, to Kathy Sierra and Bert Bates, our partners in crime and the BRAINS who created the series. We hope, once again, we’ve done the series justice.

image with no caption

Safari® Books Online

image with no caption

Safari® Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.

With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at

[1] The large number of acknowledgments is because we’re testing the theory that everyone mentioned in a book acknowledgment will buy at least one copy, probably more, what with relatives and everything. If you’d like to be in the acknowledgment of our next book, and you have a large family, write to us.

The best content for your career. Discover unlimited learning on demand for around $1/day.