I made a change in the blogger configuration to ease the later work when blogging. It is possible that older entries are not correctly formatted.

Wednesday 21 April 2010

prototype javascript - API features

Prototype is a minimalistic javascript Ajax and Dom manipulation framework.

By taking a look at the API, I decided to sum up the interesting features of prototype (version 1.6). Here are the following useful features of prototype

  • Ajax Requests
  • syntactic sugar
  • CSS selector manipulation
  • enumeration
  • String manipulation and Template mechanism
  • periodical workers

Ajax Requests

The prototype API provides a simple browser independant API to perform Ajax requests:

new Ajax.Request('/theserverURLpath', {
  onSuccess: function(response) {
   // Handle the response content...
  }
});
Just as in other javascript frameworks to perform Ajax requests you can set callback depending on the type of response you obtain from the server. The code might look like this:
new Ajax.Request('/theserverURLpath', {
  onSuccess: function(response) {
   alert('The call was successful');
  },
  onFailure: function(response) {
   alert('The call has failed');
  }
});

Syntactic Sugar and Element Manipulation

Prototype provides a certain number of shortcuts to obtain elements more easily. For example, you can directly obtain elements when you know their id (for example for an element with id: 'myid', you can get the element using the call to $('myid'))

Other example of syntactic sugar are $F (returns the value of a form element), $A return an array from an iterable element, $H (returns a Hash map), $R (returns an object range), $w (returns the array from the splitted string given as argument).

CSS selector manipulation

CSS Selectors provides a powerful means of selecting elements of a web page either using their tags, or their ids, or their css class... prototype provides a selector class and two syntactic sugar constructs to perform easy queries using selectors.

Enumerations

Prototype provides a mixin in order to create enumerable classes more easily. The following example illustrate the definition and the use of the mixin.

var theEnumerableClass = Class.create(Enumerable, {
  initialize: function() {
   // the constructor code
  },
  _each: function(iterator) {
  // Your iteration code, invoking iterator at every turn
  },
  // Your other methods here, including Enumerable overrides
}); var enumerableInstance = new theEnumbarableClass({});
After having defined the enumerable class and instance, prototype provides a number of methods from the Enumerable mixin in order to perform actions on the enumerable aspect of the instance, for instance using the each() function.

String manipulation and Template mechanism

Prototype provides a number of string manipulations extensions of the string class as well as a regular expression framework.

It also provides the usual template mechanism which allows the passing of arguments to a given string.

var myTemplate = new Template('Dear #{title} #{firstname} #{lastname}.');
var personInfo = {
  title: 'Dr',
  firstname: 'Homer',
  lastname: 'Simpson'
};
// let's format our data
myTemplate.evaluate(personInfo);

periodical workers

Like many other javascript frameworks, prototype has also a mechanism to perform some tasks periodically. The code is clear in itself.

new PeriodicalExecuter(function (pe) { // the code to be performed every five seconds !!! }, 5);