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 1, Beginning with Prototype

The $() Function

The first function we will look at is the $() function. This function behaves very similarly to document.getElementById() (the non-Prototype way of retrieving a DOM element using JavaScript), except that it returns elements with extended Prototype functionality (covered in the second article of "Eight Weeks of Prototype"). This extended functionality is a series of methods added to each element that simplify your JavaScript development.

Although typically you will only pass one argument to $(), you can in fact pass multiple arguments to it. If one argument is used, then a single element is returned. If more than one argument is used, then an array of elements is returned.

To retrieve an element (or multiple elements) with $(), you can use either the ID of the element you want to select, or the element itself. By passing an element to $(), you can ensure it has been extended with the extra functionality Prototype provides.

Listing 2 shows an example of using $(), in which the div element with an ID of exampleDiv is selected. The content of this div is then modified using the update() method (which is one of the extended methods Prototype provides, covered in part 2 of this series).

Listing 2 Selecting an element with $() and updating its contents (listing-2.html)
<html>
   <head>
       <title>Selecting an element with $() and updating its contents</title>
       <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="exampleDiv"></div>
        <script type="text/javascript">
            $('exampleDiv').update('Div content updated!');
        </script>
    </body>
</html>

In the code above we know the #exampleDiv element exists, and therefore we don't worry about any error checking, however, you should really ensure the element is correctly returned before trying to perform any further operations on it. If the given element was not found then null is returned. Thus, you can use code similar to that of Listing 3 to ensure the given element was found.

Listing 3 Ensuring the element was successfully returned before using it (listing-3.html)
<html>
    <head>
        <title>Ensuring the element was successfully returned before using it</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="exampleDiv"></div>
        <script type="text/javascript">
            var elt = $('exampleDiv');
            if (elt)
                elt.update('Div content updated!');
        </script>
    </body>
</html>

Often JavaScript classes you write with Prototype (covered in the sixth article of "Eight Weeks of Prototype") will rely on one or more elements in your HTML document. Checking that the element was selected successfully as in Listing 3 means you can write error-free code and accordingly notify the user (or developer) that there was a problem if the element was not found.

When writing your own functions you may not necessarily know whether you have been passed an element or just an ID. Therefore, you should typically call $() on any arguments that are supposed to be DOM elements. Listing 4 shows a user-defined function and two different (yet identical) ways of calling it.

Listing 4 Using $() to extend function arguments (listing-4.html)
<html>
    <head>
        <title>Using $() to extend function arguments</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="exampleDiv"></div>
        <script type="text/javascript">
            function myFunction(elt, message)
            {
                elt = $(elt);
                elt.update(message);
            }
 
            myFunction('exampleDiv', 'Div updated');
            myFunction($('exampleDiv'), 'Div updated again');
        </script>
    </body>
</html>

While this example is somewhat trivial, it does demonstrate one of the ambiguities that may arise with JavaScript development: whether a function accepts an element or an element ID. Using $() as in myFunction()above means it doesn't matter either way.

In This Article