Head First HTML5 Programming building web apps with javascript
by Elisabeth Robson, Eric Freeman
Head First HTML5 Programming
- 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?
- 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
- 2. Introducing JavaScript and the DOM: A Little Code
- The Way JavaScript Works
- What can you do with JavaScript?
- Declaring a variable
- How to name your variables
- 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
- So, what else is a DOM good for anyway?
- Can we talk about JavaScript again? Or, how to store multiple values in JavaScript
- The Phrase-O-Matic
- 3. Events, Handlers and All that Jazz: A Little Interaction
- Get ready for Webville Tunes
- Getting started...
- 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
- 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
- 4. JavaScript Functions and Objects: Serious JavaScript
- Expanding your vocabulary
- How to add your own functions
- How a function works
- Local and Global Variables
- 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
- 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
- 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”
- Getting the app started
- Reworking our old code...
- Time to get moving!
- You’ve got some Options...
- 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...
- 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!
- 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?
- 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
- 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!
- Add the call to fillBackgroundColor
- Meanwhile, back at TweetShirt.com...
- 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...
- 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
- 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
- We need your help!
- Step inside the booth, let’s take a look...
- Unpacking the Demo Unit
- Inspecting the rest of the factory code
- 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
- 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
- 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?
- 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
- 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
- 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...
- Writing Manager.js
- Receiving messages from the worker
- Now let’s write the worker
- 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 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
- 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)
- B. This isn’t goodbye
- Index
- About the Authors
- Colophon
- Copyright
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.