Introducing the Prototype JavaScript Library - Working easily with arrays and hashes: using the $A and $H functions
(Page 3 of 4 )
Now that I've explained how the $ function works, in this section I'm going to introduce two additional functions included with the Prototype library. These are the $A and $H functions.
As you'll see shortly, the $A function comes in handy for converting any inputted argument (keep in mind that this function takes only one parameter) into an array object. The advantage of working with array objects will become clear when I cover some of their most relevant methods later on, but for the moment, take a look at the following example. It demonstrates a simple implementation of the $A function.
The code sample is as follows:
<!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 of $A function</title>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// example using the $A function
function displayHTML(){
var divs=$A($('generalcontainer').getElementsByTagName
('div'));
for(var i=0;i<divs.length;i++){
var htmlcont=$('htmlcontainer');
htmlcont.innerHTML+=divs[i].innerHTML;
}
}
window.onload=function(){
if(document.getElementById && document.createElement &&
document.getElementsByTagName){
var btn=$('testbutton');
if(!btn){return};
btn.onclick=displayHTML;
}
}
</script>
</head>
<body>
<div id="generalcontainer">
<div>
<p>This is a sample paragraph, which is wrapped by the first
DIV</p>
</div>
<div>
<p>This is a sample paragraph, which is wrapped by the
second DIV</p>
</div>
<div>
<p>This is a sample paragraph, which is wrapped by the third
DIV</p>
</div>
</div>
<div id="htmlcontainer"></div>
<input type="button" value="Show function result" id="testbutton" />
</body>
</html>
As you can see, the previous example shows how the $A function can be first used for retrieving an array of DIV elements, and then for traversing them. However, I'm pretty sure that you're asking: what's the difference between this and working with conventional HTML collections, like the ones returned by the popular "getElementByTagName()" method that comes with the DOM?
Well, the answer is simple. As I said before, array objects expose a remarkable set of methods that can be used, among other things, to implement iterators, search and find array elements, count them, and much more.
Nonetheless, some of these useful methods will be properly covered in the next article of the series. For now I'd like you to pay attention to the following example, which illustrates the use of the $H function. As you'll see below, this function is really helpful for turning an object into an hash, which can be accessed by using an associative array notation. That sounds pretty good, right?
Okay, having explained basically what the $H function does, below I included another hands-on example to help you understand its functionality more clearly. Here it is:
<!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 of $H function</title>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// example using the $H function
function converObjectToHash(){
var obj={first: 1,second : 2,third: 3};
var hash=$H(obj);
var htmlcont=document.getElementById('htmlcontainer');
htmlcont.innerHTML=hash['first']+' '+hash['second']+' '+hash
['third'];
}
window.onload=function(){
if(document.getElementById && document.createElement &&
document.getElementsByTagName){
var btn=$('testbutton');
if(!btn){return};
btn.onclick=converObjectToHash;
}
}
</script>
</head>
<body>
<div id="htmlcontainer"></div>
<input type="button" value="Show function result" id="testbutton" />
</body>
</html>
In this case, I used the $H function for converting the above "obj" object into an enumerable hash, which can be accessed via an associative array syntax. Maybe you won't find this function as useful as other ones, but it 's worthwhile to notice that it can be used in conjunction with other methods that are covered profusely in Prototype's official site, located at http://www.prototype.conio.net.
Besides, Sergio Pereira has published an excellent guide to Prototype on his web site, located at http://www.sergiopereira.com/articles/prototype.js.html. If you're interested in reading a detailed guide on this thorough JavaScript library, you may want to visit this site.
All right, at this stage you hopefully learned the basics of how to use some handy functions bundled with Prototype, such as $, $A, and $H respectively. In the last section of this tutorial, I'm going to show you how to use another function, called $F, which is aimed at dealing specifically with the fields of online forms.
To learn how this brand new function works, please click on the link below and read the next few lines.
Next: Dealing easily with form fields: using the $F function >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
