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