JavaScript Visual QuickStart Guide

Final spine 1.078”full EcolorI SALU AQLU QI C K S TAT GV IVSUI CUKSTARTGRUIDE U InI DVIS U A L QU ICK S TA RT GU IDELearn JavaScript—the quick and easy way!websites to life with JavaScript and show you what to do step by step. Concise steps and explanations let you get up and running in no time. Essential reference guide keeps you coming back again and again.book will teach you all you need to know—from the basics of makingyour website interactive to adding advanced features with jQuery—and much more!download sample scripts and more.Tom Negrino and Dori Smith have demystified the web for non-geeks since 1995.Tom, a longtime contributor to Macworld magazine, has authored dozens of books.Dori cofounded the Web Standards Project, founded the Wise-Women community,and has programmed computers for decades. Together, they’ve written StylingWeb Pages with CSS: Visual QuickProject Guide and the best-selling Dreamweaver:Visual QuickStart Guide. They live in California’s wine country.www.peachpit.comFOR COMPUTERS USING:Safari 4 or later, Internet Explorer 9 or later,Firefox 3 or later, Chrome 9 or laterCAN 45.99UK 21.99LEVEL: Beginning / IntermediateMorgen Benoit PhotographyNina Susik/Shutterstock.comAUTHOR PHOTO:COVER IMAGE:9780321 9967015 3 9 9 9NEGRINOSMITHCATEGORY: JavaScript / Programming LanguagesUS 39.99ISBN-13: 978-0-321-99670-1ISBN-10:0-321-99670-4VISUAL QU IC KS TA RT G UI DE Visit the companion website at www.javascriptworld.com toPeachpit PressJavaScriptNinth EditionNinth Edition Whether you’re a JavaScript newbie or an experienced veteran, thisJavaScript Easy visual approach uses pictures to guide you through bringing yourTOM NEGRINODORI SMITHL E A R N T H E Q U I C K A N D E A S Y WAY !

V I S UA L Q U I C K S TA R T G U I D EJavaScriptNINTH EDITIONTOM NEGRINO DORI SMITHPeachpit Press

Visual QuickStart GuideJavaScript, Ninth EditionTom Negrino and Dori SmithPeachpit PressFind us on the web at www.peachpit.comTo report errors, send a note to errata@peachpit.comPeachpit Press is a division of Pearson EducationCopyright 2015 by Tom Negrino and Dori SmithProject Editor: Nancy PetersonDevelopment Editor: Scholle Sawyer McFarlandProduction Editor: Danielle FosterCopyeditor: Scout FestaIndexer: Emily GlossbrennerCover Design: RHDG / Riezebos Holzbaur Design Group, Peachpit PressInterior Design: Peachpit PressLogo Design: MINE www.minesf.comNotice 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 authors 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.TrademarksVisual QuickStart Guide is a registered trademark of Peachpit Press, a division of Pearson Education. Many ofthe designations used by manufacturers and sellers to distinguish their products are claimed as trademarks.Where those designations appear in this book, and Peachpit Press was aware of a trademark claim, thedesignations 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 with nointention of infringement of the trademark. No such use, or the use of any trade name, is intended to conveyendorsement or other affiliation with this book.ISBN 13: 978-0-321-99670-1ISBN 10:0-321-99670-40987654321Printed in the United States of America

DedicationTo the memory of Bill Horwitz and Dorothy Negrino, because they loved learning.Special NoteWay back in 1997, when we were writing Chapter 1 of our first edition of this book, we weresearching for a way to make the concept of JavaScript objects clear, and found inspirationin the then-newest member of our family, our cat Pixel. Over the years since then, countlessreaders have told us how our “cat object” helped them to understand JavaScript better. Pixelbecame the mascot for many of our books. In the Fall of 2013, after a long and happy life,we lost him to old age. We miss him very much.Pixel, on his last day with us.

