Eric T. Freeman, Elisabeth Robson

Head First HTML5 Programming

Building Web Apps with JavaScript

• Broschiertes Buch

Produktbeschreibung

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

---

What can HTML5 do for you? If you're a web developer looking to use this new version of HTML, you might be wondering how much has really changed. Head First HTML5 introduces the key features -- including improved text elements, audio and video tags, geolocation, and the Canvas drawing surface -- and uses concrete examples and exercises to apply and reinforce these concepts. You'll learn how HTML5, Javascript, and CSS3 will help create fast, interactive sites with fewer plugins. Get the low-down on changes to the basic HTML markup Explore CSS3, and discover how it compliments HTML5 Understand JavaScript's relationship to HTML5 Learn HTML5's new font, multicolumn, and text capabilities Bring out your inner artist with Canvas Use the technology to add audio and video Take advantage of local storage and databases Learn how HTML5 deals with geolocation, multitouch, and more We think your time is too valuable to waste struggling with new concepts. Using the latest research in cognitive science and learning theory to craft a multi-sensory learning experience, Head First HTML5 uses a visually rich format designed for the way your brain works, not a text-heavy approach that puts you to sleep.

Produktdetails

• Verlag: O'Reilly Media
• Seitenzahl: 608
• Erscheinungstermin: 15. November 2011
• Englisch
• Abmessung: 233mm x 204mm x 35mm
• Gewicht: 1100g
• ISBN-13: 9781449390549
• ISBN-10: 1449390544
• Artikelnr.: 33178639

Autorenporträt

Eric Freeman is described by Head First series co-creator Kathy Sierra as "one of those rare individuals fluent in the language, practice, and culture of multiple domains from hipster hacker, to corporate VP, engineer, think tank." Professionally, Eric recently ended nearly a decade as a media company executive, having held the position ofCTO of Disney Online & Disney.com at The Walt Disney Company. Eric is now devoting his time to WickedlySmart.com and lives with his wife and young daughter on Bainbridge Island. He holds a Ph.D. in Computer Science from Yale University. Elisabeth Robson is co-founder of Wickedly Smart, an education company devoted to helping customers gain mastery in web technologies. She's co-author of two bestselling books, Head First Design Patterns and Head First HTML with CSS & XHTML.

Inhaltsangabe

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