AjaxApp.com, ajax app and cool web app!

What 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.

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:

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

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:

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.

Without using Prototype, I will need to have the much longer code as follows:

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

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.