Prototype and script.aculo.us

431 Pages·2007·4.46 MB·English

What readers are saying about Prototype and script.aculo.us
I use Prototype and script.aculo.us all day in my work, yet I learned a
lot reading this book. I frequently dive back into it to find information
I can’t find anywhere else. This is a helpful book written by an expe-
rienced teacher that will help anybody who wants to easily add some
JavaScript features to their application.
Stéphane Akkaoui
Ruby on Rails developer, Feedback 2.0
If you are thinking about learning a JavaScript framework (or would
like your team to...), this book is a step-by-step guide to painless Pro-
totype and script.aculo.us. From the basics to advanced code, this
book is written in the cleanest style. You’ll be amazed to find out all
that JavaScript can do.
Arnaud Berthomier
Web developer, Weborama
This is a book that every Prototype and script.aculo.us developer
should have. It’s more than a referencebook; you will find everything
you need to know about these two frameworks, and you’ll learn good
JavaScript practices. I have learned great tips about script.aculo.us
and have discovered Prototype functions to make my code more con-
cise and more readable while improving performance. Thanks for this
book!
Sébastien Gruhier
Founder and CTO, Xilinus
Tired of waiting around for a page to reload, again and again? Well,
if you’re like me, you’re looking for a smart and elegant way to inject
pieces of Ajax into your application. Well, you’ll find in this book all
you need to know about Prototype and script.aculo.us. This book will
show you the best practices without forgettingthe fun!
Amir Jaballah
Technical Leader, Fastconnect
At Relevance, we use Prototype and Scriptaculous for all of our web
projects. When we train other developers, we always get the same two
questions: (1) Where can I get more information on the libraries? and
(2) Where can I learn to program JavaScript in a modern, functional
style?
Prototype and Scriptaculous answers both of these questions.
Christophe demonstrates the power and the beauty of these libraries,
and of the idiomatic JavaScript style they employ. And he doesn’t
just skim the surface—his introchapter shows more advanced Java-
Script usage than some entire books on the subject. Even after years
of using Prototype and Scripty, I learned new thingsin every chapter.
Thanks Christophe!
Stuart Halloway
CEO, Relevance, Inc.
www.thinkrelevance.com

Prototype and script.aculo.us
You Never Knew JavaScript Could Do This!
Christophe Porteneuve
The Pragmatic Bookshelf
Raleigh,NorthCarolina Dallas,Texas
Many of the designations used by manufacturers and sellers to distinguish their prod-
uctsareclaimedastrademarks.Wherethosedesignationsappearinthisbook,andThe
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
PragmaticProgrammer,PragmaticProgramming,PragmaticBookshelfandthelinkingg
devicearetrademarksofThePragmaticProgrammers,LLC.
Every precaution was taken in the preparation of this book. However, the publisher
assumesnoresponsibility for errorsor omissions,or for damagesthatmay result from
theuseofinformation(includingprogramlistings)containedherein.
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
Pragmatictitles,pleasevisitusat
http://www.pragprog.com
Copyright©2007ThePragmaticProgrammersLLC.
Allrightsreserved.
Nopartofthispublicationmaybereproduced,storedinaretrievalsystem,ortransmit-
ted, in any form, or by any means, electronic,mechanical,photocopying, recording, or
otherwise,withoutthepriorconsentofthepublisher.
PrintedintheUnitedStatesofAmerica.
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 Sorts102
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 Ergonomy220
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