Eight Weeks of Prototype: Week 7, Other Prototype Functionality
Shortcut Functions
Prototype provides several shortcut functions to help simplify your everyday JavaScript development. We already looked at two of these in the first article in this series ($() and $$()), but there are a number of other useful functions available.
Retrieving a Form Element Value with $F()
In the previous section I showed you how to retrieve form values using either the form serialize() method or by using the getValue() method. The $F() function is an alias to getValue() (although realistically it's not much of a shortcut).
Creating a Hash with $H()
As discussed in the third article in this series, the Hash class is a Prototype-specific type which adds extra functionality to a normal JavaScript object. A new Hash object is created using the $H() method, which accepts a JavaScript object as its only argument. Using a hash rather than a normal object has several advantages (such as receiving all the features of enumerable objects). This is discussed in the third article in this series.
Listing 6 demonstrates this by creating a hash using an object, then reading and updating values.
<html> <head> <title>Creating a hash and reading and writing values</title> <script type="text/javascript" src="/js/prototype.js"></script> </head> <body> <script type="text/javascript"> var person = $H({ name : 'Quentin', country : 'Australia' }); // retrieve a value alert(person.get('name')); // update a value person.set('country', 'Somewhere else'); // remove a value person.unset('country'); // retrieve the size of the hash alert(person.size()); </script> </body> </html>
Creating a Range with $R() and $A()
One class we haven't looked at yet is ObjectRange. This is another type of Enumerable object (see the third article in this series for more information about enumerables), used to represent a range of values. The reason I haven't touched on it sooner is that it's probably not something you will end up using very much.
You can create a new ObjectRange by instantiating the class, however the preferred method is to use the $R()function. This method accepts two arguments: the starting value and the ending value of the range.
Once you have a range you will often want to convert it to an array so it can be used just as a normal array would be. This is achieved using the $A() function. You can think of using the combination of $A() and $R() as simple array generation.
Listing 7 shows an example of creating a range of values using the $R() method. The range is then converted to an array so the values can be easily manipulated.
<html> <head> <title>Generating an array of values with $R() and $A()</title> <script type="text/javascript" src="/js/prototype.js"></script> </head> <body> <div id="foo"></div> <script type="text/javascript"> var range = $R(1, 12); var arr = $A(range); // $A($R(1, 12)) for short $('foo').update(arr.join(', ')); </script> </body> </html>
Tokenizing a String with $w()
If you want to split a string into words (using whitespace as the delimiter), you can use the $w() method (note the lower-case w).
Listing 8 shows an example of how this function could be used. A list of element IDs is passed to $w(), which we then use the enumerable each() method to hide and show all of those elements.
<html> <head> <title>Using $w() for bulk element operations</title> <script type="text/javascript" src="/js/prototype.js"></script> </head> <body> <div id="foo">Showing</div> <div id="bar">Hide Me</div> <div id="blah">I want to disappear!</div> <script type="text/javascript"> // hide the elements $w('foo bar blah').each(function(id) { $(id).hide(); }); // this is simpler: // $w('foo bar blah').each(Element.hide); // show them again $w('foo bar blah').each(Element.show); </script> </body> </html>
Your own mileage with this function will vary. It's not typically something I use but since it's a part of Prototype I have included it in this article.