Special Thanks to:Big thanks to our editor Nancy Peterson;her expert touch, serenity, and compassionmade this edition a pleasant one to create.Extra-special thanks for her above-the-callunderstanding when we were faced with apersonal crisis.Thanks also go to our other editor, ScholleMcFarland, who stepped in and kept theproject on an even keel when Nancy wasoverscheduled.Thanks to Scout Festa for her skillful copyediting. Our heartfelt thanks to DanielleFoster, the book’s production editor, wholaid out the book and pulled off the jobwith grace and aplomb, and to the indexer,Emily Glossbrenner, who should bethanked for doing a thankless job.As always, we’re grateful to Peachpit’sNancy Ruenzel and Nancy Davis fortheir support.We’d like to express our special thanks toall of the high school, college, and university instructors who chose to use the previous editions of this book as a textbook fortheir classes.

Contents at a GlanceIntroduction . . . . . . . . . . . . . . . . . . . . . . . . xiiiChapter 1Getting Acquainted with JavaScript . . . . . . . . . . 1Chapter 2Start Me Up! . . . . . . . . . . . . . . . . . . . . . . . . 21Chapter 3Your First Web App . . . . . . . . . . . . . . . . . . . 49Chapter 4Working with Images . . . . . . . . . . . . . . . . . . . 81Chapter 5Windows and Frames . . . . . . . . . . . . . . . . . . 115Chapter 6Form Handling . . . . . . . . . . . . . . . . . . . . . . 133Chapter 7Forms and Regular Expressions . . . . . . . . . . . 171Chapter 8Handling Events . . . . . . . . . . . . . . . . . . . . . 193Chapter 9JavaScript and Cookies . . . . . . . . . . . . . . . . 219Chapter 10Objects and the DOM . . . . . . . . . . . . . . . . . 241Chapter 11Making Your Pages Dynamic . . . . . . . . . . . . . 261Chapter 12Applied JavaScript . . . . . . . . . . . . . . . . . . . 285Chapter 13Introducing Ajax . . . . . . . . . . . . . . . . . . . . . 325Chapter 14Toolkits, Frameworks, and Libraries . . . . . . . . 365Chapter 15Designing with jQuery . . . . . . . . . . . . . . . . . 385Chapter 16Building on jQuery . . . . . . . . . . . . . . . . . . . 411Chapter 17Scripting Mobile Devices . . . . . . . . . . . . . . . 425Chapter 18Bookmarklets . . . . . . . . . . . . . . . . . . . . . . . 441Appendix A JavaScript Genealogy and Reference . . . . . . . 469Appendix B JavaScript Reserved Words . . . . . . . . . . . . . . 491Appendix C Cascading Style Sheets Reference . . . . . . . . . 495Appendix D Where to Learn More . . . . . . . . . . . . . . . . . . 507Index . . . . . . . . . . . . . . . . . . . . . . . 515Contents at a Glance v

This page intentionally left blank

