Books & Videos

Table of Contents

  1. Chapter 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...

  2. Chapter 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

    4. How to name your variables

    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

    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

    17. The Phrase-O-Matic

  3. Chapter 3 Events, Handlers and All that Jazz: A Little Interaction

    1. Get ready for Webville Tunes

    2. Getting started...

    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

    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

  4. Chapter 4 JavaScript Functions and Objects: Serious JavaScript

    1. Expanding your vocabulary

    2. How to add your own functions

    3. How a function works

    4. Local and Global Variables

    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

    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

  5. Chapter 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

    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”

    21. Getting the app started

    22. Reworking our old code...

    23. Time to get moving!

    24. You’ve got some Options...

    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...

  6. Chapter 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...

    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!

    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?

    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

    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...

  7. Chapter 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!

    17. Add the call to fillBackgroundColor

    18. Meanwhile, back at

    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...

    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

  8. Chapter 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

    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

    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

    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

    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?

  9. Chapter 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?

    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

    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

    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?

  10. Chapter 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...

    7. Writing Manager.js

    8. Receiving messages from the worker

    9. Now let’s write the worker

    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

    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

    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

  1. Appendix Leftovers: The Top Ten Topics (We Didn’t Cover)

    1. #1 Modernizr

    2. #2 Audio

    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!

    11. The HTML5 Guide to New Construction

    12. Adding style to your new construction with CSS3

  2. Appendix This isn’t goodbye

  3. Colophon