Handling Forms, Events and More with the Prototype JavaScript Library - Iterator functions and event observers
(Page 2 of 5 )
As I explained in the introduction, Prototype allows us to work easily with iterator functions. This concept can be applied to any traversable structure, including (x)HTML collections and array objects. However, if you take the time to consult the official documentation, you'll see that array objects expose an impressive set of functions which let you perform all sort of clever things, such as searching for and finding array elements, filtering them, converting arrays to strings, and so forth.
In this specific case, I'm going to show you only a basic example of how to use the "find()" function. This will give you a clear idea of how to use iterator functions.
Having said that, take a look at the following code sample. It demonstrates how to find a specific DIV element via its corresponding ID attribute. Here's the example in question:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example searching an element of an array with 'find()' function</title>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// example searching an array element with 'find()' function
function findDivId(id){
var divs=$A(document.getElementsByTagName('div'));
var divobj=divs.find(function(div){return(div.id==id)});
alert(divobj.id);
}
window.onload=function(){
if(document.getElementById && document.createElement &&
document.getElementsByTagName){
var btn=$('testbutton');
if(!btn){return};
btn.onclick=function(){
findDivId('divb');
}
}
}
</script>
</head>
<body>
<div id="diva">
<p>This is a sample paragraph, which is wrapped by the first
DIV</p>
</div>
<div id="divb">
<p>This is a sample paragraph, which is wrapped by the
second DIV</p>
</div>
<div id="divc">
<p>This is a sample paragraph, which is wrapped by the third
DIV</p>
</div>
<input type="button" value="Show function result"
id="testbutton" />
</body>
</html>
As shown above, the brand new "find()" function is used here to find a DIV element within a sample web document, which is identified as "divb," in this way applying the concept of "iterator function." With reference to the previous example, you should also notice how all the respective DIVs are first converted into an array object via the $A function before being processed via "find()." Quite simple, right?
So far, so good. At this stage you hopefully grasped the logic that stands behind the concept of iterator function. Bearing in mind this, let's move forward and see how to use the Prototype library to work with events.
Speaking more specifically, you can utilize the helpful "Event.observe()" method to assign a concrete event to one element of a web page, and at the same time, specify a callback function to be invoked either in the capture or the bubble phase.
The following example shows how to assign an "onclick" handler to all the DIVs contained into a sample web document by using the "Event,observe()" method. Take a look at the code listing, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example using the Event object and 'observe()'
method</title>
</head>
<body>
<div id="diva">
<p>This is a sample paragraph, which is wrapped by the first
DIV</p>
</div>
<div id="divb">
<p>This is a sample paragraph, which is wrapped by the
second DIV</p>
</div>
<div id="divc">
<p>This is a sample paragraph, which is wrapped by the third
DIV</p>
</div>
<script language="javascript" src="prototype-
1.4.0.js"></script>
<script language="javascript">
//Example using the Event object and 'observe()' method
function displayDivId(){
var divs=$A(document.getElementsByTagName('div'));
divs.each(function(div){
Event.observe(div,'click',function(){alert(div.id)});
});
}
displayDivId();
</script>
</body>
</html>
After studying the previous example, I'm pretty sure that you'll realize how easy it is to assign diverse event handlers to the elements of a web page with Prototype, without having to deal with browser incompatibilities.
You should practice using the "Event.observe()" method to assign different handlers to a range of elements included into a web document. In this way you will learn more quickly how to get the most of this handy feature.
Okay, at this point you learned how to work with events and the Prototype framework. Considering that there are still many important methods and functions included with this library that remain uncovered, in the following section I'm going to teach you how to use a couple of objects for processing online forms.
Want to see how these brand new objects will be utilized? Keep reading, please.
Next: Handling web forms >>
More JavaScript Articles
More By Alejandro Gervasio
