WIXLIB

Designer-Developers are hot commodities today.But how do you build your development chops fast enough to join their ranks?ModernWith Peachpit’s Develop and Design series for visual learners.Modern JavaScriptYou’ll learn about JavaScript itself and the relationship betweenJavaScript and HTML. Next you’ll explore variables, commonoperators, and control structures. Then you’ll create functions,handle events, and do more with HTML forms. You’ll masterAjax, work with frameworks, and use JavaScript with PHP tocreate a complete example. The result is a book that helps younot just tinker with JavaScript but to thoroughly comprehend it.LARRY ULLMAN is a writer, Web and software developer, trainer, instructor,speaker, and consultant. He has written 22 books and dozens of articles. As hisreaders can attest, Larry’s strength is in translating geek into English: convertingthe technical and arcane into something comprehensible and useful.“A breath of fresh air in the over-complicatedworld of JavaScript books. This is one I’ll keepclose by!”Jay BlanchardWeb developer and consultant and author ofApplied jQuery: Develop and DesignThis book includes:JJJJJJJJEasy step-by-step instruction, ampleillustrations, and clear examplesReal-world techniques to build yourskillsInsight into best practices from aveteran Web expertEmphasis on strategies for creatingreliable code that will work on all oftoday’s browsers and devices, eventhose without JavaScriptCompanion web site:http://larryullman.com/Develop and peachpitPeachpit PressJavaScriptDevelop and Designit’s time for a current, definitive JavaScript book,and in this comprehensive beginner’s guide, bestselling authorLarry Ullman teaches the language as it is implemented today.Larry demonstrates how to build upon JavaScript’s ease of use,while demystifying its often-cryptic syntax, especially for thosewho have not programmed before. This book enforces modernJavaScript’s best practices and embraces key Web developmentapproaches such as progressive enhancement and unobtrusivescripting. The author demonstrates loads of real-world codeand makes it freely available for download.Modern JavaScriptDevelop and DesignUS 54.99 54.99 CanadaCanada 57.99 57.99USwww.peachpit.comISBN-13: 978-0-321-81252-0ISBN-10:0-321-81252-2Book Level Beginner to IntermediateComputer Book Shelf Category Web DevelopmentCovers JavaScriptCover Design Aren Howell Straiger9780321 8125205 5 4 9 9Larry Ullman

ModernJavaScriptDevelop and DesignLarry Ullman

Modern JavaScript: Develop and DesignLarry UllmanPeachpit Press1249 Eighth StreetBerkeley, CA 94710510/524-2178510/524-2221 (fax)Find us on the Web at: www.peachpit.comTo report errors, please send a note to: errata@peachpit.comPeachpit Press is a division of Pearson Education.Copyright 2012 by Larry UllmanAcquisitions Editor: Rebecca GulickCopy Editor: Patricia PaneTechnical Reviewer: Jacob SeidelinCompositor: Danielle FosterProduction Editor: Katerina MaloneProofreader: Liz WelchIndexer: Valerie Haynes-PerryCover Design: Peachpit PressNotice of RightsAll rights reserved. No part of this book may be reproduced or transmitted in any form by any means,electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of thepublisher. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com.Notice of LiabilityThe information in this book is distributed on an “As Is” basis, without warranty. While every precaution hasbeen taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability to anyperson or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by theinstructions contained in this book or by the computer software and hardware products described in it.TrademarksMany of the designations used by manufacturers and sellers to distinguish their products are claimed astrademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim,the designations appear as requested by the owner of the trademark. All other product names and servicesidentified throughout this book are used in editorial fashion only and for the benefit of such companies withno intention of infringement of the trademark. No such use, or the use of any trade name, is intended toconvey endorsement or other affiliation with this book.13-digit ISBN: 978-0-321-81252-010-digit ISBN:0-321-81252-2987654321Printed and bound in the United States of America

This book is dedicated to Doug and Christina,and to their family and friends,for the extraordinary, life-changing gift.

So many, many thanks to Rebecca, Nancy, and Nancy, for working very hard to make this project happenand for their supreme flexibility. And, of course, for continuing to work with metime and again.Patricia, for her diligent editing and attention to detail.Jacob, for providing a top-notch technical review, and for not being afraid tosay “Not what I would do .”Danielle, for magically converting a handful of random materials into somethingthat looks remarkably like an actual book.Liz, for the sharp proofreading eye. Never too late to catch a mistake!The indexer, Valerie, who makes it easy for readers to find what they needwithout wading through all of my exposition.Mimi, for the snazzy interior and cover design work. I love the tool motif!All the readers over the years who requested that I write this book and provideddetailed thoughts as to what they would and would not want this book to be. I hopeit’s what you were looking for!Jonas Jacek (http://jonas.me/) for permission to use his HTML5 template.Sara, for entertaining the kids so that I can get some work done, even if I’drather not.Sam and Zoe, for being the kid epitome of awesomeness.Jessica, for doing everything you do and everything you can.ivModern JavaScript: Develop and Design

ContentsIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xWelcome to JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiiPart 1 Getting StartedChapter 1(Re-)Introducing JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2What Is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4JavaScript’s History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6JavaScript Isn’t. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17How JavaScript Compares to. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Why JavaScript Is a Good Thing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21JavaScript Versions and Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22JavaScript Programming Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Chapter 2JavaScript in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Choosing a Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28An HTML5 Primer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Adding JavaScript to HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Key Development Approaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Cobbling Together Some Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44Steal this JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56Chapter 3Tools of the Trade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58The Great Debate:Text Editor or IDE? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60The Browser:Your Friend, Your Enemy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69Testing on Multiple Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75Testing JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Errors and Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Online Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Contentsv