Книга станет Вашим надежным гидом в области создания веб-приложений с HTML5 и javascript, и мы даем вам все, что нужно знать, чтобы построить их, в том числе:. как добавить интерактивности в ваши страницы, как общаться с миром веб-сервисов, и как использовать новые API-интерфейсы, разрабатываемые для HTML5.
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.
Now you probably already know all about HTML markup (otherwise known as structure) and you know all aboutCSS style (presentation), but what you’ve been missing is javascript (behavior). If all you know about are structure and presentation, you can create some great looking pages, but they’re still just pages. When you add behavior with javascript, you can create an interactive experience even better, you can create full blown web applications.
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.
Here are just some of the things you’ll learn in Head First HTML5 Programing:
Learn how to make your pages truly interactive by using the power of the DOM.
Finally understand how javascript works and take yourself from novice to well-informed in just a few chapters.
Learn how javascript APIs fit into the HTML5 ecosystem, and how to use any API in your web pages.
Use the Geolocation API to know where your users are.
Bring out your inner artist with Canvas, HTML5’s new 2D drawing surface.
Go beyond just plugging a video into your pages, and create custom video experiences.
Learn the secret to grabbing five megabytes of storage in every user’s browser.
Improve your page’s responsiveness and performance with Web workers.
And much more.
Author(s): Eric T Freeman, Elisabeth Robson
Edition: 1
Publisher: O'Reilly Media
Year: 2011
Language: English
Pages: 610
Tags: Библиотека;Компьютерная литература;HTML / CSS / JavaScript;HTML5 / CSS3;
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
