PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

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.

Listing 6 Creating a hash and reading and writing values (listing-6.html)
<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.

Listing 7 Generating an array of values with $R() and $A() (listing-7.html)
<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.

Listing 8 Using $w() for bulk element operations (listing-8.html)
<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.

In This Article