Table of ContentsIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . xiiiChapter 1Getting Acquainted with JavaScript . . . . . . . . . . 1What JavaScript Is . . . . . . . . . . . . . . . . . . . . . . . 2JavaScript Isn’t Java . . . . . . . . . . . . . . . . . . . . . . 3Where JavaScript Came From . . . . . . . . . . . . . . . . 5What JavaScript Can Do . . . . . . . . . . . . . . . . . . . 6What JavaScript Can’t Do . . . . . . . . . . . . . . . . . . . 7JavaScript and More . . . . . . . . . . . . . . . . . . . . . 8The Snap-Together Language . . . . . . . . . . . . . . . . 11Handling Events . . . . . . . . . . . . . . . . . . . . . . . .14Values and Variables . . . . . . . . . . . . . . . . . . . . . 15Writing JavaScript-Friendly HTML . . . . . . . . . . . . . 17What Tools to Use? . . . . . . . . . . . . . . . . . . . . . 20Chapter 2Start Me Up! . . . . . . . . . . . . . . . . . . . . . . . . . 21Where to Put Your Scripts . . . . . . . . . . . . . . . . . 23About Functions . . . . . . . . . . . . . . . . . . . . . . . 25Using External Scripts . . . . . . . . . . . . . . . . . . . . 26Putting Comments in Scripts . . . . . . . . . . . . . . . . 29Alerting the User . . . . . . . . . . . . . . . . . . . . . . . 31Confirming a User’s Choice . . . . . . . . . . . . . . . . .33Prompting the User . . . . . . . . . . . . . . . . . . . . . 35Redirecting the User with a Link . . . . . . . . . . . . . . 37Using JavaScript to Enhance Links . . . . . . . . . . . . 39Using Multi-Level Conditionals . . . . . . . . . . . . . . .43Handling Errors . . . . . . . . . . . . . . . . . . . . . . . 46Chapter 3Your First Web App . . . . . . . . . . . . . . . . . . . . 49Around and Around with Loops . . . . . . . . . . . . . . 50Passing a Value to a Function . . . . . . . . . . . . . . . 55Detecting Objects . . . . . . . . . . . . . . . . . . . . . . 57Working with Arrays . . . . . . . . . . . . . . . . . . . . . 59Working with Functions That Return Values . . . . . . . . 61Updating Arrays . . . . . . . . . . . . . . . . . . . . . . . 62Table of Contents vii

Using Do/While Loops . . . . . . . . . . . . . . . . . . .Calling Scripts Multiple Ways . . . . . . . . . . . . . . .Combining JavaScript and CSS . . . . . . . . . . . . . .Checking State . . . . . . . . . . . . . . . . . . . . . . . .Working with String Arrays . . . . . . . . . . . . . . . . .Chapter 46466687177Working with Images . . . . . . . . . . . . . . . . . . . 81Creating Rollovers . . . . . . . . . . . . . . . . . . . . . . 83Creating More Effective Rollovers . . . . . . . . . . . . . 85Building Three-State Rollovers . . . . . . . . . . . . . . . 91Triggering Rollovers from a Link . . . . . . . . . . . . . . 93Making Multiple Links Change a Single Rollover . . . . 96Working with Multiple Rollovers . . . . . . . . . . . . . . 99Creating Cycling Banners . . . . . . . . . . . . . . . . . 104Adding Links to Cycling Banners . . . . . . . . . . . . . 106Building Wraparound Slideshows . . . . . . . . . . . . . 108Displaying a Random Image . . . . . . . . . . . . . . . . .111Cycling Images with a Random Start . . . . . . . . . . . 113Chapter 5Windows and Frames . . . . . . . . . . . . . . . . . . 115Keeping a Page out of a Frame . . . . . . . . . . . . . . 117Setting a Target . . . . . . . . . . . . . . . . . . . . . . . 118Loading iframes with JavaScript . . . . . . . . . . . . . 120Working with iframes . . . . . . . . . . . . . . . . . . . . 122Creating Dynamic iframes . . . . . . . . . . . . . . . . . 124Sharing Functions Between Documents . . . . . . . . . 126Opening a New Window . . . . . . . . . . . . . . . . . . 128Loading Different Contents into a Window . . . . . . . . 131Chapter 6Form Handling . . . . . . . . . . . . . . . . . . . . . . . 133Select-and-Go Navigation . . . . . . . . . . . . . . . . . 135Changing Menus Dynamically . . . . . . . . . . . . . . . 140Making Fields Required . . . . . . . . . . . . . . . . . . 142Checking Fields Against Each Other . . . . . . . . . . . 147Identifying Problem Fields . . . . . . . . . . . . . . . . . 149Putting Form Validation into Action . . . . . . . . . . . . 151Working with Radio Buttons . . . . . . . . . . . . . . . . 156Setting One Field with Another . . . . . . . . . . . . . . 159Validating Zip Codes . . . . . . . . . . . . . . . . . . . . 162Validating Email Addresses . . . . . . . . . . . . . . . . 166viii Table of Contents