cyan yelloW maGenTa Black panTone 123 c Books for professionals By professionals® The eXperT’s Voice® in WeB DeVelopmenT Companion eBook Available Practical Prototype and script.aculo.us P Dear Reader, r a JavaScript is great, Ajax is great, and who doesn’t want to create great dynamic c Practical web sites? No problem! We’ll just find a JavaScript framework to build on and t access some libraries . . . and pretty soon we’ve got a lot of new stuff to learn about. i As a core developer team member for Prototype, I’m not exactly unbiased, but I c know that we all face the same problems when it comes to creating dynamic a web content, and I wrote this book for the same reason that I contribute to the l Prototype Prototype project—there really is an easier, faster way. P Prototype and script.aculo.us are among the most popular and best supported and of all the JavaScript frameworks and libraries. You can save yourself a lot of time r o and headaches by learning to use the basic functions discussed in this book. I’m not going to waste your time talking about theory. I get right down to t o real-world examples, and you will learn by doing. You’ll be creating dynamic UIs, efficient code, and cool effects in no time. I’ll even show you how to use t script.aculo.us y Prototype and script.aculo.us as a platform. That’s when you’ll see some real p productivity enhancements. Most of all, I hope you’ll have fun reading the book and going through the e examples. I look forward to seeing all you new Prototype and script.aculo.us users a create really great web experiences that we can all admire and enjoy using. n Andrew Dupont d s c r THE APRESS ROADMAP i Web Development Pro Ajax and p Learn every major facet of Prototype and script.aculo.us Solutions Java Frameworks t Foundations of Ajax . from one of the core team developers. a Practical Prototype Pro JavaScript Techniques and script.aculo.us c Companion eBook Beginning JavaScript with DOM Scripting and Ajax Practical JavaScript, u Pro JavaScript DOM Scripting, Design Patterns l and Ajax Projects o . u See last page for details on $10 eBook version s Andrew Dupont SOURCE CODE ONLINE ISBN-13: 978-1-59059-919-8 D u www.apress.com ISBN-10: 1-59059-919-5 p 53999 o n US $39.99 t Shelve in Web Development User level: 9 781590 599198 Intermediate–Advanced this print for content only—size & color not accurate spine = 0.82" 352 page count 9195fmfinal.qxd 6/4/08 12:58 PM Page i Practical Prototype and script.aculo.us Andrew Dupont 9195fmfinal.qxd 6/4/08 12:58 PM Page ii Practical Prototype and script.aculo.us Copyright © 2008 by Andrew Dupont 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-919-8 ISBN-10 (pbk): 1-59059-919-5 ISBN-13 (electronic): 978-1-4302-0502-9 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. Lead Editors: Clay Andres, Tony Campbell, Jason Gilmore, Chris Mills Technical Reviewer: Aaron Gustafson Editorial Board: Clay Andres, Steve Anglin, Ewan Buckingham, Tony Campbell, Gary Cornell, JonathanGennick, Matthew Moodie, Joseph Ottinger, Jeffrey Pepper, Frank Pohlmann, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Project Manager: Beth Christmas CopyEditor:Damon Larson Associate Production Director: Kari Brooks-Copony Production Editor: Laura Esterman Compositor:Linda Weidemann, Wolf Creek Press Proofreader: Erin Poe Indexer: Broccoli Information Management Artist: April Milne Cover Designer: Kurt Krames Manufacturing Director: Tom Debolski Distributed to the book trade worldwide bySpringer-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 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected],or visit http://www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our SpecialBulk Sales–eBook Licensing web page at http://www.apress.com/info/bulksales. The information in this book is distributed on an “as is” basis, without warranty. Although every pre- caution has been taken in the preparation of this work, neither the author(s) nor Apress shall haveany 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. 9195fmfinal.qxd 6/4/08 12:58 PM Page iii Contents at a Glance About the Author .................................................................xiii About the Technical Reviewer ......................................................xv Acknowledgments ...............................................................xvii Introduction .....................................................................xix PART 1 n n n Prototype nCHAPTER 1 What You Should Know About Prototype,JavaScript, and the DOM ...................................................3 nCHAPTER 2 Prototype Basics ..............................................17 nCHAPTER 3 Collections (Or,Never Write a for Loop Again) ..................31 nCHAPTER 4 Ajax:Advanced Client/Server Communication ..................49 nCHAPTER 5 Events ........................................................91 nCHAPTER 6 Working with the DOM........................................113 nCHAPTER 7 Advanced JavaScript:Functional Programming and Class-Based OOP.........................................139 nCHAPTER 8 Other Helpful Things:Useful Methods on Built-Ins .............167 PART 2 n n n script.aculo.us nCHAPTER 9 What You Should Know About DHTML and script.aculo.us......193 nCHAPTER 10 Introduction to script.aculo.us Effects.........................215 nCHAPTER 11 Enabling Draggables,Droppables,and Sortables ..............257 nCHAPTER 12 Advanced Controls:Autocompleters,In-Place Editors, and Sliders...................................................277 nCHAPTER 13 Prototype As a Platform.......................................297 nINDEX .......................................................................315 iii 9195fmfinal.qxd 6/4/08 12:58 PM Page iv 9195fmfinal.qxd 6/4/08 12:58 PM Page v Contents About the Author .................................................................xiii About the Technical Reviewer ......................................................xv Acknowledgments ...............................................................xvii Introduction .....................................................................xix PART 1 n n n Prototype nCHAPTER 1 What You Should Know About Prototype, JavaScript, and the DOM....................................3 About JavaScript.................................................3 Everything Is an Object.......................................4 About the DOM...................................................8 It’s Hard to Write Multiplatform JavaScript......................8 It’s Hard to Debug Multiplatform JavaScript.....................9 About This Book..................................................9 Firefox Is Used for Nearly All Examples.........................9 First Theory,Then Practice ..................................10 About Prototype.................................................10 Prototype’sPhilosophy......................................10 Prototype’s Purpose and Scope ..............................11 Prototype’sWeb Site........................................11 Contributing to Prototype....................................11 Getting Started with Prototype................................12 Summary ......................................................16 v 9195fmfinal.qxd 6/4/08 12:58 PM Page vi vi nCONTENTS nCHAPTER 2 Prototype Basics............................................17 Getting Started..................................................17 The $ Function..................................................18 $Can Take Either Strings or Nodes...........................19 $Can Take Multiple Arguments ..............................19 $Enhances DOM Nodes with Useful Stuff......................20 Object.extend:Painless Object Merging............................21 $A:Coercing Collections into Arrays ...............................24 The arguments Variable.....................................25 DOM NodeLists.............................................25 $$:Complex Node Queries .......................................26 Summary.......................................................29 nCHAPTER 3 Collections (Or, Never Write a for Loop Again)............31 The Traditional for Loop..........................................31 Functional Programming .........................................32 Prototype’sEnumerable Object....................................34 Using Enumerable#each.....................................34 Finding Needles in Haystacks:detect,select,reject,and partition .....35 Using Enumerable#detect ...................................35 Using Enumerable#select....................................36 Using Enumerable#reject....................................36 Using Enumerable#partition..................................36 Sorting Collections:min,max,and sortBy ..........................36 Using Enumerable#min and #max ............................37 Using Enumerable#sortBy ...................................37 Advanced Enumeration:map,inject,invoke,and pluck...............38 Using Enumerable#map and Enumerable#inject................38 Using Enumerable#pluck and Enumerable#invoke..............40 Other Collections That Use Enumerable ............................41 Hash......................................................41 ObjectRange...............................................45 Turning Collections into Arrays...............................46 Using Enumerable in Your Own Collections ....................46 Summary ......................................................48 9195fmfinal.qxd 6/4/08 12:58 PM Page vii nCONTENTS vii nCHAPTER 4 Ajax: Advanced Client/Server Communication............49 Ajax Rocks .....................................................49 Ajax Sucks .....................................................50 Prototype’s Ajax Object...........................................50 Ajax.Request...............................................52 Ajax.Updater...............................................56 Ajax.PeriodicalUpdater ......................................60 Controlling the Polling.......................................60 Advanced Examples:Working with Dynamic Content.................62 Example 1:The Breakfast Log................................62 Example 2:Fantasy Football .................................74 Summary.......................................................89 nCHAPTER 5 Events........................................................91 State of the Browser (Or,How We Got Here) ........................91 Pre-DOM,Part 1............................................91 Pre-DOM,Part 2............................................92 Events:The Crash Course ........................................94 Using Event#stopPropagation,Event#preventDefault, and Event#stop..........................................99 AFurther Example.........................................101 Events and Forms..............................................102 Client-Side Validation ......................................102 Cleaning It Up.............................................107 Custom Events.................................................108 The First Custom Event.....................................109 Broadcasting Scores.......................................109 Listening for Scores........................................110 Summary......................................................111 nCHAPTER 6 Working with the DOM.....................................113 About the DOM API.............................................113 Node Genealogy................................................113 9195fmfinal.qxd 6/4/08 12:58 PM Page viii viii nCONTENTS Prototype’s DOM Extensions.....................................115 Modifying.................................................115 Traversing and Collecting...................................128 Creating Nodes............................................132 Putting It Together..............................................135 Summary......................................................137 nCHAPTER 7 Advanced JavaScript: Functional Programming and Class-Based OOP......................................139 Object-Oriented JavaScript Programming with Prototype............139 Why OOP?................................................139 Remedial OOP:Namespacing ...............................141 Advanced OOP:Using Classes...............................142 Usage:DOM Behavior Pattern...............................148 Functional Programming ........................................158 Functions Can Have Their Own Methods......................159 Using Function#curry ......................................159 Using Function#delay and Function#defer ....................161 Using Function#bind.......................................164 Summary......................................................165 nCHAPTER 8 Other Helpful Things: Useful Methods on Built-Ins......167 Using String Methods...........................................167 String Utility Methods ......................................167 The Template Class and String Interpolation ..................176 Using JSON....................................................180 What Does JSON Look Like?................................180 Why JSON?...............................................181 Serializing with Object.toJSON ..............................181 Unserializing with String#evalJSON..........................182 Overriding the Default Serialization ..........................183 Using Object Methods...........................................184 Type Sniffing with Object.isX................................184