Prototype and Script.Aculo.Us You Never Knew Javascript Could Do This!
Total Page：16
File Type：pdf, Size：1020Kb
Prototype and script.aculo.us You Never Knew JavaScript Could Do This! Christophe Porteneuve The Pragmatic Bookshelf Raleigh, North Carolina Dallas, Texas Many of the designations used by manufacturers and sellers to distinguish their prod- ucts are claimed as trademarks. Where those designations appear in this book, and The Pragmatic Programmers, LLC was aware of a trademark claim, the designations have been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer, Pragmatic Programming, Pragmatic Bookshelf and the linking g device are trademarks of The Pragmatic Programmers, LLC. Every precaution was taken in the preparation of this book. However, the publisher assumes no responsibility for errors or omissions, or for damages that may result from the use of information (including program listings) contained herein. Our Pragmatic courses, workshops, and other products can help you and your team create better software and have more fun. For more information, as well as the latest Pragmatic titles, please visit us at http://www.pragprog.com Copyright © 2007 The Pragmatic Programmers LLC. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmit- ted, in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior consent of the publisher. Printed in the United States of America. ISBN-10: 1-934356-01-8 ISBN-13: 978-1-934356-01-2 To Élodie, my love, ever supportive. You’re my true home. Contents Preface 13 1 Introduction 15 1.1 It’s About Time ........................ 15 1.2 What’s in This Book, and How Is It Organized? . 17 1.3 Acknowledgments ...................... 18 I Prototype 20 2 Discovering Prototype 21 2.1 What Is Prototype, and What Is It Not? .......... 21 2.2 Using Prototype in Our Project ............... 22 2.3 What Does Our JavaScript Look Like When Using Prototype? 22 2.4 Prototype Jargon and Concepts .............. 37 2.5 What Are Prototypes Anyway? ............... 39 2.6 Running Prototype Code Samples in This Book . 41 3 Quick Help with the Dollars 42 3.1 Shortcuts Should Be Short ................. 42 3.2 Quick Fetching of Smart Elements with $ . 42 3.3 $w, Because Array Literals Are Boring .......... 44 3.4 $$ Searches with Style ................... 45 3.5 $A, the Collection Unifier .................. 47 3.6 $F Is a Field Expert ..................... 49 3.7 $H Makes a Hash of Things ................. 50 3.8 Handling Ranges with $R .................. 50 4 Regular JavaScript on Steroids 52 4.1 Generic Object Manipulation ................ 52 4.2 Proper Function Binding .................. 58 4.3 Your Functions Actually Know More Tricks . 62 4.4 Numbers ............................ 65 CONTENTS 9 4.5 Strings ............................. 68 4.6 Arrays ............................. 76 4.7 Full-Spectrum JSON Support ............... 82 5 Advanced Collections with Enumerable 88 5.1 The Core Method: Iterating with each ........... 88 5.2 Getting General Information About Our Collection . 91 5.3 Finding Elements and Applying Filters .......... 93 5.4 Grouping Elements and Pasting Collections Together . 95 5.5 Computing a Derived Collection or Value ......... 99 5.6 Order Now: Getting Extreme Values and Using Custom Sorts 102 5.7 Turning Our Collection into an Array or Debugging String104 5.8 Enumerable Is Actually a Module ............. 104 6 Unified Event Handling 108 6.1 Event .............................. 108 6.2 The Events Hall of Fame .................. 125 6.3 Reacting to Form-Related Content Changes . 127 7 Playing with the DOM Is Finally Fun! 130 7.1 Extending DOM Elements .................. 130 7.2 Element, Your New Best Friend .............. 132 7.3 Selector ............................ 167 7.4 Debugging Our DOM-Related Code ............ 168 8 Form Management 173 8.1 Toward a Better User Interface ............... 173 8.2 Looking at Form Fields ................... 177 8.3 Submitting Forms Through Ajax .............. 178 8.4 Keeping an Eye on Forms and Fields ........... 183 9 Ajax Has Never Been So Easy 186 9.1 Before We Start. ...................... 186 9.2 Hitting the Road: Ajax.Request ............... 192 9.3 Streamlining: Ajax.Updater ................. 208 9.4 Polling: Ajax.PeriodicalUpdater ............... 215 9.5 Monitoring Ajax Activity: Ajax.Responders ........ 219 9.6 Debugging Ajax ........................ 219 9.7 Ajax Considered Harmful? Thinking About Accessibility and Ergonomy 220 CONTENTS 10 10 More Useful Helper Objects 225 10.1 Storing Values in a Hash .................. 225 10.2 Expressing Ranges of. Well, Anything You Want! . 230 10.3 Periodical Execution Without Risk of Reentrance . 231 10.4 Templating Made Easy ................... 233 10.5 Examining the Current Browser and Prototype Library . 236 11 Performance Considerations 241 11.1 Element Extension and the $ Function .......... 241 11.2 Iterations vs. Regular Loops ................ 242 11.3 Obsolete Event Handlers .................. 243 11.4 Recent Speed Boosts You Should Know About . 243 11.5 Small Is Beautiful ...................... 244 12 Wrapping Up 245 12.1 Building a Fancy Task List ................. 245 12.2 Laying the Groundwork ................... 246 12.3 It Takes Only 40 Lines: The JavaScript Code . 248 II script.aculo.us 252 13 Discovering script.aculo.us 253 13.1 The Modules of script.aculo.us ............... 253 13.2 Using script.aculo.us in Your Pages ............ 255 14 Visual Effects 257 14.1 What Are Those Effects, and Why Should We Use Them? 257 14.2 Core Effects .......................... 259 14.3 Diving into Effects ...................... 265 14.4 Combined Effects ....................... 269 14.5 Unlocking the Cool Factor: Effect Queues ........ 272 14.6 Effect Helpers ......................... 274 14.7 How to Create Our Own Effects .............. 276 15 Drag and Drop 283 15.1 Dragging Stuff Around .................... 283 15.2 Controlling How It Starts, Where It Goes, & How It Ends 289 15.3 Ghosting ............................ 297 15.4 Dragging and Scrolling ................... 298 15.5 Monitoring Drags ....................... 301 15.6 Dropping Stuff ........................ 301 CONTENTS 11 15.7 Customizing Drop Behavior ................. 302 15.8 Sorting with Drag and Drop ................ 307 15.9 Common Pitfalls ....................... 319 16 Autocompletion 323 16.1 The Basics ........................... 323 16.2 Local Autocompletion .................... 325 16.3 Getting Ajaxy ......................... 330 16.4 Using Rich-Markup Choices ................ 334 16.5 Autocompleting Multiple Values in One Field . 335 16.6 Reacting to Completion with Callbacks .......... 339 17 Building DOM Fragments the Easy Way: Builder 343 17.1 Building Explicitly ...................... 344 17.2 Using an (X)HTML Representation ............. 347 18 In-Place Editing 349 18.1 What’s In-Place Editing Exactly? .............. 349 18.2 A Simple Example ...................... 352 18.3 How Can We Tweak the Ajax Persistence? ........ 354 18.4 Customizing the Appearance ................ 355 18.5 Dealing with Multiple Lines ................. 363 18.6 Editing Alternative Text ................... 364 18.7 Disabling In-Place Editing .................. 367 18.8 Offering a List of Values Instead of Text Typing . 368 19 Sliders 373 19.1 Creating a Simple Slider ................... 374 19.2 Customizing the Basics ................... 376 19.3 Restricting Range or Allowed Values ............ 378 19.4 Tweaking an Existing Slider and Adding Controls . 381 19.5 Defining Multiple Values .................. 381 20 Sound Without Flash 386 20.1 Where Does It Work? ..................... 386 20.2 How Do We Play Sounds? .................. 387 20.3 Playing Multiple Sounds on Multiple Tracks . 387 A Extending and Contributing 391 A.1 Building Over: Classes, Inheritance, and DOM Extension 391 A.2 Contributing! ......................... 398 CONTENTS 12 B Further Reading 411 B.1 Official Websites ....................... 411 B.2 Useful Blogs by Prototype Core Members ......... 411 B.3 JavaScript Masters ...................... 412 B.4 Community and New Sites Around Ajax ......... 413 B.5 ECMAScript Intimacy .................... 413 B.6 Bibliography ......................... 413 C Installing and Using Ruby 414 C.1 On Windows .......................... 415 C.2 On Linux ........................... 415 C.3 On Mac OS X ......................... 416 C.4 Running a Ruby Script ................... 416 C.5 “But I Don’t Know a Thing About Ruby!” ......... 417 Index 418 Preface Prototype began its life in early 2005 at a time when the name “Java- Script” still evoked images of pop-up ads, blinking text, and copied- and-pasted <script> tags in most developers’ minds. Even though web applications such as Gmail and Google Suggest were showing the world that JavaScript (and this new thing called “Ajax”) could actually be used to improve the user experience, implementing these new techniques in your own apps proved to be painful and frustrating. Each web browser had its own quirks to work around, and most existing code wasn’t designed to take advantage of JavaScript’s object-oriented nature or powerful closure capabilities. Inspired by the expressiveness of dynamic languages such as Ruby, we set out to build a browser programming environment that we could actually look forward to using. We started with a small set of tools that let us work with classes and functions. Then we extracted common Ajax and DOM manipulation operations from our existing