Head First HTML5 Programming: Building Web Apps with JavaScript

Table of Contents......Page 11
How to use this book: Intro......Page 23
Who is this book for?......Page 24
And we know what your brain is thinking......Page 25
Metacognition: thinking about thinking......Page 27
The technical review team......Page 32
Acknowledgments......Page 33
1 Getting to know HTML5: Welcome to Webville......Page 37
Upgrade to HTML5 TODAY!......Page 38
Introducing the HTML5-o-Matic, update your HTML now!......Page 40
You’re closer to HTML5 markup than you think!......Page 43
HTML5 Exposed......Page 47
Would the REAL HTML5 please stand up.........Page 48
How HTML5 really works.........Page 50
Who Does What?......Page 52
Your First Mission: Browser Reconnaissance......Page 53
What can you do with JavaScript?......Page 58
Writing Serious JavaScript......Page 61
Writing Serious JavaScript Revisited.........Page 62
Bullet Points......Page 67
Exercise Solutions......Page 68
2 Introducing JavaScript and the DOM: A Little Code......Page 71
The Way JavaScript Works......Page 72
What can you do with JavaScript?......Page 73
Declaring a variable......Page 74
How to name your variables......Page 76
Getting Expressive......Page 79
Doing things over and over.........Page 82
Make decisions with JavaScript......Page 85
Making more decisions... and, adding a catchall......Page 86
How and where to add JavaScript to your pages......Page 89
How JavaScript interacts with your page......Page 90
How to bake your very own DOM......Page 91
A first taste of the DOM......Page 92
HTML5 is from Mars, JavaScript is from Venus......Page 94
You can’t mess with the DOM until the page has fully loaded.......Page 100
So, what else is a DOM good for anyway?......Page 102
Can we talk about JavaScript again? Or,how to store multiple values in JavaScript......Page 103
The Phrase-O-Matic......Page 107
Bullet Points......Page 111
Exercise Solutions......Page 113
3 Events, handlers and all that jazz: A Little Interaction......Page 121
Get ready for Webville Tunes......Page 122
Getting started.........Page 123
But nothing happens when I click “Add Song”......Page 124
Handling Events......Page 125
Getting access to the “Add Song” button......Page 126
Giving the button a click handler......Page 127
A closer look at what just happened.........Page 128
Getting the song name......Page 130
How do we add a song to the page?......Page 133
How to create a new element......Page 135
Adding an element to the DOM......Page 136
... and take it for a test drive......Page 137
Review—what we just did......Page 138
How to add the Ready Bake Code.........Page 141
Integrating your Ready Bake Code......Page 142
Bullet Points......Page 144
Exercise Solutions......Page 146
4 JavaScript functions and objects: Serious JavaScript......Page 149
Expanding your vocabulary......Page 150
How to add your own functions......Page 151
How a function works......Page 152
Anatomy of a Function......Page 157
Local and Global Variables......Page 159
Knowing the scope of your local and global variables......Page 160
Oh, did we mention functions are also values?......Page 164
Did someone say “Objects”?!......Page 167
How to create an object in JavaScript......Page 168
Some things you can do with objects......Page 169
Let’s talk about passing objects to functions......Page 172
Objects can have behavior too.........Page 178
Meanwhile back at Webville Cinema.........Page 179
Adding the “this” keyword......Page 181
How to create a constructor......Page 183
How does this really work?......Page 185
Test drive your constructor right off the factory floor......Page 189
What is the window object anyway?......Page 191
A closer look at window.onload......Page 192
A closer look at document.getElementById......Page 193
One more object to think about: your element objects......Page 194
Bullet Points......Page 196
Exercise Solutions......Page 198
5 Making your HTML location aware: Geolocation......Page 201
Location, Location, Location......Page 202
The Lat and Long of it.........Page 203
How the Geolocation API determines your location......Page 204
Just where are you anyway?......Page 208
How it all fits together......Page 212
Revealing our secret location.........Page 215
Writing the code to find the distance......Page 217
How to add a Map to your Page......Page 219
Displaying the Map......Page 220
Sticking a Pin in it.........Page 222
The other cool things you can do with the Google Maps API......Page 224
Can we talk about your accuracy?......Page 227
“Wherever you go, there you are”......Page 228
Getting the app started......Page 229
Reworking our old code.........Page 230
You’ve got some Options.........Page 234
The world of timeouts and maximum age.........Page 235
Don’t Try this at Home (Pushing Geo to the Limit)......Page 238
Let’s finish this app!......Page 240
Integrating our new function......Page 241
Bullet Points......Page 243
Exercise Solutions......Page 245
6 Talking to the web: Extroverted Apps......Page 249
Mighty Gumball wants a Web app......Page 250
A little more background on Mighty Gumball......Page 252
So how do we make requests to web services?......Page 255
How to make a request from JavaScript......Page 256
Move over XML, meet JSON......Page 262
A quick example using JSON......Page 263
Writing an onload handler function......Page 265
Displaying the gumball sales data......Page 266
How to set up your own Web Server......Page 267
Impressing the client.........Page 271
Reworking our code to make use of JSON......Page 272
Moving to the Live Server......Page 273
It’s a cliffhanger!......Page 275
Remember, we left you with a cliffhanger? A bug.......Page 278
What Browser Security Policy?......Page 280
So, what are our options?......Page 283
Meet JSONP......Page 288
But what is the “P” in JSONP for?......Page 289
Let’s update the Mighty Gumball web app......Page 292
Step 1: Taking care of the script element.........Page 300
Step 2: Now it’s time for the timer......Page 301
Step 3: Reimplementing JSONP......Page 303
We almost forgot: watch out forthe dreaded browser cache......Page 308
How to remove duplicate sales reports......Page 309
Updating the JSON URL to include the lastreporttime......Page 311
Bullet Points......Page 313
7 Bringing out your inner artist: The Canvas......Page 317
Our new start-up: TweetShirt......Page 318
Checking out the “comps”......Page 319
How to get a canvas into your web page......Page 322
How to see your canvas......Page 324
Drawing on the Canvas......Page 326
Failing gracefully......Page 331
TweetShirt: the Big Picture......Page 333
First, let’s get the HTML in place......Page 336
Now, let’s add the 
......Page 337
Time to get computational, with JavaScript......Page 338
Writing the drawSquare function......Page 340
Add the call to fillBackgroundColor......Page 343
Meanwhile, back at TweetShirt.com.........Page 345
Drawing with Geeks......Page 347
Breaking down the arc method......Page 350
A little taste of using the arc......Page 352
I say degree, you say radian......Page 353
Back to writing the TweetShirt circle code......Page 354
Writing the drawCircle function.........Page 355
Getting your tweets......Page 359
Canvas Text Up Close......Page 364
Giving drawText a spin......Page 366
Completing the drawText function......Page 367
A quick test drive and then LAUNCH!......Page 368
Bullet Points......Page 374
Exercise Solutions......Page 377
TweetShirt Easter egg......Page 383
8 Not your father’s TV: Video...with special guest star “Canvas”......Page 385
Meet Webville TV......Page 386
Plug that set in and test it out.........Page 387
How does the video element work?......Page 389
Closely inspecting the video attributes.........Page 390
What you need to know aboutvideo formats......Page 392
How to juggle all those formats.........Page 394
Your Next Mission: Video Reconnaissance......Page 397
I was told there would be APIs?......Page 399
A little content “programming” on Webville TV......Page 400
Implementing Webville TV’s playlist......Page 402
How to write the “end of video” handler......Page 403
How the canPlayType method works......Page 405
We need your help!......Page 409
Step inside the booth, let’s take a look.........Page 410
Unpacking the Demo Unit......Page 411
Inspecting the rest of the factory code......Page 412
The setEffect and setVideo handlers......Page 414
And here are the helper functions......Page 415
Getting our demo videos ready......Page 419
Implementing the video controls......Page 420
Taking care of a loose end.........Page 422
Switching test videos......Page 423
It’s time for special effects......Page 425
The FX plan......Page 426
Time to get those effects buttons working......Page 427
How video processing works......Page 428
How to process video using a scratch buffer......Page 429
Implementing a scratch buffer with Canvas......Page 431
How to create the buffer......Page 432
How to process the buffer......Page 433
Now we need to write some effects......Page 435
If only it were a perfect world.........Page 441
How to use error events......Page 442
Where can you go from here?......Page 443
Bullet Points......Page 444
Exercise Solutions......Page 446
9 Storing things locally: Web Storage......Page 449
How browser storage works (1995 - 2010)......Page 450
How HTML5 Web Storage works......Page 453
Note to self.........Page 454
Were Local Storage and the Array separated at birth?......Page 460
Getting serious about stickies......Page 464
Creating the interface......Page 465
Now let’s add the JavaScript......Page 466
Completing the user interface......Page 467
We need to stop for a little scheduled service......Page 470
Do-It-Yourself maintenance......Page 471
We have the technology.........Page 475
Reworking our app to use an array......Page 476
Converting createSticky to use an array......Page 477
What needs to change?......Page 478
Putting it all together......Page 479
Deleting sticky notes......Page 482
The deleteSticky function......Page 485
How do you select a sticky to delete?......Page 486
How to get the sticky to delete from the event......Page 487
Delete the sticky from the DOM, too......Page 488
Update the user interface so we can specify a color......Page 489
JSON.stringify, it’s not just for Arrays......Page 490
Using the new stickyObj......Page 491
Test drive sticky note colors......Page 492
Don’t Try This at Home (or Blowing Up Your 5 Megabytes)......Page 494
Now that you know localStorage,how are you going to use it?......Page 498
Bullet Points......Page 500
Exercise Solutions......Page 502
10 Putting JavaScript to work: Web Workers......Page 509
How JavaScript spends its time......Page 510
When single-threaded goes BAD......Page 511
Adding another thread of control to help......Page 512
How Web Workers work......Page 514
Your first Web Worker.........Page 519
Writing Manager.js......Page 520
Receiving messages from the worker......Page 521
Now let’s write the worker......Page 522
Virtual Land Grab......Page 530
How to compute a Mandelbrot Set......Page 532
How to use multiple workers......Page 533
Let’s build the Fractal Explorer app......Page 539
Ready Bake Code......Page 540
Creating workers, and giving them tasks.........Page 544
Writing the code......Page 545
Getting the workers started......Page 546
Implementing the worker......Page 547
Back to the code: how to processthe worker’s results......Page 550
Fitting the canvas to the browser window......Page 553
The anal-retentive coder......Page 554
IN THE LABORATORY......Page 556
Bullet Points......Page 560
Exercise Solutions......Page 562
Appendix: The Top Ten Topics (we didn’t cover)......Page 567
#1 Modernizr......Page 568
#2 Audio......Page 569
#3 jQuery......Page 570
#4 XHTML is dead, long live XHTML......Page 572
#5 SVG......Page 573
#6 Offline web apps......Page 574
#7 Web Sockets......Page 575
#8 More canvas API......Page 576
#9 Selectors API......Page 578
#10 But, there’s even more!......Page 579
The HTML5 Guide to New Construction......Page 581
Webville Guide to HTML5 Semantic Elements......Page 582
Webville Guide to CSS3 Properties......Page 584
Index......Page 585
Colophon......Page 609
This isn\'t goodbye......Page 610