Before delving into Prototype, I will explain the basic purpose and importance of using Javascript in web development. So, Why use Javascript in the first place instead of just HTML? Well, Javascript widens the user's scope to add flexibility and interactivity to a web page as opposed to HTML. While HTML is often flat and static, Javascript is dynamic and incredibly more interactive with the user and server. It adds more control to the user of software objects and relies on the environment the user is trying to control as opposed to HTML which, in a way, can be more stand alone.
Prototype is a Javascript library that allows user all ready familiar with Javascript or some sort of programming to write Javascript in an easier and clearer syntactical fashion.
The creators of this Javascript library describe Prototype's purpose as it's ability "to ease the development of dynamic web applications."
They were right: Prototype simplifies the complexity of coding Javascript for sophisticated web applications including methods in its library to help increase efficiency , conciseness of commonly used or tedious Javascript tasks.
Most Common Uses/Features for Prototype JS:
AJAX Requesting
Arrays, Hashes,String
Utility methods
----------------------------------------------------------------------------------------------------------------------------------------
The Prototype Javascript library simplifies Ajax Requesting for the user by creating methods which have an easy to understand syntax and design.
An Ajax Request life cycle includes :
Created, Initialized, Request Sent, Response being received, Response received.
new Ajax.Request('url call here',
{ method:'get',
parameters: {key: 'value' , key2: number, etc..},
onSuccess: function(transport){ var response = transport.responseText || "no response text"; alert("Success! \n\n" + response); },
onFailure: function(){ alert('Something went wrong...') }
});
Seen above, onSuccess & onFailure are only two of the onXXXX family of options allowed in the Ajax.Request. Others include : onUinitialized, onLoading, onLoaded, onInteractive, onComplete, onException; this allows for more customization to your Ajax request. Furthermore, the user can add parameters ( that you may need to process in your back end script )can be sent through the Ajax.Request object expanding the possibility of options for modeling your code. The methods option for an Ajax request simply reffers to a GET or POST requests. More often than not, a common use of Ajax.Request can be dealing with some sort of Form. A very convenient feature of Prototype is the fact that when the user needs to pass a parameter from a Form with the request, they can utilize the method : Form.serialize..
Moreover, Prototype simplifies the updating of HTML within containers in your script using Ajax.Updater. Similar to the onComplete in Ajax.Request, the Ajax.Updater makes it easier for the user to update any HTML code.
More to look at: Ajax.PeriodicalUpdater
Arrays, Hashes, and other components
----------------------------------------------------------------------------------------------------------------------------------------
The Array class adds variety of functionalities to primitive arrays that use [] indexing and can be a pain to deal with. Using the Array class,the user can find much of the functionality confined to much cleaner methods. Such include push,pop,concat,etc.. [[http://www.prototypejs.org/api/array]] that make the manipulation of Arrays that much easier. Also involved in the Array class is the Enumerable class whose capabilities can increase the functionality in traversing Arrays. The API for Enumerable [[http://www.prototypejs.org/api/enumerable]]can be seen on jsprototype.org. Hashes, a commonly used and useful tool, have become convenient through Prototype as well by allowing for two ways to create them : new Hash() or $H(). This allows a user who has knowledge of the hash to utilize its many benefits.
Utility Methods
-----------------------------------------------------------------------------------------------------------------------------------------These methods are most commonly used by programmers and is what makes Prototype a refined library that has made javascript much easier to use.
- $('id')- this is an alias to document.getElementById('id');.. but instead of constantly having to tediously type this out, the user can use this Prototype shortcut and accomplish the exact same task.
- $F(element)→ retrieves the value of this Form element..alias of Form.Element.getValue
- $A(iterable) ->actualArray– turns into Array object
- $w(String)->Array – turns a string into an array using space as delimiter.
MORE SOURCES
-------------------------------------------------------------------------------
API Documentation:[[http://api.prototypejs.org/]]
JS Prototype home:[[http://prototypejs.org/]]
Prototype Guide: [[http://www.sergiopereira.com/articles/prototype.js.html]]
