Head First HTML5 Programming free download ebook
Advance Praise for Head First HTML5 Programming
“HTML5 is the “future of the web”. How many times have you heard that? If you really want to understand the family of technologies that make up HTML5, read this book! Head First HTML5 Programming is the definitive book on HTML5 for everyone from beginners to experienced developers.” — Aaron LaBerge, CEO, Fanzter Inc.
“This book is a rollicking ride through the wild new territory of HTML5, where we are all bound to be battling scorpions for years. It takes you through basic concepts so you understand the purposes of the HTML5 design, and then into each area so you know your way around. Like all Head First books, it replaces dry recitation with lively, memorable, fact-laden bursts of information. I will always have the formal HTML5 spec web site for reference purposes, but I’d rather *learn* it lively.” — Ken Arnold, Design/Build Hub, Peak Impact, Inc.
“A must have book on HTML5 which continues on the Head First tradition of being witty, fun, chocked-full of examples and wickedly smart!”
— Danny Mavromatis, Sr Software Architect, ABC Television Group
“Head First HTML5 Programming does a great job of making sense of many of the key aspects of HTML5 in a fun, easy-to-digest manner. With its highly-visual style and numerous code samples, complex concepts like canvas and asynchronous programming are simplified and illustrated making them straightforward and engaging.”
— Michael S. Scherotter, Principal Architect Evangelist, Microsoft Corporation
“HTML5 is a cake with many layers of technologies. Head First HTML5 Programming bakes that cake, and then throws it at your face. You will consume deliciousness and rejoice.”
— Josh Rhoades, co-founder of BrightHalf
With Head First HTML5 Programming, the multiplicity of HTML5 is approached with a multiplicity in the medium that makes the hard work of learning fun.
— Ward Cunningham, wiki inventor
“HTML5 is the hottest new technology for website development. Developers far and wide can’t wait to put it to use to build flexible, rich media websites that also work great on tablets and smart phones. Head First HTML5 Programming is the best and funnest way to feed this exciting new technology to your brain. I highly recommend it!” — Marianne Marck, SVP Technology, Blue Nile Inc.
Advance Praise for Head First HTML5 Programming
“Straightforward, informative and entertaining, Head First HTML5 Programming is a must for anyone wanting to get started with HTML5 or just to refresh their skills. The Head First series helps me to keep my technical skills up to date allowing me to better support my developers and projects.”
— Todd Guill, Project Manager, AllRecipes.com
“This ain’t your grandpa’s DHTML! Head First HTML5 Programming paints a hopeful and confident picture of the future of the Web through HTML5, while empowering you to code your own ticket there. If you’re seeking a definitive, accessible, and at times pretty funny guidebook to this standard, look no further.”
— Manny Otto, Web Producer and Creative
“The authors have hit the nail on the head—JavaScript skills are the key to HTML5. Even if you’ve never written a JavaScript program before, they’ll quickly get you up and running through a series of fun and practical projects.”
— David Powers, author of PHP Solutions: Dynamic Web Design Made Easy
Praise for other books from Eric Freeman & Elisabeth Robson
“Beware. If you’re someone who reads at night before falling asleep, you’ll have to restrict Head First HTML with CSS &
http://dbaron.org/
— L. David Baron, Technical Lead, Layout & CSS, Mozilla Corporation
— Danny Goodman, author of Dynamic HTML: The Definitive Guide “The Web would be a much better place if every HTML author started off by reading this book.”
“Head First HTML with CSS & XHTML is a thoroughly modern introduction to forward-looking practices in Web page markup and presentation. It correctly anticipates readers’ puzzlements and handles them just in time. The highly graphic and incremental approach precisely mimics the best way to learn this stuff: make a small change and see it in the browser to understand what each new item means.”
Fribourg University, Switzerland
— Pauline McNamara, Center for New Technologies and Education,
XHTML to daytime reading. This book wakes up your brain.”
— Satish Kumar
“This book’s admirable clarity, humor and substantial doses of clever make it the sort of book that helps even non-programmers think well about problem-solving.” — Cory Doctorow, co-editor of Boing Boing
“I literally love this book. In fact, I kissed this book in front of my wife.”
and author of Mirror Worlds and Machine Beauty
— David Gelernter, Professor of Computer Science, Yale University
“This book is close to perfect, because of the way it combines expertise and readability. It speaks with authority and it reads beautifully. It’s one of the very few software books I’ve ever read that strikes me as indispensable. (I’d put maybe 10 books in this category, at the outside.)”
and founder of the Hillside Group
“I feel like a thousand pounds of books have just been lifted off of my head.” — Ward Cunningham, inventor of the Wiki
and author of Down and Out in the Magic Kingdom and Someone Comes to Town, Someone Leaves Town
“Head First HTML with CSS & XHTML teaches you how to do things right from the beginning without making the whole process seem overwhelming. HTML, when properly explained, is no more complicated than plain English, and they do an excellent job of keeping every concept at eye-level.” — Mike Davidson, President & CEO, Newsvine, Inc.
Other O’Reilly books by Eric Freeman and Elisabeth Robson Head First Design Patterns Head First HTML with CSS and XHTML
Other related books from O’Reilly HTML5 Up and Running HTML5 Canvas HTML5: The Missing Manual HTML5 Geolocation HTML5 Graphics with SVG and CSS3 HTML5 Forms HTML5 Media
Other books in O’Reilly’s Head First series Head First C# Head First Java Head First Object-Oriented Analysis and Design (OOA&D) Head First HTML with CSS and XHTML Head First Design Patterns Head First Servlets and JSP Head First SQL Head First Software Development Head First JavaScript Head First Ajax Head First Rails Head First PHP & MySQL Head First Web Design Head First Networking Head First iPhone and iPad Development Head First jQuery
Head First
HTML5 Programming
building web apps with javascriptWouldn’t it be dreamy if there was an HTML5 book that didn’t assume you knew what the DOM, events, and APIs were, all by page three? It’s probably just a fantasy...
Eric Freeman Elisabeth Robson Beijing • Cambridge • K ln • Sebastopol • Tokyo
Copyright © 2011 Eric Freeman and Elisabeth Robson. All rights reserved. Head First HTML5 Programming by Eric Freeman and Elisabeth Robson are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/ O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. Printed in the United States of America. institutional sales department: (800) 998-9938 or corporate@oreilly.com. Kathy Sierra, Bert Bates
Series Creators: Courtney Nash Editor: Louise Barr Design Editor: Karen Montgomery Cover Designer: Kristen Borg Production Editor: Ellen Troutman Indexer: Nancy Reinhardt Proofreader: October 2011: First Edition. Printing History: Many of the designations used by manufacturers and sellers to distinguish their products are claimed as Head First HTML5 Programming, and related trade dress are trademarks of O’Reilly Media, Inc. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. The Head First series designations,
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark
While every precaution has been taken in the preparation of this book, the publisher and the authors assume no
claim, the designations have been printed in caps or initial caps.responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
[M] ISBN: 978-1-449-39054-9 No gumballs were harmed in the making of this book.
To Steve Jobs, who hyped HTML5 to the point where this
book should sell a zillion copies... And to Steve Jobs, because he’s our hero.the authors Elisabeth Robson
Authors of Head First HTML5 Programming Eric Freeman is described by Head First series co-creator Kathy is a software engineer, writer, and trainer.
Eric Elisabeth
Sierra as “one of those rare individuals fluent in the She has been passionate about technology since her language, practice, and culture of multiple domains from days as a student at Yale University, where she earned a hipster hacker, corporate VP, engineer, think tank.” Masters of Science in Computer Science and designed a concurrent, visual programming language and Professionally, Eric recently ended nearly a decade as a software architecture. media company executive—having held the position of
Elisabeth’s been involved with the Internet since the CTO of Disney Online & Disney.com at The Walt Disney early days; she co-created the award-winning Web site, Company. Eric is now devoting his time to WickedlySmart,
The Ada Project, one of the first Web sites designed a startup he co-created with Elisabeth. to help women in computer science find career and
By training, Eric is a computer scientist, having studied mentorship information online. with industry luminary David Gelernter during his Ph.D.
She’s currently co-founder of WickedlySmart, an online work at Yale University. His dissertation is credited as education experience centered on web technologies, the seminal work in alternatives to the desktop metaphor, where she creates books, articles, videos and more. and also as the first implementation of activity streams, a
Previously, as Director of Special Projects at O’Reilly concept he and Dr. Gelernter developed. Media, Elisabeth produced in-person workshops and
In his spare time, Eric is deeply involved with music; you’ll online courses on a variety of technical topics and find Eric’s latest project, a collaboration with ambient developed her passion for creating learning experiences music pioneer Steve Roach, available on the iPhone app to help people understand technology. Prior to her work store under the name Immersion Station. with O’Reilly, Elisabeth spent time spreading fairy dust at The Walt Disney Company, where she led research
Eric lives with his wife and young daughter on Bainbridge and development efforts in digital media. Island. His daughter is a frequent vistor to Eric’s studio, where she loves to turn the knobs of his synths and audio
When not in front of her computer, you’ll find Elisabeth effects. Eric’s also passionate about kids education and hiking, cycling or kayaking in the great outdoors, with nutrition, and looking for ways to improve them. her camera nearby, or cooking vegetarian meals.
Write to Eric at or visit his
eric@wickedlysmart.com You can send her email at beth@wickedlysmart.com
site at .
http://ericfreeman.com or visit her blog at . http://elisabethrobson.com
table of contents Table of Contents (Summary) 1 2 6 5 4
3 10 9 8
7
Table of Contents (the real thing)
Intro Your brain on HTML5 Programming. Here you are trying to learn doesn’t stick. Your brain’s thinking, “Better leave room for more important things, something, while here your brain is doing you a favor by making sure the learning like which wild animals to avoid and whether naked snowboarding is a bad idea.” So and JavaScript? how do you trick your brain into thinking that your life depends on knowing HTML5
table of contents
getting to know 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 true web applications with local storage, 2D drawing, offline support, sockets and threads, and more. The story of HTML wasn’t always pretty, and it’s full of drama (we’ll get to all that), but in this chapter, we’re first going to go on a quick joyride through Webville to get sense for everything that goes into “HTML5.” Come on, hop in, we’re headed to Webville, and we’re going to start by going from zero to HTML5 in 3.8 pages (flat).
Drag & Drop Offline Caching Geolocation Video Canvas Forms Web Workers Sockets html head title script body h1 p h2 em Audio Local Storage
table of contents
introducing JavaScript and the DOM
JavaScript is going to take you to new places. You alreadyknow all about HTML markup (otherwise known as structure) and you know
all about CSS style (otherwise known as presentation), but what you’ve been missing is JavaScript (otherwise known as behavior). If all you know about arestructure and presentation, sure, 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; or, even better, you can create full blown webapplications. Get ready to add the most interesting and versatile skill in your
web toolkit: JavaScript and programming!table of contents
3 events, handlers and all that jazz
You still haven’t reached out to touch your user. You’ve learned the basics of JavaScript but can you get interactive with your users? When pages respond to user input, they aren’t just documents anymore, they’re living, reacting applications. In this chapter you’re going to learn how to handle one form of user input (excuse the pun), and wire up an old-fashioned HTML <form> element to actual code. It might sound dangerous, but it’s also powerful. Strap yourself in, this is a fast moving to-the-point-chapter where we go from zero to interactive app in no time.
“ “
“ “
table of contents javascript functions and objects
Can you call yourself a scripter yet?
Probably—you already know your way around a lot of JavaScript, but who wants to be a scripter when you can be a programmer? It’s time to get serious and take it up a notch—it’s
4 time you learn about functions and objects. They’re the key to writing code that is more powerful, better organized and more maintainable. They’re also heavily used across HTML5 JavaScript APIs, so the better you understand them the faster you can jump into a new API and start ruling with it. Strap in, this chapter is going to require your undivided attention...
table of contents making your html location aware
Geolocation Wherever you go, there you are
And sometimes knowing where you are makes all the difference (especially to a web app). In this chapter we’re going to show you how to create web pages that are location aware—sometimes you’ll be able to
5 pin point your users down to the corner they’re standing on, and sometimes you’ll only be able to determine the area of town they’re in (but you’ll still know the town!). Heck, sometimes you won’t be able to determine anything about their location, which could be for technical reasons, or just because they don’t want you being so nosy. Go figure. In any case, in this chapter we’re going to explore a JavaScript API: Geolocation. Grab the best location-aware device you have (even if it’s your desktop PC), and let’s get started.
table of contents
talking to the web
You’ve been sitting in your page for too long. It’s time to get out a little, to talk to web services, to gather data and to bring it all back so you can build better experiences mixing all that great data together. That's a big part of writing modern HTML5 applications, but to do that you’ve got to know how to talk to web services. In this chapter we're going to do just that, and incorporate some data from a real web service right in your page. And, after you've learned how to do that you'll be able to reach out and touch any web service you want. We’ll even fill you in on the hippest new lingo you should use when talking to web services. So, come
on, you’re going to use some more APIs, the communications APIs.
Watch out for the cliffhanger in this chapter!
table of contents bringing out your inner artist
The Canvas HTML’s been liberated from being just a “markup” language
With HTML5’s new canvas element you’ve got the power to create, manipulate and destroy pixels, right in your own hands. In this chapter we'll use the canvas element to bring out your inner
7 artist—no more talk about HTML being all semantics and no presentation; with canvas we're going to paint and draw with color. Now it's all about presentation. We’ll tackle how to place a canvas in your pages, how to draw text and graphics (using JavaScript of course), and even how to handle browsers that don't support the canvas element. And canvas isn't just a one-hit wonder; you're going to be seeing a lot more of canvas in other chapters in this book. t waiting A new HTML5 startup is jus for you to get it off the ground!
table of contents
8 not your father’s tv We don’t need no plug-in.
After all, video is now a first-class member of the HTML family—just throw a <video> element in your page and you’ve got instant video, even across most devices. But video is far more than just an element, it’s also a JavaScript API that allows us to control playback, create our own custom video interfaces and integrate video with the rest of HTML in totally new ways. Speaking of integration... remember there’s that video and canvas connection we’ve been talking about—you’re going to see that putting video and canvas together gives us a powerful new way to process video in real time. In this chapter we’re going to start by getting video up and running in a page and then we’ll put the JavaScript API through its paces. Come on, you’re going to be amazed what you can do with a little markup, JavaScript and video & canvas.
Tune in to Webville TV...
table of contents
storing things locally Tired of stuffing your client data into that tiny closet cookie? That was fun in the 90s, but we’ve got much bigger needs today with web apps. What if we said we could get you five megabytes on every user’s browser? You’d probably look at us like we were trying to sell you a bridge in Brooklyn. Well, there’s no need to be skeptical—the HTML5 Web storage API does just that! In this chapter we’re going to take you through everything you need to store any object locally on your user’s device and to make use of it in your web experience.
It’s hard to manage my busy life if I can’t get rid of these stickies after I’m done with them. Can you add a delete function?
table of contents putting javascript to work
enough time with JavaScript or browsing the web you’ve probably seen the “slow script” message. And, with all those multicore processors sitting in your new machine how could a script be running too slow? It's because JavaScript can only do one thing at a time. But, with HTML5 and Web Workers, all that changes. You’ve now got the ability to spawn your own JavaScript workers to get more work done. Whether you’re just trying to design a more responsive app, or you just want to max out your machine’s CPU, Web Workers are here to help. Put your JavaScript manager’s hat on, let’s get some workers cracking!
table of contents
We covered a lot of ground, and you’re almost finished with this book.
We’ll miss you, but before we let you go, we wouldn’t feel right about sending you out into the world without a little more preparation. We can’t possibly fit everything you’ll need to know into this relatively small chapter. Actually, we did originally include everything you need to know about HTML5 (not already covered by the other chapters), by reducing the type point size to .00004. It all fit, but nobody could read it. So, we threw most of it away, and kept the best bits for this Top Ten appendix.
the intro how to use this book Intro
I can’t believe they put that in an HTML5 programming book!
In this section, we answer the burning ques tion: “So why DID they put tha
t in an HTML5 book?”
how to use this book Who is this book for?
If you can answer “yes” to all of these: Do you have a computer with a web browser and a
1 test editor?
Do you want to learn, understand, remember, and
2 create web applications using the best techniques and most recent standards? stimulating dinner party conversation
Do you prefer
3 to dry, dull, academic lectures? this book is for you.
Who should probably back away from this book? If you can answer “yes” to any of these:
Check out Head First HTML Are you completely new to writing web pages? with CSS and XHTML for an
1 excellent introduction to web development, and then come back and join us.
Are you already developing web apps and looking for a
2 reference book on HTML5?
Are you afraid to try something different? Would
3 you rather have a root canal than mix stripes with plaid? Do you believe that a technical book can’t be serious if cheesy 50’s educational films and anthropomorphized JavaScript APIs are in it? this book is not for you.
[Note from marketing: this book is for anyone with a credit card. Cash is nice, too - Ed]
the intro We know what you’re thinking.
“How can this be a serious HTML5 programming book?” “What’s with all the graphics?”
Your brain think
“Can I actually learn it this way?”
s THIS is imp ortant.
And we know what your brain is thinking
Your brain craves novelty. It’s always searching, scanning, waiting for something unusual. It was built that way, and it helps you stay alive.
So what does your brain do with all the routine, ordinary, normal things you encounter? Everything it can to stop them from interfering with the brain’s real job—recording things that matter. It doesn’t bother saving the boring things; they never make it past the “this is obviously not important” filter. How does your brain know what’s important? Suppose you’re out for a day hike and a tiger jumps in front of you. What happens inside your head and body? Neurons fire. Emotions crank up. Chemicals surge.
Great. Only And that’s how your brain knows... 640 more dull, dry, boring pages.
This must be important! Don’t forget it!
s But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. Your brain think orth
You’re studying. Getting ready for an exam. Or trying to learn some tough
THIS isn’t w technical topic your boss thinks will take a week, ten days at the most. saving.
Just one problem. Your brain’s trying to do you a big favor. It’s trying to make sure that this obviously non-important content doesn’t clutter up scarce resources. Resources that are better spent storing the really big things. Like tigers. Like the danger of fire. Like how you should never again snowboard in shorts. And there’s no simple way to tell your brain, “Hey brain, thank you very much, but no matter how dull this book is, and how little I’m registering on the emotional Richter scale right now, I really do want you to keep this stuff around.”
how to use this book r as a learner. We think of a “Head First” reade e sure ou have to get it, then mak learn something? First, y test So what does it take to our head. Based on the la
bout pushing facts into y
tional psychology, learning you don’t forget it. It’s not a , neurobiology, and educa research in cognitive science t turns your brain on. xt on a page. We know wha takes a lot more than tening principles:
Some of the Head First lear s are far more memo rable than wordsMake it visual. Image
improvement in rec
alone, and make lea ings all and transfer stud rning much more ef ies). It also makes th fective (up to 89%more understandab
le. Put the words within o te to, rather than on the bottom or on r near another page, and le the graphics they rela veproblems related to
the content. arners will be up to twice as likely to sol . In and personalized style person, conversatio l language. Don’t tak learning tests if the Use a conversational - recent studies, stude nal style rather than e yourself too seriou content spoke direc nts performed up to taking a formal ton tly to the reader, usi sly. Which would you 40% better on post e. Tell stories instead ng a first- pay more of attention to: a stimu lecturing. Use casua lating dinner party c ompanion, or a lectu er words, re? k more deeply. In oth s in unless you actively f nd Get the learner to thin your head. A reader ew inspired to solve pro d knowledge. And for th has to be motivated lex your neurons, no that, you need chal blems, draw conclus lenges, exercises, an , engaged, curious, a thing much happen ions, and generate n sides of the brain an thought-provoking questions, and activ d multiple senses. ities that involve bo ’ve all had the “I real ly want to learn ader’s attention. We rain pays attention t o things this but I can’t stay a Get—and keep—the re that are out of the o ill learn much more tough, technical top it’s not. rdinary, interesting, quickly if wake past page one ning a new,ic doesn’t have to be
strange, eye-catchin ” experience. Your b boring. Your brain w g, unexpected. Lear We now know that your ability to reme mber something is You Touch their emotions. hat you care about. largely dependent o eart-wrenching stor remember when yo ity, fun, “what the...? boy and his dog. We something everybo feeling of “I Rule!” th technical than thou u feel something. No ” , and the n its emotional cont ies about a ’re talking emotions dy else at comes when you ” Bob from , we’re not talking h ent. You remember w like surprise, curios solve a puzzle, learn engineering doesn’t thinks is hard, or rea . lize you know some thing that “I’m morethe intro Metacognition: thinking about thinking
If you really want to learn, and you want to learn more quickly and more deeply, pay attention to how you pay attention. Think about how you think. Learn how you
I wonder how I learn. can trick my brain into remembering
Most of us did not take courses on metacognition or learning theory when we were this stuff... growing up. We were expected to learn, but rarely taught to learn.
But we assume that if you’re holding this book, you really want to learn about iPhone development. And you probably don’t want to spend a lot of time. And since you’re going to build more apps in the future, you need to remember what you read. And for that, you’ve got to understand it. To get the most from this book, or any book or learning experience, take responsibility for your brain. Your brain on this content.
The trick is to get your brain to see the new material you’re learning as Really Important. Crucial to your well-being. As important as a tiger. Otherwise, you’re in for a constant battle, with your brain doing its best to keep the new content from sticking.
DO you get your brain to think that So just how HTML5 (and JavaScript) is a hungry tiger? There’s the slow, tedious way, or the faster, more effective way. The slow way is about sheer repetition. You obviously know that you are able to learn and remember even the dullest of topics if you keep pounding the same thing into your brain.
With enough repetition, your brain says, “This doesn’t feel important to him, but he keeps looking at the same thing over and over and over, so I suppose it must be.” The faster way is to do anything that increases brain activity, especially different
types of brain activity. The things on the previous page are a big part of the solution,
and they’re all things that have been proven to help your brain work in your favor. For example, studies show that putting words within the pictures they describe (as opposed to somewhere else in the page, like a caption or in the body text) causes your brain to try to makes sense of how the words and picture relate, and this causes more neurons to fire. More neurons firing = more chances for your brain to get that this is something worth paying attention to, and possibly recording.
A conversational style helps because people tend to pay more attention when they perceive that they’re in a conversation, since they’re expected to follow along and hold up their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” is between you and a book! On the other hand, if the writing style is formal and dry, your brain perceives it the same way you experience being lectured to while sitting in a roomful of passive attendees. No need to stay awake.
But pictures and conversational style are just the beginning.
how to use this book html Here’s what WE did: body
We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s h1 p p h2 p concerned, a picture really is worth a thousand words. And when text and pictures work img a em a together, we embedded the text in the pictures because your brain works more effectively when the text is within the thing the text refers to, as opposed to in a caption or buried in the text somewhere.
We used redundancy, saying the same thing in different ways and with different media types, and multiple senses, to increase the chance that the content gets coded into more than one area of your brain. We used concepts and pictures in unexpected ways because your brain is tuned for novelty, and we used pictures and ideas with at least some emotional content, because your brain is tuned to pay attention to the biochemistry of emotions. That which causes you to
feel something is more likely to be remembered, even if that feeling is nothing more than a
BE the Browser little humor, surprise, or interest
We used a personalized, conversational style, because your brain is tuned to pay more attention when it believes you’re in a conversation than if it thinks you’re passively listening to a presentation. Your brain does this even when you’re reading. We included loads of activities, because your brain is tuned to learn and remember more when you do things than when you read about things. And we made the exercises challenging-yet-do-able, because that’s what most people prefer. We used multiple learning styles, because you might prefer step-by-step procedures, while someone else wants to understand the big picture first, and someone else just wants
Puzzles
to see an example. But regardless of your own learning preference, everyone benefits from seeing the same content represented in multiple ways. We include content for both sides of your brain, because the more of your brain you engage, the more likely you are to learn and remember, and the longer you can stay focused. Since working one side of the brain often means giving the other side a chance to rest, you can be more productive at learning for a longer period of time. And we included stories and exercises that present more than one point of view, because your brain is tuned to learn more deeply when it’s forced to make evaluations and judgments. We included challenges, with exercises, and by asking questions that don’t always have a straight answer, because your brain is tuned to learn and remember when it has to work at something. Think about it—you can’t get your body in shape just by watching people at the gym. But we did our best to make sure that when you’re working hard, it’s on the right things. That you’re not spending one extra dendrite processing a hard-to-understand example, or parsing difficult, jargon-laden, or overly terse text. We used people. In stories, examples, pictures, etc., because, well, because you’re a person. And your brain pays more attention to people than it does to things.
the intro
8 Feel something!
Cut this out and stick it on your refrigerator.
Don’t just read. Stop and think. When the book asks you a question, don’t just skip to the answer. Imagine that someone really is asking the question. The more deeply you force your brain to think, the better chance you have of learning and remembering.
Slow down. The more you understand, the less you have to memorize.
We put them in, but if we did them for you, that would be like having someone else do your workouts for you. And don’t just look at the exercises. Use a pencil. There’s plenty of evidence that physical activity while learning can increase the learning.
Do the exercises. Write your own notes.
That means all of them. They’re not optional sidebars—they’re part of the core content! Don’t skip them.
Read the “There are No Dumb Questions”
Part of the learning (especially the transfer to long-term memory) happens after you put the book down. Your brain needs time on its own, to do more processing. If you put in something new during that processing time, some of what you just learned will be lost.
Speaking activates a different part of the brain. If you’re trying to understand something, or increase your chance of remembering it later, say it out loud. Better still, try to explain it out loud to someone else. You’ll learn more quickly, and you might uncover ideas you hadn’t known were there when you were reading about it.
Talk about it. Out loud.
Your brain needs to know that this matters. Get involved with the stories. Make up your own captions for the photos. Groaning over a bad joke is still better than feeling nothing at all. Pay attention to whether your brain is getting overloaded. If you find yourself starting to skim the surface or forget what you just read, it’s time for a break. Once you go past a certain point, you won’t learn faster by trying to shove more in, and you might even hurt the process.
Listen to your brain.
So, we did our part. The rest is up to you. These tips are a starting point; listen to your brain and figure out what works for you and what doesn’t. Try new things.
Apply this to your daily work; use what you are learning to make decisions on your projects. Just do something to get some experience beyond the exercises and activities in this book. All you need is a pencil and a problem to solve… a problem that might benefit from using the tools and techniques you’re studying for the exam.
9 Create something!
7
6
Make this the last thing you read before bed. Or at least the last challenging thing.
Dehydration (which can happen before you ever feel thirsty) decreases cognitive function.
Your brain works best in a nice bath of fluid.
4 5 Drink water. Lots of it.
3
2
1
Here’s what YOU can do to bend your brain into submission
how to use this book Read me
This is a learning experience, not a reference book. We deliberately stripped out everything that might get in the way of learning whatever it is we’re working on at that point in the book. And the first time through, you need to begin at the beginning, because the book makes assumptions about what you’ve already seen and learned. We expect you to know HTML and CSS. If you don’t know HTML markup (that is, all about HTML documents including elements, attributes, property structure, structure versus presentation), then pick up a copy of Head First
HTML with CSS & XHTML before starting this book. Otherwise, you should be good to go.
Some experience helps, but we don’t expect you to know JavaScript. If you’ve got any programming or scripting in your background (even if it isn’t JavaScript), it’s going to help you. But, we don’t expect you to know JavaScript going into this book; in fact, this book is designed to follow Head First HTML with CSS & XHTML, which has no scripting in it. We encourage you to use more than one browser with this book. We encourage you to test the pages and web applications in this book with several browsers. This will give you experience in seeing the differences among browsers and in creating pages that work well in a variety of browsers. We most highly recommend Google Chrome and Apple Safari for use with this book as they are, in general, the most up-to-date with the current standards. But we do recommend you also try the most recent versions of the other major browsers including Internet Explorer, Firefox and Opera, as well as mobile browsers on devices with iOS and Android.
The activities are NOT optional. The exercises and activities are not add-ons; they’re part of the core content of the book. Some of them are to help with memory, some are for understanding, and some will help you apply what you’ve learned. Don’t skip the exercises. Even crossword puzzles are important— they’ll help get concepts into your brain. But more importantly, they’re good for giving your brain a chance to think about the words and terms you’ve been learning in a different context. The redundancy is intentional and important. One distinct difference in a Head First book is that we want you to really get it. And we want you to finish the book remembering what you’ve learned. Most reference books don’t have retention and recall as a goal, but this book is about learning, so you’ll see some of the same concepts come up more than once.
The Brain Power exercises don’t have answers. For some of them, there is no right answer, and for others, part of the learning experience of the Brain Power activities is for you to decide if and when your answers are right. In some of the Brain Power exercises, you will find hints to point you in the right direction.
the intro
Software requirements
To write HTML5 and JavaScript code, you need a text editor, a browser, and, sometimes, a web server (it can be locally hosted on your personal desktop). The text editors we recommend for Windows are PSPad, TextPad or EditPlus (but you can use Notepad if you have to). The text editors we recommend for Mac are TextWrangler, TextMate or TextEdit. If you’re on a Linux system, you’ve got plenty of text editors built in, and we trust you don’t need us to tell you about them. We hope you’ve got the browser bit covered and have installed at least two browsers (see the previous page). If not, do it now. It’s also worth your time to learn how to use the browser developer tools; each of the major browsers has built-in tools you can use to inspect the JavaScript console (you can see errors as well as output you display using
, a handy alternative to ), web storage usage, the DOM, CSS
console.log alert
style that’s been applied to elements, and much much more. Some browsers even have plug-ins for additional developer tools. You don’t need the developer tools to get through the book, but if you’re willing to spend the time to investigate how to use these, it will make development easier.
Some HTML5 features and JavaScript APIs require that you serve files from a real web server rather than by loading a file (i.e., your URL will start with
http://
rather than ). We’ve identified which examples you’ll need a server for in the
file://