A Brand New Prototype
With all the chaos over separation of style (CSS) and content (XHTML) as being pushed by luminary bodies such as the The Web Standards Project finally dying down, and AJAX appearing as one of the new standards in web development, Javascript is getting a chance to paint itself a new responsible image. No longer relegated to drifting 'DHTML' snowflakes over holiday periods, it now has some actively developed and highly useful libraries to make the 'net better for the people using it.
All recently used on a large project here at Made, the 'Javascript Trinity' of libraries makes javascript a joy to code:
- Prototype, the workhorse of the tree, extends the default Javascript functionality available in browsers to provide a standardised and well-structured base for further Javascript development.
- Built on top of Prototype, script.aculo.us provides effects, drag-and-drop events, sliders and AJAX update-in place fields amongst its many features. Accessible controls exist to make data entry easy (and sometimes even fun), stop relying on a page full of nothing but text boxes.
- When AJAX was coined, a lot of people dropped the only-recently-celebrated notion of clean markup and and started dumping Javascript into the middle of their otherwise-lovely XHTML. Behavior solves this problem by using CSS-style selectors for attaching events to certain elements.
Prototype is rapidly approaching a new release, adding some brand new features:
Extending elements
One of Prototype's new features is the ability to add additional methods to XHTML element objects. While this has been possible in some circumstances by extending the prototype of an object, the new Element.extend functionality can add methods to individual objects. Whats more, it automatically happens when you call...
... the $() and $$() functions
Handy functions, especially because of their terseness. The $() function in its normal use is mere shorthand for the oft-used and oft-misspelled getElementById() function, but supplied with multile parameters it will return an array of the elements with those ids. Now it will even extend each one.
The $$() is an even more flexible beast, returning all elements for a CSS selector *and* extending them. Powerful stuff, for example:
$$('div#main img.photos').each().hide() // Would hide all photos within the 'main' container elementOthers
Many other functions exist in prototype or will appear in the next version to make our lives easier and the users' lives better. The $F() function to get the value of any form field, an each() method for ruby-style loops, $R() for creating iteratable-ranges between specified bounds, all exciting additions to a language on the up.
Leave a Reply