Prototype Times functionality

The Prototype JavaScript library is a rich library that offers up solutions to many different issues that occur when you develop web sites & solutions that need to be cross browser. At the same time is offers up simpler functions that save coding time and effort.

For example the $() function that wraps the document.getElementById, the purpose served is the same but it’s easier to type $(‘myElement’), this in itself isn’t so amazing and obviously the only gain is that you type less right?… Wrong! the $() function adds more functionality. The dom’s document.getElementById method only allows a single call, you can’t pass more than one argument, with $() you can and you’ll get an array back with all the requested elements. One thing to note is that whether you pass a string or an element is as the argument, the output is the same.

That wasn’t really the reason for this post. What I wanted to post about was an interesting function I found in prototype. Consider the following JavaScript:

function createDivs(count) {
(count).times(function(index){
var divId = ‘div’ + tally;
var newDiv = Builder.node(‘div’, {id:divId, className:’default’}, ‘This is Div ‘ + tally);
document.getElementsByTagName(‘body’)[0].appendChild(newDiv);
new Draggable(divId, {revert:false});
tally++;
});
}

It’s not pretty and serves no real purpose except that it creates a set of Divs, how many is up to the value passed in. Tally is a global variable that serves to increment a value so that each div gets a unique Id.
The divs are all draggable, and this is achieved simply by using the Script.aculo.us Draggable class passing in the Div Id and setting revert to false so that it remains at the point where the mouse was released.

What you should have noticed by now though is the lack of any common iterator. In this sample I used the times function from the Prototype library, this is handy as it takes care of the iterating for me.
The format for using this is as follows:
(n).times(function(index){ });
where n is the number of times the function(index){ } will be called. index is always passed in so you can use this if needed to vary the code path inside the function maybe.

a very very simple example for you to get up and running with would be:

function runHello() {
(4).times(function(index){
if (index == 3) {
alert(“what’s going on here then”);
}
else {
alert(“Hello”);
}
});
}

Run that off of a button click and you should get a classic line from a UK Bobby in a succession of alerts.

I’m not sure what possible applications are for this functionality, I guess there must be some and I’m sure I’ll find a use for it. If you have used it I’d be interested in hearing how, assuming it’s no trade secret or likely to get you fired for leaking information from your company 😉

Coffee of the day: Elephant ear, caffeine index: 10/10 – This one’s a hummer!!!!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: