Prototype – a fantastic JavaScript Framework, simplifies Ajax coding

Prototype - a fantastic JavaScript Framework, simplifies Ajax codingWhat is Prototype? Prototype is a JavaScript framework that simplifies AJAX coding and extends the DOM structure. Prototype comes with several short-cut coding methods and modules to allow you to shorten your AJAX coding and it’s browser-safe. Prototype is now available with the latest version, 1.6 for download.

To start using Prototype in your web apps, it’s easy, just download the prototype.js file and include it in any JavaScript tag pairs shown as follows then you can start using the simplified coding in AJAX offered by Prototype.

<script src=”prototype.js” type=”text/javascript”></script>

Lets look at the API offered by Prototype. If you visit Prototype website, you’ll get several tips and tutorials and also the API documentation in few formats such as HTML, PDF and the Windows CHM version. The API is nicely devided into the short-cut coding methods and several modules that let you manipulate AJAX and DOM structure easily without heavy coding.

The short-cut coding or utility methods in Prototype
When dealing with DOM, the conventional way is to obtain an element by the specified ID is to use the document.getElementById or alternatively for more cross-browser support, I used to do it as follows i.e to build a wrapper function for the support of both older versions of IE or other browsers:

function getElement(id)
{
    var select;
    if ( document.all )
    {
      select = document.all(id);
    }
    else
      select = document.getElementById(id);
    return select;
}

Then in order to obtain an element from the DOM structure, lets say a <div> with the ID “myDiv1″, I will use the getElement(‘myDiv1′) to get it, e.g

var myDiv1 = getElement(‘myDiv1′);

But, using Prototype, it’s very much simpler and the code is definitely much shorter, and you don’t have to build any wrapper function as Prototype itself offers tons of useful wrapper functions for manipulating the DOM structure. Such as doing the above, we use the most commonly used one in Prototype i.e using $(), we’ll just do as follows:

var myDiv1 = $(‘myDiv1′);

And Prototype offers more short-cut way, much shorter code and in more Object Oriented manner of doing it. Such as for example, I wanna hide and show three DIVs, which each has an ID “myDiv1″, “myDiv2″ and “myDiv3″ respectively. And so when clicking the buttons “hide” and “show”, it will hide and show all DIVs respectively.
Hide and show three DIVs using Prototype so easy!!
Without using Prototype, I will need to have the much longer code as follows:

<div id=”myDiv1″>My Div1</div>
<div id=”myDiv2″>My Div2</div>
<div id=”myDiv3″>My Div3</div>
<input type=button onClick=”hideAll();” value=”Hide”>
 
<input type=button onClick=”showAll();” value=”Show”>
<script type=”text/javascript”>
function hideAll()
{
    var myDiv1= getElement(‘myDiv1′);
    if (myDiv1!=null )
        myDiv1.style.display=’none’;
    var myDiv2= getElement(‘myDiv2′);
    if (myDiv2!=null )
        myDiv2.style.display=’none’;
    var myDiv3= getElement(‘myDiv3′);
    if (myDiv3!=null )
        myDiv3.style.display=’none’;
}

function showAll()
{
    var myDiv1= getElement(‘myDiv1′);
    if (myDiv1!=null )
        myDiv1.style.display=’block’;
    var myDiv2= getElement(‘myDiv2′);
    if (myDiv2!=null )
        myDiv2.style.display=’block’;
    var myDiv3= getElement(‘myDiv3′);
    if (myDiv3!=null )
        myDiv3.style.display=’block’;
}

function getElement(id)
{
    var select;
    if ( document.all )
    {
        select = document.all(id);
    }
    else
        select = document.getElementById(id);
    return select;
}
</script>

But using Prototype, the JavaScript code can be shorten (in red) as follows:

<script type=”text/javascript” src=”prototype.js”>
</script>
<div id=”myDiv1″>My Div1</div>
<div id=”myDiv2″>My Div2</div>
<div id=”myDiv3″>My Div3</div>
<input type=button onClick=”hideAll();” value=”Hide”>
 
<input type=button onClick=”showAll();” value=”Show”>

<script type=”text/javascript”>
function hideAll()
{
    $(‘myDiv1′, ‘myDiv2′, ‘myDiv3′).invoke(‘hide’);
}

function showAll()
{
    $(‘myDiv1′, ‘myDiv2′, ‘myDiv3′).invoke(‘show’);
}
</script>

Look, isn’t it fantastic that Prototype allows you to hide and show the three DIVs in example by just having a line of code $(‘myDiv1′, ‘myDiv2′, ‘myDiv3′).invoke(‘hide’);, instead of having to code those many lines that I used to do?

Besides the $, Prototype has got other useful utility methods
such as $$, $A, $F, $H, $R, $w, Try.these, document.getElementsByClassName for easy manipulation of arrays, hash or getting the element by class name etc. We’ll look into each of these in later posts.

The modules offered by Prototype also offers various classes that offers very much useful methods that simplify AJAX calls and manipluation of String, Date, Form, Document, Number, Hash and more Object-Oriented feature such as creating classes and inheritance is possible using the Class module.

We’ll dedicate more posts to explain the details and example how to use each module and other utility (or I call it short-cut) methods later.

Prototype 1.6 version, which is the latest while writing this post, can be downloaded here.
And you can download the API documentation here.
And also the it offers some tips and tutorials for you to kick start off here.

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “Prototype – a fantastic JavaScript Framework, simplifies Ajax coding”


  1. No Comments

Leave a Reply

You must login to post a comment.