Javascript awesomeness with Prototype
I’ve talked a bit about the Ajax features of Prototype in a previous post. Now I want to talk about some of the other fun things Prototype can do.
The first thing to do is add the appropriate Prototype includes to your HTML file. You can do this by downloading the latest version from http://www.prototypejs.org and hosting it yourself.
Or you can let Google do the hard work by adding this to your HTML header:
The first thing I’ll mention is how fantastic the Prototype API Documentation is. Once you’ve covered the basics, I highly recommend spending some time reading through it.
The second thing we’re going to do is set up a handler for the window onload event. You might normally do it like this <body onload=”someFunction();”> but I like the method below because it keeps all of our javascript separate from the HTML.
Event.observe(window, 'load', function() {
alert('Hello World!');
});
The basic format of Event.observe is Event.observe(<element>, ‘<event>’, <event-handling-function>)
We could just as easily have done this
function HelloWorld() {
alert('Hello World!');
}
Event.observe(window, 'load', HelloWorld);
but I generally use the first version. I think having the handling function inline makes it a little easier to read.
Now let’s talk about how easy it is to get objects out of the DOM. Here’s some HTML
Let’s set up an event handler for the click event on that submit button. We just need to add a few lines to our existing window load event handler.
Event.observe(window, 'load', function() {
Event.observe( $('dostuff'), 'click', function() {
alert('Hello World!');
});
});
As you can see, we’ve just added an Event.observe call inside the window load event handler. The key thing to note is $(‘dostuff’). The $ is essentially a shortcut to document.getElementById but it’s a lot less to type and the element you get back has loads of handy methods added to it by Prototype.
Now that we’ve seen how easy it is to use $ to get back a single object, let’s talk about dealing with multiple objects.
Here’s some more HTML
Let’s update our window load javascript code
Event.observe(window, 'load', function() {
Event.observe( $('dostuff'), 'click', function() {
$$('input[type=checkbox]').each( function(elem) {
alert(elem.id);
});
});
});
The example above shows a simple example of the $$ utility method which takes a CSS rule as an argument and returns a list of Prototype-enhanced elements.
In our example, we’re using the each method to apply a function to every item in the list returned by $$.
Here are a few more simple examples of $$:
- $$(‘input’) returns a list all input elements.
- $$(‘td.even’) returns a list of all td elements that have a class of even
- $$(‘table#stuff td’) returns a list of all td elements that are inside the table element that has an id of stuff
So those are few simple examples of using Prototype to retrieve DOM elements. I’ll come back and cover some other Prototype fun in a later post.
