Head First HTML5 Programming

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 web applications with Web storage, 2D drawing, offline support, sockets and threads, and more. And to speak this language you’ve got to go beyond HTML5 markup and into the world of the DOM, events, and JavaScript APIs.Now you probably already know all about HTML markup (otherwise known as structure) and you know all aboutCSS style (presentation), but what you’ve been missing is JavaScript (behavior). If all you know about are structure and presentation, you can create some great looking pages, but they’re still just pages. When you add behavior with JavaScript, you can create an interactive experience; even better, you can create full blown web applications.Head First HTML5 Programming is your ultimate tour guide to creating web applications with HTML5 and JavaScript, and we give you everything you need to know to build them, including: how to add interactivity to your pages, how to communicate with the world of Web services, and how to use the great new APIs being developed for HTML5.Here are just some of the things you’ll learn in Head First HTML5 Programing:* Learn how to make your pages truly interactive by using the power of the DOM.* Finally understand how JavaScript works and take yourself from novice to well-informed in just a few chapters.* Learn how JavaScript APIs fit into the HTML5 ecosystem, and how to use any API in your web pages.* Use the Geolocation API to know where your users are.* Bring out your inner artist with Canvas, HTML5’s new 2D drawing surface.* Go beyond just plugging a video into your pages, and create custom video experiences.* Learn the secret to grabbing five megabytes of storage in every user’s browser.* Improve your page’s responsiveness and performance with Web workers.* And much more.

