Practical Prototype and script.aculo.us

Practical Prototype and script.aculo.us......Page 1
Contents at a Glance......Page 5
Contents......Page 7
About the Author......Page 15
About the Technical Reviewer......Page 17
Acknowledgments......Page 19
Introduction......Page 21
About JavaScript......Page 25
All Data Types Inherit from Object......Page 26
All Objects Have Prototypes......Page 27
Any Object Can Have Arbitrary Properties Set......Page 28
Even Functions Are First-Class Objects......Page 29
It’s Hard to Write Multiplatform JavaScript......Page 30
Firefox Is Used for Nearly All Examples......Page 31
Prototype’s Philosophy......Page 32
Contributing to Prototype......Page 33
Downloading Prototype......Page 34
Including Prototype......Page 35
Testing It Out......Page 36
Summary......Page 38
Getting Started......Page 39
The $ Function......Page 40
$ Can Take Multiple Arguments......Page 41
$ Enhances DOM Nodes with Useful Stuff......Page 42
Object.extend: Painless Object Merging......Page 43
$A: Coercing Collections into Arrays......Page 46
DOM NodeLists......Page 47
$$: Complex Node Queries......Page 48
Summary......Page 51
The Traditional for Loop......Page 53
Functional Programming......Page 54
Using Enumerable#each......Page 56
Using Enumerable#detect......Page 57
Sorting Collections: min, max, and sortBy......Page 58
Using Enumerable#sortBy......Page 59
Using Enumerable#map and Enumerable#inject......Page 60
Using Enumerable#pluck and Enumerable#invoke......Page 62
Objects Have No Key Safety......Page 63
The Object.prototype Problem......Page 64
The Solution......Page 65
Enumerable Methods on Hashes......Page 66
ObjectRange......Page 67
Using Enumerable in Your Own Collections......Page 68
Summary......Page 70
Ajax Rocks......Page 71
Prototype’s Ajax Object......Page 72
Ajax.Request......Page 74
Ajax.Updater......Page 78
Controlling the Polling......Page 82
Example 1: The Breakfast Log......Page 84
The Server Side......Page 85
The Client Side......Page 86
Handling Errors......Page 89
The App......Page 96
The League......Page 97
The Stats......Page 98
The Data......Page 100
The Code......Page 102
Testing It Out......Page 108
Making an Ajax Call......Page 109
Summary......Page 111
Pre-DOM, Part 1......Page 113
Pre-DOM, Part 2......Page 114
Events: The Crash Course......Page 116
Using Event#stopPropagation, Event#preventDefault, and Event#stop......Page 121
A Further Example......Page 123
Client-Side Validation......Page 124
Cleaning It Up......Page 129
Custom Events......Page 130
Broadcasting Scores......Page 131
Listening for Scores......Page 132
Summary......Page 133
Node Genealogy......Page 135
The hide, show, visible, and toggle Methods......Page 137
The addClassName, removeClassName, hasClassName, and toggleClassName Methods......Page 139
The setStyle and getStyle Methods......Page 141
The update, replace, insert, and remove Methods......Page 142
The readAttribute and writeAttribute Methods......Page 148
Navigating Nodes......Page 150
The up, down, next, and previous Methods......Page 151
The select Method......Page 153
Creating Nodes......Page 154
Putting It Together......Page 157
Summary......Page 159
Why OOP?......Page 161
Information-Hiding......Page 162
Remedial OOP: Namespacing......Page 163
Advanced OOP: Using Classes......Page 164
Example......Page 165
Usage: DOM Behavior Pattern......Page 170
Refactoring......Page 172
Testing......Page 176
Functional Programming......Page 180
Using Function#curry......Page 181
Using Function#delay and Function#defer......Page 183
Function#delay......Page 184
Function#defer......Page 185
Using Function#bind......Page 186
Summary......Page 187
The gsub, sub, and scan Methods......Page 189
The strip Method......Page 191
The stripTags, escapeHTML, and unescapeHTML Methods......Page 192
The camelize, underscore, and dasherize Methods......Page 196
The capitalize and truncate Methods......Page 197
The Template Class and String Interpolation......Page 198
Using the Template Class......Page 199
Advanced Replacement......Page 200
Bringing It Back to String#gsub......Page 201
What Does JSON Look Like?......Page 202
Serializing with Object.toJSON......Page 203
Unserializing with String#evalJSON......Page 204
Overriding the Default Serialization......Page 205
Type Sniffing with Object.isX......Page 206
The Object.isString, Object.isNumber, Object.isFunction Methods......Page 207
The Object.isArray, Object.isHash, Object.isElement Methods......Page 208
Using Type-Checking Methods in Your Own Functions......Page 209
The reverse and clear Methods......Page 210
Summary......Page 211
Introducing the CSS Box Model......Page 215
Visualizing with Block-Level Elements......Page 216
Formatting Blocks with Inline Elements......Page 217
Thinking Outside the Box: Margins, Padding, and Borders......Page 218
DHTML Properties......Page 220
Static Positioning......Page 221
Absolute Positioning......Page 222
The z-index Property......Page 224
Relative Positioning......Page 225
Offset Parents and Positioning Context......Page 227
Similarities to Prototype......Page 230
Getting Started with script.aculo.us......Page 231
Loading script.aculo.us on a Page......Page 232
Summary......Page 235
Why Effects?......Page 237
When Effects Are Good......Page 238
The Basics of Effects......Page 239
script.aculo.us Effects......Page 242
Using Effect.Morph......Page 243
How Does It Do That?......Page 244
Morphing in Parallel......Page 246
Effect.Move......Page 250
Effect.Scale......Page 252
Effect.Highlight......Page 255
Effect.ScrollTo......Page 257
Introduction to Combination Effects......Page 258
Effect.Fade and Effect.Appear......Page 259
Effect.BlindUp and Effect.BlindDown......Page 260
Effect.SlideUp and Effect.SlideDown......Page 261
Effects Are Asynchronous......Page 262
Callbacks......Page 263
Queues......Page 265
Writing the Markup......Page 266
Adding Styles......Page 269
Bringing in Help......Page 270
Bells and Whistles......Page 271
Summary......Page 277
Exploring Draggables......Page 279
Making Draggables......Page 282
The ghosting Option......Page 284
Start, End, and Revert Effects......Page 285
Making Droppables......Page 286
Using Callbacks for Droppables......Page 287
Drag-and-Drop: Useful or Tedious?......Page 291
Making Sortables......Page 292
The tag Option......Page 294
The scroll Option......Page 295
Summary......Page 297
When to Use Autocompleter......Page 299
Use Case: Suggesting Players......Page 300
Using Autocompleter......Page 301
Robust Autocompleter, the Ajax Version......Page 305
Common Options and Features......Page 307
Adding In-Place Editing Functionality......Page 309
Using Ajax.InPlaceEditor......Page 310
Making It Pretty......Page 313
Common Options and Features......Page 314
Creating a Slider......Page 315
Common Options......Page 317
Summary......Page 318
Staying DRY with Inheritance and Mixins......Page 319
Example 1: Setting Default Options......Page 321
Example 2: Keeping Track of Instances......Page 324
Solving Browser Compatibility Problems: To Sniff or Not to Sniff?......Page 327
Capabilities Support......Page 328
Quirk Example 1: Internet Explorer and Comment Nodes......Page 329
Quirk Example 2: Firefox and Ajax......Page 330
Walk a Straight Code Path......Page 331
Making and Sharing a Library......Page 332
Make Things Configurable......Page 333
Add Hooks......Page 334
Summary......Page 336
Index......Page 337