Prototype's Shortcuts
Prototype is a wonderful javascript library written by Sam Stephenson.
The more I use it, the more I love it, it makes writting javascript so less painful.
This post is the first of a series aiming to discover its
features.
So let’s start with the lovely shortcuts provided by Prototype.
Shortcuts are functions whose names are as concise as possible, mostly 1 or 2 letters and wrap some of the most repetitive tasks you end up to write when doing javascript.
- The
$()
function :
This little gem is a shortcut to the overuseddocument.getElementById()
of the DOM. So just like the DOM method,$()
returns the element that has the id passed as arguments.
But it extended it as well by letting you passed more than one id and$()
returns you anArray
object containing all the requested elements. Another interesting functionality is that you can pass it either a string or the element itself.
var myElement = $('content');
// myElement contains the element with id 'content'
var myElements = $('content', 'content1', 'content2');
// myElements is an Array containing elements with ids 'content', 'content1' and 'content2'
- The
$F()
function :
This other little function is a shortcut to get the value of any field input control such as text boxes or drop-down lists. As with$()
, it is possible to pass either the element id as string or the element itself.
var firstname = $F('firstName');
// firstname now contains the value of the input field with 'firstName' as id
- The
$A()
function :
This function turns the single parameters it receives into anArray
object. Even if it seems a little strange at first glance, this function combined with Prototype extensions to theArray
object allows extremely powerful operations.
function myFunction() {
// Let's make an Array from arguments passed to function
var options = $A(arguments);
while ( options.length > 0 ) {
alert( options.shift() );
}
}
myFunction('Hello', 'there', "How's going ?");
- The
$H()
function :
This function turns any associative array into an enumerableHash
. One more time add this little function with additions toHash
from Prototype and you’ll soon discover another great feature of the library.
function turnIntoQueryString( params ) {
var hashParams = $H(params);
alert( hashParams.toQueryString() );
}
var a = [];
a['firstname'] = 'Jonathan';
a['lastname'] = 'Tron';
a['subscribe'] = 1;
turnIntoQueryString(a);
// Display : firstname=Jonathan&lastname=Tron&subscribe=1
- The
$R()
function :
This function is a little more tied to Prototype than previous ones. It’s a shortcut to the expressionnew ObjectRange(start, ends, excludeBounds)
. I will discuss theObjectRange
object in another post.
// Let's create an ObjectRange going from 10 to 30 and including those bounds
var myRange = $R(10, 30, false);
// Now we can for exemple iterate through values with iterator functionality provided by Prototype
myRange.each( function(value, index) {
alert(value);
});
// Or check if our lovely user enter a good value about his house's loan duration.
myRange.include( $F('loanLength') );
Try.these()
function :
This function let you ‘try’ any number of functions calls, returning the value from the one which works.
This is convenient to handle differences between browsers DOM implementations.
// This function is a convenient way to get an XMLHttpRequest Object
// Whatever browser executes the script
function getAjaxTransport() {
return Try.these(
function() {return new ActiveXObject('Msxml2.XMLHTTP')},
function() {return new ActiveXObject('Microsoft.XMLHTTP')},
function() {return new XMLHttpRequest()}
) || false;
}
The previous shortcuts are included into current stable release 1.4.0… The next one is only available in the trunk version (aka 1.5.0pre).
$$()
function :
This shiny new function is a shortcut to select some elements with a CSS-like syntax,
just like the Behaviour Javascript Library does with its selectors.
// Following exemple taken from Prototype Changelog
// Find all <img> elements inside <p> elements with class "summary",
// all inside the <div> with id "page". Hide each matched <img> tag.
$$('div#page p.summary img').each(function(e) {
e.hide();
});
So here it is for the first post about Prototype.
Feel free to correct any of my mistakes.
Fri, 20 Jan 2006 11:17 Posted in Javascript
2 comments »
-
By Justin Turner 13/08/2007 at 00h05
-
By lomakin 14/10/2008 at 14h12
Thank you. Very useful! :-)
Excellent list. Thanks!