cyan yelloW maGenTa Black panTone 123 c Books for professionals By professionals® The eXperT’s Voice® in WeB DeVelopmenT Companion Author of eBook Available Practical JavaScript™, DOM Scripting, and Ajax Projects Practical Ajax Projects with Java™ Technologies (Apress) Dear Reader, Practical The JavaScript™ language, often maligned in the past, has become one of the dar- a J Practical lings of modern web development. Scarcely a day goes by when you don’t hear n about some new, uber-cool web application that showcases all that JavaScript a d can do, and developers and users alike have realized its full power and potential. v Although there are different ways to show how to harness all this power, full- A a blown examples are what many developers prefer, and that’s precisely what this j JavaScript, book provides. Introductory articles with contrived examples are common- aS ™ place on the Web and elsewhere. It’s far less common to find well-explained, xc real-world, complete applications that you can tear apart and put back together to really grasp what’s going on. I wrote this book to fill that gap, providing ten r P full, working JavaScript applications that you can learn from by building them i p up, seeing how all the pieces fit together, and modifying them for your own r DOM Scripting, needs. Among them are: ot ,™ • A mashup utilizing Yahoo! and Google web services j e • A drag-and-drop shopping cart application D • A contact manager with some neat GUI widgets c • A custom support chat system employing Ajax techniques O t • A fully extensible calculator sM Ajax Projects • A full-fledged arcade-style video game! By the time you finish this book, you will be well versed in a number of top- and ics, including object-oriented JavaScript, Ajax, web services, CSS, DOM script- S ing, XML, JSON, Dojo, Rico, script.aculo.us, Prototype, Mootools, and more. c I truly believe that if you are a programmer who learns best by looking at real code and playing with it, this book will serve you very well indeed. See you inside. r i Frank W. Zammetti p SJCP, MCSD, MCP, CNA, CIW Associate t i n Learn advanced JavaScript™ techniques by Companion eBook THE APRESS ROADMAP g example to build superior web applications Pro Ajax and the .NET 2.0 Platform , Beginning XML with DOM and Ajax Practical JavaScript™, Pro JavaScript™ DOM Scripting, Techniques See last page for details Beginning JavaScript™ with and Ajax Projects on $10 eBook version DOM Scripting and Ajax Ajax and REST Recipes Z a Frank W. Zammetti SOURCE CODE ONLINE ISBN-13: 978-1-59059-816-0 m www.apress.com ISBN-10: 1-59059-816-4 m 54499 e t t US $44.99 i Shelve in Web Development User level: 9 781590 598160 Intermediate–Advanced this print for content only—size & color not accurate spine = 1.087" 576 page count Zammetti-816-4FRONT.fm Page i Saturday, March 17, 2007 1:17 PM Practical JavaScript , ™ DOM Scripting, and Ajax Projects ■ ■ ■ Frank W. Zammetti Zammetti-816-4FRONT.fm Page ii Saturday, March 17, 2007 1:17 PM Practical JavaScript™, DOM Scripting, and Ajax Projects Copyright © 2007 by Frank W. Zammetti All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-59059-816-0 ISBN-10 (pbk): 1-59059-816-4 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc., in the United States and other countries. Apress, Inc., is not affiliated with Sun Microsystems, Inc., and this book was written without endorsement from Sun Microsystems, Inc. Lead Editor: Matthew Moodie Technical Reviewer: Herman van Rosmalen Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick, Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Jeff Pepper, Paul Sarknas, Dominic Shakeshaft, Jim Sumser, Matt Wade Project Manager: Tracy Brown Collins Copy Edit Manager: Nicole Flores Copy Editor: Marilyn Smith Assistant Production Director: Kari Brooks-Copony Production Editor: Laura Esterman Compositor: Susan Glinert Proofreaders: Lori Bring and April Eddy Indexer: Broccoli Information Management Cover Designer: Kurt Krames Manufacturing Director: Tom Debolski Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected], or visit http://www.springeronline.com. For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected], or visit http://www.apress.com. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is available to readers at http://www.apress.com in the Source Code/Download section. Zammetti-816-4FRONT.fm Page iii Saturday, March 17, 2007 1:17 PM Dedicated to all the animals I’ve eaten over the years, without whom I most certainly would have died a long time ago due to starvation. Well, I suppose I could have been a vegan, but then I’d have to dedicate this to all the plants I’ve eaten, and that would just be silly because very few plants can read. To all my childhood friends who provided me with cool stories to tell: Joe, Thad, Meenie, Kenny, Franny, Tubby, Stubby, Kenway, JD, dVoot, Corey, and Francine. To Denny Crane, for raising awareness of Mad Cow disease. Hmm, who am I forgetting? Oh yeah, and to my wife and kids. You guys make life worth living. Zammetti-816-4FRONT.fm Page iv Saturday, March 17, 2007 1:17 PM Zammetti-816-4FRONT.fm Page v Saturday, March 17, 2007 1:17 PM Contents at a Glance About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii About the Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xix Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xxi Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xxiii PART 1 Say Hello to My Little Friend: ■ ■ ■ JavaScript! ■ CHAPTER 1 A Brief History of JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 ■ CHAPTER 2 The Seven Habits of Highly Successful JavaScript Developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 PART 2 The Projects ■ ■ ■ ■ CHAPTER 3 Hodgepodge: Building an Extensible JavaScript Library . . . . . . . . 71 ■ CHAPTER 4 CalcTron 3000: A JavaScript Calculator . . . . . . . . . . . . . . . . . . . . . . 107 ■ CHAPTER 5 Doing the Monster Mash: A Mashup . . . . . . . . . . . . . . . . . . . . . . . . . 147 ■ CHAPTER 6 Don’t Just Live in the Moment: Client-Side Persistence . . . . . . . 185 ■ CHAPTER 7 JSDigester: Taking the Pain Out of Client-Side XML . . . . . . . . . . . 231 ■ CHAPTER 8 Get It Right, Bub: A JavaScript Validation Framework . . . . . . . . . 261 ■ CHAPTER 9 Widget Mania: Using a GUI Widget Framework . . . . . . . . . . . . . . . 305 ■ CHAPTER 10 Shopping in Style: A Drag-and-Drop Shopping Cart . . . . . . . . . . . 351 ■ CHAPTER 11 Time for a Break: A JavaScript Game . . . . . . . . . . . . . . . . . . . . . . . . 403 ■ CHAPTER 12 Ajax: Where the Client and Server Collide . . . . . . . . . . . . . . . . . . . . 465 ■ INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525 v ae1c89095f95abda90126f30663a4984 Zammetti-816-4FRONT.fm Page vi Saturday, March 17, 2007 1:17 PM Zammetti-816-4FRONT.fm Page vii Saturday, March 17, 2007 1:17 PM Contents About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii About the Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xix Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xxi Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xxiii PART 1 Say Hello to My Little Friend: ■ ■ ■ JavaScript! ■ CHAPTER 1 A Brief History of JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 How JavaScript Came to Exist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 The Evolution of JavaScript: Teething Pains . . . . . . . . . . . . . . . . . . . . . . . . 6 But It’s the Same Code: Browser Incompatibilities. . . . . . . . . . . . . . . 6 Of Snails and Elephants: JavaScript Performance and Memory Issues. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 The Root of All Evil: Developers!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 DHTML—The Devil’s Buzzword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 The Evolution Continues: Approaching Usability . . . . . . . . . . . . . . . . . . . . 18 Building a Better Widget: Code Structure . . . . . . . . . . . . . . . . . . . . . 19 Relearning Good Habits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 The Final Evolution: Professional JavaScript at Last! . . . . . . . . . . . . . . . . 21 The Browsers Come Around . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Object-Oriented JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 “Responsible” JavaScript: Signs and Portents . . . . . . . . . . . . . . . . . 26 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 vii Zammetti-816-4FRONT.fm Page viii Saturday, March 17, 2007 1:17 PM viii ■ CONTENTS ■ CHAPTER 2 The Seven Habits of Highly Successful JavaScript Developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 More on Object-Oriented JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Simple Object Creation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Object Creation with JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Class Definition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Which Approach Should You Use? . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Benefits of Object-Orientation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Graceful Degradation and Unobtrusive JavaScript . . . . . . . . . . . . . . . . . . 35 Keep JavaScript Separate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Allow Graceful Degradation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Don’t Use Browser-Sniffing Routines. . . . . . . . . . . . . . . . . . . . . . . . . 39 Don’t Create Browser-Specific or Dialect-Specific JavaScript . . . . 40 Properly Scope Variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Don’t Use Mouse Events to Trigger Required Events. . . . . . . . . . . . 41 It’s Not All Just for Show: Accessibility Concerns . . . . . . . . . . . . . . . . . . . 42 When Life Gives You Grapes, Make Wine: Error Handling . . . . . . . . . . . . 43 When It Doesn’t Go Quite Right: Debugging Techniques . . . . . . . . . . . . . 46 Browser Extensions That Make Life Better . . . . . . . . . . . . . . . . . . . . . . . . 49 Firefox Extensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 IE Extensions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Maxthon Extension: DevArt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 JavaScript Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Java Web Parts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Script.aculo.us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Yahoo! User Interface Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 MochiKit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Rico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Mootools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Zammetti-816-4FRONT.fm Page ix Saturday, March 17, 2007 1:17 PM ■ CONTENTS ix PART 2 The Projects ■ ■ ■ ■ CHAPTER 3 Hodgepodge: Building an Extensible JavaScript Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Bill the n00b Starts the Day . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Overall Code Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Creating the Packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Building the jscript.array Package . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Building the jscript.browser Package. . . . . . . . . . . . . . . . . . . . . . . . . 78 Building the jscript.datetime Package . . . . . . . . . . . . . . . . . . . . . . . . 78 Building the jscript.debug Package . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Building the jscript.dom Package. . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Building the jscript.form Package. . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Building the jscript.lang Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Building the jscript.math Package . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Building the jscript.page Package . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Building the jscript.storage Package . . . . . . . . . . . . . . . . . . . . . . . . . 94 Building the jscript.string Package. . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Testing All the Pieces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 ■ CHAPTER 4 CalcTron 3000: A JavaScript Calculator . . . . . . . . . . . . . . . . . 107 Calculator Project Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . 107 A Preview of CalcTron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Rico Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Dissecting the CalcTron Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Writing calctron.htm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Writing styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Writing CalcTron.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Writing Classloader.htm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Writing Mode.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Writing Standard.json and Standard.js. . . . . . . . . . . . . . . . . . . . . . . 131 Writing BaseCalc.json and BaseCalc.js . . . . . . . . . . . . . . . . . . . . . . 140 Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146