;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?;We know what you're thinking;And we know what your brain is thinking;Metacognition: thinking about thinking;Here's what WE did:;Here's what YOU can do to bend your brain into submission;Read me;Software requirements;The technical review team;Acknowledgments;Even more Acknowledgments!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.;Safari® Books Online;Chapter 1: Getting to Know HTML5: Welcome to Webville;1.1 Would the REAL HTML5 please stand up...;1.2 How HTML5 really works...;1.3 What can you do with JavaScript?;1.4 Writing Serious JavaScript;1.5 Writing Serious JavaScript Revisited...;Chapter 2: Introducing JavaScript and the DOM: A Little Code;2.1 The Way JavaScript Works;2.2 What can you do with JavaScript?;2.3 Declaring a variable;2.4 How to name your variables;2.5 Getting Expressive;2.6 Doing things over and over...;2.7 Make decisions with JavaScript;2.8 Making more decisions... and, adding a catchall;2.9 How and where to add JavaScript to your pages;2.10 How JavaScript interacts with your page;2.11 How to bake your very own DOM;2.12 A first taste of the DOM;2.13 Test drive the planets;2.14 You can't mess with the DOM until the page has fully loaded;2.15 So, what else is a DOM good for anyway?;2.16 Can we talk about JavaScript again? Or, how to store multiple values in JavaScript;2.17 The Phrase-O-Matic;Chapter 3: Events, Handlers and All that Jazz: A Little Interaction;3.1 Get ready for Webville Tunes;3.2 Getting started...;3.3 But nothing happens when I click "Add Song";3.4 Handling Events;3.5 Making a Plan...;3.6 Getting access to the "Add Song" button;3.7 Giving the button a click handler;3.8 A closer look at what just happened...;3.9 Getting the song name;3.10 How do we add a song to the page?;3.11 How to create a new element;3.12 Adding an element to the DOM;3.13 Put it all together...;3.14 ...and take it for a test drive;3.15 Review-what we just did;3.16 How to add the Ready Bake Code...;3.17 Integrating your Ready Bake Code;Chapter 4: JavaScript Functions and Objects: Serious JavaScript;4.1 Expanding your vocabulary;4.2 How to add your own functions;4.3 How a function works;4.4 Local and Global Variables;4.5 Knowing the scope of your local and global variables;4.6 The short lives of variables;4.7 Oh, did we mention functions are also values?;4.8 What you can do with functions as values;4.9 Did someone say "Objects"?!;4.10 Thinking about properties...;4.11 How to create an object in JavaScript;4.12 Some things you can do with objects;4.13 Let's talk about passing objects to functions;4.14 Our next showing is at....;4.15 Testing at the drive-in;4.16 Objects can have behavior too...;4.17 Meanwhile back at Webville Cinema...;4.18 But we know that can't be quite right...;4.19 Let's get the movie parameter out of there...;4.20 Now what?;4.21 Adding the "this" keyword;4.22 A test drive with "this";4.23 How to create a constructor;4.24 Now let's use our constructor;4.25 How does this really work?;4.26 Test drive your constructor right off the factory floor;4.27 What is the window object anyway?;4.28 A closer look at window.onload;4.29 Another look at the document object;4.30 A closer look at document.getElementById;4.31 One more object to think about: your element objects;Chapter 5: Making Your HTML Location Aware: Geolocation;5.1 Location, Location, Location;5.2 The Lat and Long of it...;5.3 How the Geolocation API determines your location;5.4 Just where are you anyway?;5.5 Test drive your location;5.6 What we just did...;5.7 How it all fits together;5.8 Revealing our secret location...;5.9 Writing the code to find the distance;5.10 Location-enabled test drive;5.11 Mapping your position;5.12 How to add a Map to your Page;5.13 Displaying the Map;5.14 Test drive your new heads-up display;5.15 Sticking a Pin in it...;5.16 Testing the marker;5.17 Meanwhile back at the Geolocation API...;5.18 Can we talk about your accuracy?;5.19 Accuracy Test;5.20 "Wherever you go, there you are";5.21 Getting the app started;5.22 Reworking our old code...;5.23 Time to get moving!;5.24 You've got some Options...;5.25 The world of timeouts and maximum age...;5.26 How to specify options;5.27 Let's finish this app!;5.28 Integrating our new function;5.29 And one more time...;Chapter 6: Talking to The Web: Extroverted Apps;6.1 Mighty Gumball wants a Web app;6.2 A little more background on Mighty Gumball;6.3 Just a quick start...;6.4 So how do we make requests to web services?;6.5 How to make a request from JavaScript;6.6 Move over XML, meet JSON;6.7 A quick example using JSON;6.8 Let's get to work!;6.9 Displaying the gumball sales data;6.10 Watch Out, Detour Ahead!;6.11 How to set up your own Web Server;6.12 How to set up your own Web Server, continued;6.13 Back to the code;6.14 Let's test this already!;6.15 Impressing the client...;6.16 Reworking our code to make use of JSON;6.17 The Home Stretch...;6.18 Moving to the Live Server;6.19 A Live Test Drive...;6.20 It's a cliffhanger!;6.21 Remember, we left you with a cliffhanger? A bug;6.22 So, what do we do now?!;6.23 What Browser Security Policy?;6.24 So, what are our options?;6.25 Meet JSONP;6.26 But what is the "P" in JSONP for?;6.27 Let's update the Mighty Gumball web app;6.28 Test drive your new JSONP-charged code;6.29 Improving Mighty Gumball;6.30 Step 1: Taking care of the script element...;6.31 Step 2: Now it's time for the timer;6.32 A time-driven test drive;6.33 Step 3: Reimplementing JSONP;6.34 We almost forgot: watch out for the dreaded browser cache;6.35 One more TIME test drive;6.36 How to remove duplicate sales reports;6.37 Updating the JSON URL to include the lastreporttime;6.38 Test drive lastReportTime;6.39 A Special Message from Chapter 7...;Chapter 7: Bringing Out Your Inner Artist: The Canvas;7.1 Our new start-up: TweetShirt;7.2 Checking out the "comps";7.3 Let's drop in on the TweetShirt crew...;7.4 How to get a canvas into your web page;7.5 Test drive your new canvas;7.6 How to see your canvas;7.7 Drawing on the Canvas;7.8 A little Canvas test drive...;7.9 A closer look at the code;7.10 Failing gracefully;7.11 TweetShirt: the Big Picture;7.12 First, let's get the HTML in place;7.13 Now, let's add the