Practical Prototype and script.aculo.us (Expert's Voice in Web Development)

As a JavaScript developer, you will already be aware of some of the time saving, convenience, and functionality provided to you by JavaScript/Ajax libraries in general. Prototype (www.prototypejs.org) and its sister effects library, script.aculo.us (http://script.aculo.us/), are among the most popular and best–supported JavaScript libraries, and now Prototype Core dev team member Andrew Dupont has written this book to provide you with an essential guide to getting the most out of using Prototype and script.aculo.us. Practical Prototype and script.aculo.us will help you leverage the Prototype and script.aculo.us libraries to enhance your day–to–day work, speeding up mundane tasks and providing advanced UI effects in a way that is cross–browser compliant—taking many worries off your shoulders. Take a whirlwind tour of the different time–saving functions and features Prototype provides and how it extends the basic JavaScript objects, including events, Ajax techniques, DOM elements, enumerables, and advanced OOP. Understand how script.aculo.us fits into the wider world of DOM Scripting/DHTML; find out how to use it to enhance your UIs quickly and effectively, with UI controls, effects, and drag and drop; and discover Prototype and script.aculo.us as a platform. The author avoids needless theory and rhetoric throughout the book, moving you through the topics at a fast pace. He incorporates several real–world examples to help you gain valuable practical experience as you learn. Practical Prototype and script.aculo.us is completely up to date and features server–side examples written in PHP that show the framework can be used effectively in more environments than just Ruby on Rails. Master all the convenience functions of Prototype to speed up your JavaScript/Ajax development. Leverage script.aculo.us to turbo charge your dynamic UIs. Learn from JavaScript expert Andrew Dupont, one of the Prototype Core team members. What you’ll learn How to use all of the basic timesaving/convenience functions of Prototype How to use enumberables to speed up looping, arrays, etc. How to enhance your Ajax applications with Prototype How Prototype makes working with events and DOM elements a cinch How script.aculo.us fits into DOM Scripting/DHTML How to make use of the basic effects available in script.aculo.us Mastery of UI controls and drag and drop in script.aculo.us How to treat Prototype and script.aculo.us as a platform How to use Prototype and script.aculo.us effectively with PHP and other server–side setups besides Ruby on Rails Who is this book for? This book is for any JavaScript developer who wants to employ Prototype/script.aculo.us in his or her day–to–day work. About the Apress Practical Series The Practical series from Apress is your best choice for getting the job done, period. From professional to expert, this series lets you apply project–motivated templates (or frameworks) step by step in a very direct, practical, and efficient manner toward current real–world projects that may be sitting on your desk. So whatever your career goal, Apress can be your trusted guide to take you where you want to go on your IT career empowerment path. Related Titles from Apress Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional Pro JavaScript Techniques Pro DOM Scripting with Ajax, APIs, and Libraries AdvancED DOM Scripting: Dynamic Web Design Techniques 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 As a JavaScript developer, you will already be aware of some of the time saving, convenience, and functionality provided to you by JavaScript/Ajax libraries in general. Prototype and its sister effects library, script.aculo.us, are among the most popular and best-supported JavaScript libraries, and now Prototype Core team member Andrew Dupont has written this book to provide you with an essential guide to getting the most out of using Prototype and script.aculo.us. Practical Prototype and script.aculo.us will help you leverage the Prototype and script.aculo.us libraries to enhance your day-to-day work, speeding up mundane tasks and providing advanced user interface effects in a way that is cross-browser compliant--taking many worries off your shoulders. Take a whirlwind tour of the different time-saving functions and features Prototype provides and how it extends the basic JavaScript objects, including events, Ajax techniques, DOM elements, enumerables, and advanced object-oriented programming. Understand how script.aculo.us fits into the wider world of DOM Scripting/DHTML; find out how to use it to enhance your user interfaces quickly and effectively, with UI controls, effects, and drag and drop; and discover Prototype and script.aculo.us as a platform. The author avoids needless theory and rhetoric throughout the book, moving you through the topics at a fast pace. He incorporates several real-world examples to help you gain valuable practical experience as you learn. Practical Prototype and script.aculo.us is completely up to date and features server-side examples written in PHP that show the framework can be used effectively in more environments than just Ruby on Rails. Master all the convenience functions of Prototype to speed up your JavaScript/Ajax development Leverage script.aculo.us to turbo charge your dynamic UIs Learn from JavaScript expert Andrew Dupont, one of the Prototype Core team members In this book, Prototype Core development team member Andrew Dupont provides you with an essential guide to getting the most out of using Prototype and script.aculo.us. He will help you leverage these popular and well-supported JavaScript libraries to enhance your day-to-day work, speeding up mundane tasks and providing advanced UI effects in a way that is cross-browser compliant. The book examines the different time-saving functions and features Prototype provides and covers how it extends the basic JavaScript objects, including events, Ajax techniques, DOM elements, enumerables, and advanced OOP.