Prototype JS Library

Prototype is a JavaScript framework that aims to ease development of dynamic web applications. JavaScript frameworks, such as Prototype, jQuery and MooTools have taken much of the pain of writing javascript away. 

“Prototype takes the complexity out of client-side web programming. Built to solve real-world problems, it adds useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model.”, according to http://prototypejs.org/ . 

To start working with prototype, a developer needs to have some basic knowledge about – HTML,CSS & Basic Javascript and has to put a copy of prototype.js file on his page header:

<script src="prototype.js"></script> 

Lets discuss some features of prototype –

  • Finding Elements
  • Filtering
  • Observe Events
  • Ajax Support

 Dummy HTML content for further discussion –

<span class="test" id="spanId">

span content

</span> 

Finding the Elements

$("spanId").toggleClassName("highlight");                                                —> Find by ID

$$(".test").each(function(elmt) { elmt.toggleClassName("highlight") }); —> Find by Class 

$$("span").each(function(elmt) { elmt.toggleClassName("highlight") }); —> Find by Tag

“$” and “$$” are prototype functions used for different cases.

You may notice that I have also introduced some new pieces of Prototype,

the /each/ function, /toggleClassName/ function. 

Filtering

$$("span:first-child").each(function(elmt) { --> Filter for the First Object of Many

elmt.toggleClassName("highlight")

}); 

$$("span:not(#second)").each(function(spanobj) {–> Filter out a Specific ID

spanobj.toggleClassName("highlight");

});

} 

Observe Events

Handling JavaScript objects with Prototype is easy. Any differences among browsers is automatically handled. In Prototype, you /observe/ an object, waiting for its events.

Example – The dom:ready Event

Prototype adds a special event called /dom:ready/. This can be used to know when the page should be initialised. The dom:ready event happens when the document object model (DOM) is ready to be accessed. If you put all JavaScript code, that happens on page loads, inside the dom:ready event, then you ensure that it will be run as early as possible, but not too early.

To add the dom:ready event, put this code in the JavaScript section of your page:

document.observe('dom:loaded', function() {

alert('DOM is loaded!');

}); 

Prototype Support for AJAX

All major browsers support a version of the XMLHttpRequest object that makes Ajax possible, either as an ActiveX component or as a native JavaScript object. XMLHttpRequest, however, exposes the HTTP protocol at a very low level, which gives the developer a lot of power, but also requires her to write a lot of code in order to do simple things.

Prototype uses it’s own object inheritance system to provide a hierarchy of Ajax helper objects. Ajax functionality is contained in the global Ajax object. This object provides all the necessary methods to handle AJAX requests and responses in an easy way:

new Ajax.Request('/some_url',
{
 method:'get',
 onSuccess: function(transport){
   var response = transport.responseText || "no response text";
   alert("Success! \n\n" + response);
   },
 onFailure: function(){ alert('Some problem occurred...') }
});

 Other features 

Other than these features, prototype.js also has support for Number processing, Array processing, JSON support, Templating, Enumerating etc. 

Comparision b/w Jquery and Prototype 

Comparing these two frameworks is indeed a very difficult task to do. After studying and searching whatever information is available on web, I can say that it depends on what environment the individual feels more comfortable. The following blogs solely focus on this question – 

http://www.rustybrick.com/prototype-js-vs-jquery-comparison.html

http://thinkrelevance.com/blog/2009/01/12/why-i-still-prefer-prototype-to-jquery

http://jream.com/blog/jquery-vs-prototype-js 

Just like Jquery UI tools, prototype also has its UI extensions like – http://script.aculo.us/

 

 

 

One thought on “Prototype JS Library

  1. Very well explained. In my opinion the requirements for choosing the js client side framework boils down to following:
    1) You have designers to do the design and you want to show effects by working with dom.
    2) You want a component rich framework which you directly port to your application without much use of the designer.

    After working with prototype, jQuery and dojo , I would prefer dojo over both prototype and jquery for a simple reason of not having designers to write beautiful css components.

Leave a Reply

Your email address will not be published. Required fields are marked *


eight + = 12

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>