Part 2: Using the Prototype JavaScript Framework

Karl · 11-08-2007, 03:12 PM

As an extension to Wildhoney's introductory article on JavaScript, I have written this article to show how to achieve the same results from using Prototype. Please note that the code in this example could be compacted considerably using some of Prototypes advanced features. However, due to this being an introduction to Prototype, I have decided to go with a "more code, easier to read", approach.

Prototype, if you don't already know, is a popular JavaScript Framework. I have a slightly different style to Wildhoney, I'm going to go ahead and paste the complete source code with extensive comments to help you understand what's going on.

javascript Code:

<html>
<head>
    <title>TalkPHP.com - Part 2: Using Prototype</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">

        // Updates the specified element.  This function is called for each child
        // element in the "myContainer" element
        function updateDiv(pElement)
        {
            // Change this elements inner HTML to "I've changed!" by using
            // prototypes handy update() function
            pElement.update("I've changed!");         
        }
    
        function changeDivs()
        {

            // Get a reference to the div with the id 'myContainer'.  This is
            // Prototype equivalent to getElementById(..);
            var pContainer = $('myContainer');

            // Use Prototype's childElements() function to return a list of valid
            // child nodes, this function should be cross-browser compatible
            // and should therefor weed out the text elements that IE picks up
            var aContainerChildren = pContainer.childElements();

            // For each of the containers child nodes we want to call the updateDiv
            // function.  For each call, updateDiv will be passed a reference of 
            // the element as its first argument.
            aContainerChildren.each(updateDiv);
        }
        
        // This simply tells the page to call our "changeDivs"
        // when the windows load event is triggered
        Event.observe(window, 'load', changeDivs);
    
    </script>
</head>
<body>

<div id="myContainer">
    <div>Change me</div>
    <div>Modify me</div>
    <div>Alter me</div>
</div>
    
</body>
</html>

If you go ahead and run the code you'll see that we've achieved the exact same results that we got from Wildhoney's article. However, this time, we've achieved it using Prototype's excellent Framework. If you were to remove all the comments, you'll see the code is much easier to read and a lot more flexible.

For more information on any of the function used in this example you can head over to the Prototype website: http://www.prototypejs.org

maZtah · 11-09-2007, 10:41 AM

Great tutorial, it just seems to be so darn easy.

Salathe · 11-09-2007, 01:29 PM

It really is very easy and when you get comfortable with the structure of JavaScript and frameworks like Prototype you can produce code like the following (which is functionally the same as Karl's above).

javascript Code:

Event.observe(window, 'load', function() {
    $$("#myContainer > div").invoke("update", "I've changed!");
});

Haris · 11-14-2007, 10:29 AM

That is so easy!

westworld · 11-05-2008, 12:52 PM

you can also use dom:loaded
expl.

Code:

document.observe("dom:loaded", function() {
  // initially hide all containers for tab content
  $$('div.tabcontent').invoke('hide');
});

westworld can be found @ westworld