javascript kung fu

We've formed a user experience (UX) team at my client site. We're employing an iterative design process that involves a lot of prototyping, both low-fi and high-fi. In doing high-fi prototypes, I've found several new JavaScript libraries to be invaluable.

Yahoo! User Interface Library
Offers support for animation, connection management (AJAX), DOM traversal, Drag'n'Drop, and event management. The event management is really nice. If you try to attach an event handler to an element before the page is finished loading, the YUI Event API will store off the handler and defer its assignment until the page load is complete. Cool! The Drag'n'Drop API is also particularly awesome. I'm using it in one of my prototypes to create draggable content boxes (not unlikely Google's personalized home page).

JQuery
Some people use JQuery for its animation capabilities (pop-down/slide-down effects and transitions), but I use it more for its DOM traversal capabilities. JQuery allows you to select elements using syntaxes that resemble CSS selectors and XPath (yes, XPath!). For example, if you're looking for the child of a node 'A' that has a class called 'X', you'd normally have to get an element reference to the node and then iterate through its children using a for loop. With JQuery, this could be written more tersely as:

$("#A").find(".X")

This returns a list of all the elements that match. To grab the first, you'd just invoke .get(0).


I've started playing around with script.aculo.us, moo.fx, and Prototype too. We'll see what treasures those yield.

Side note: Anyone know if there's any documentation on Prototype? I haven't seen any.