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.
Inhaltsverzeichnis
;
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 < form> ;
7. 14 Time to get computational, with JavaScript;
7. 15 Writing the drawSquare function;
7. 16 Time for a test drive! ;
7. 17 Add the call to fillBackgroundColor;
7. 18 Meanwhile, back at TweetShirt. com. . . ;
7. 19 Drawing with Geeks;
7. 20 Breaking down the arc method;
7. 21 A little taste of using the arc;
7. 22 I say degree, you say radian;
7. 23 Back to writing the TweetShirt circle code;
7. 24 Writing the drawCircle function. . . ;
7. 25 Welcome back. . . ;
7. 26 Getting your tweets;
7. 27 Test driving Tweets;
7. 28 Giving drawText a spin;
7. 29 Completing the drawText function;
7. 30 A quick test drive and then LAUNCH! ;
7. 31 Yet another test drive;
Chapter 8: Not Your Father's TV: Video . . . With Special Guest Star "Canvas";
8. 1 Meet Webville TV;
8. 2 The HTML, let's get it done. . . ;
8. 3 Plug that set in and test it out. . . ;
8. 4 How does the video element work? ;
8. 5 Closely inspecting the video attributes. . . ;
8. 6 What you need to know about video formats;
8. 7 The contenders;
8. 8 How to juggle all those formats. . . ;
8. 9 How to be even more specific with your video formats;
8. 10 I was told there would be APIs? ;
8. 11 A little content "programming" on Webville TV;
8. 12 Implementing Webville TV's playlist;
8. 13 So what's up with that event handler code? ;
8. 14 How to write the "end of video" handler;
8. 15 Another test drive. . . ;
8. 16 How the canPlayType method works;
8. 17 We need your help! ;
8. 18 Step inside the booth, let's take a look. . . ;
8. 19 Unpacking the Demo Unit;
8. 20 Inspecting the rest of the factory code;
8. 21 The setEffect and setVideo handlers;
8. 22 And here are the helper functions;
8. 23 That new demo machine smell. . . test drive time! ;
8. 24 Getting our demo videos ready. . . ;
8. 25 Implementing the video controls;
8. 26 Implementing the rest of the video controls;
8. 27 Another test drive! ;
8. 28 Taking care of a loose end. . . ;
8. 29 And another. . . ;
8. 30 Switching test videos;
8. 31 It's time for special effects;
8. 32 The FX plan;
8. 33 Time to get those effects buttons working;
8. 34 How video processing works;
8. 35 How to process video using a scratch buffer;
8. 36 Implementing a scratch buffer with Canvas;
8. 37 How to position the video and canvases;
8. 38 Writing the code to process the video;
8. 39 How to create the buffer;
8. 40 How to process the buffer;
8. 41 Now we need to write some effects;
8. 42 A film noir test drive;
8. 43 The Big Test Drive;
8. 44 If only it were a perfect world. . . ;
8. 45 How to use error events;
8. 46 Test Crash! ;
8. 47 Where can you go from here? ;
Chapter 9: Storing Things Locally: Web Storage;
9. 1 How browser storage works (1995 - 2010);
9. 2 How HTML5 Web Storage works;
9. 3 Note to self. . . ;
9. 4 Time for a test drive! ;
9. 5 Were Local Storage and the Array separated at birth? ;
9. 6 Getting serious about stickies;
9. 7 Creating the interface;
9. 8 Now let's add the JavaScript;
9. 9 Time for another test drive! ;
9. 10 Completing the user interface;
9. 11 Yet another test drive! ;
9. 12 We need to stop for a little scheduled service;
9. 13 Do-It-Yourself maintenance;
9. 14 We have the technology. . . ;
9. 15 Reworking our app to use an array;
9. 16 Converting createSticky to use an array;
9. 17 What needs to change? ;
9. 18 Putting it all together;
9. 19 Putting it all together continued. . . ;
9. 20 Test Drive! ;
9. 21 Deleting sticky notes;
9. 22 The deleteSticky function;
9. 23 How do you select a sticky to delete? ;
9. 24 How to get the sticky to delete from the event;
9. 25 Delete the sticky from the DOM, too;
9. 26 But of course we can! ;
9. 27 Update the user interface so we can specify a color;
9. 28 JSON. stringify, it's not just for Arrays;
9. 29 Using the new stickyObj;
9. 30 Test drive sticky note colors;
9. 31 Now that you know localStorage, how are you going to use it? ;
Chapter 10: Putting JavaScript to Work: Web Workers;
10. 1 The Dreaded Slow Script;
10. 2 How JavaScript spends its time;
10. 3 When single-threaded goes BAD;
10. 4 Adding another thread of control to help;
10. 5 How Web Workers work;
10. 6 Your first Web Worker. . . ;
10. 7 Writing Manager. js;
10. 8 Receiving messages from the worker;
10. 9 Now let's write the worker;
10. 10 Serving up a test drive;
10. 11 Virtual Land Grab;
10. 12 Take a look around;
10. 13 How to compute a Mandelbrot Set;
10. 14 How to use multiple workers;
10. 15 Let's build the Fractal Explorer app;
10. 16 Creating workers, and giving them tasks. . . ;
10. 17 Writing the code;
10. 18 Getting the workers started;
10. 19 Implementing the worker;
10. 20 A little pit stop. . . ;
10. 21 Time to get back on the road. . . ;
10. 22 Back to the code: how to process the worker's results;
10. 23 Psychedelic test drive;
10. 24 Another test drive;
10. 25 Fitting the canvas to the browser window;
10. 26 The anal-retentive chef coder;
10. 27 Time for the final test drive! ;
10. 28 Congratulations! You made it to the end;
Leftovers: The Top Ten Topics (We Didn't Cover);
#1 Modernizr;
#2 Audio;
#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! ;
The HTML5 Guide to New Construction;
Adding style to your new construction with CSS3;
This isn't goodbye;
Colophon;
