Prototype JavaScript Framework

Infobox Software
name = Prototype JavaScript Framework
developer = [http://prototypejs.org/core Prototype Core Team]
latest release version = 1.6.0.3
latest release date = release date|2008|09|28
genre = JavaScript toolkit
license = MIT License
website = http://prototypejs.org

The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson which provides an Ajax framework and other utilities. It is implemented as a single file of JavaScript code, usually named prototype.js. Prototype is distributed standalone, but also as part of larger projects, such as Ruby on Rails, script.aculo.us and Rico.

Features

Prototype provides various functions for developing JavaScript applications. The features range from programming shortcuts to major functions for dealing with XMLHttpRequest.

Prototype also provides library functions to support classes and class-based objects [ [http://www.prototypejs.org/learn/class-inheritance Defining classes and inheritance, in the Prototype documentation] ] , something the JavaScript language does not have [ [http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages Class-based vs prototype-based languages, in mozilla.org's JavaScript guide] ] [ [http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties Inheriting Properties, in mozilla.org's JavaScript guide] ] . In JavaScript, object creation is prototype-based instead: an object creating function can have a prototype property, and any object assigned to that property will be used as a prototype for the objects created with that function. The Prototype framework is not to be confused with this language feature.

ample utility functions

The $() function

The dollar function, $(), is basically Prototype's shorthand for "getElementById". To refer to an element in the DOM of an HTML page, the usual function identifying an element is: document.getElementById("id_of_element")

The $() function reduces the code to: $("id_of_element")

This function can be used as the getElementById() function. For example, you can set the CSS text color with this code: $("id_of_element").style.color = "#ffffff";

Or, the "Prototype way": $("id_of_element").setStyle({color: '#ffffff'});

The $F() function

Building on the $() function: the $F() function returns the value of the requested form element. For a 'text' input, the function will return the data contained in the element. For a 'select' input element, the function will return the currently selected value. $F("id_of_input_element")

:Note: Like the underscore (_), the $ character is a legal "word character" in JavaScript identifiers, and has no other significance in the language. It was added to the language at the same time as support for regular expressions, so that the Perl-like matching variables could be emulated, such as $` and $'.

The $$() function

The dollar dollar function is Prototype's "CSS Selector Engine". It returns all matching elements, following the same rules as a selector in a CSS stylesheet. For example, if you want to get all <a> tags with the class "pulsate", you would use the following:

$$("a.pulsate")

This returns a collection of elements. If you are using the Script.aculo.us extension of the core Prototype library, you can apply the "pulsate" (blink) effect as follows:

$$("a.pulsate").each(Effect.Pulsate);

The Ajax object

In an effort to reduce the amount of code needed to run a cross-browser XMLHttpRequest function, Prototype provides the Ajax object to abstract the different browsers. It has two main methods: Ajax.Request() and Ajax.Updater().There are two forms of the Ajax object. Ajax.Request returns the raw XML output from an AJAX call, while the Ajax.Updater will inject the return inside a specified DOM object.The Ajax.Request below finds the values of two HTML value inputs, requests a page from the server using the values as POST values, then runs a custom function called showResponse() when complete:

var url = "http://yourserver/path/server_script";

var myAjax = new Ajax.Request(url, { parameters: { value1: $F("name_of_id_1"), value2: $F("name_of_id_2") }, onSuccess: showResponse, onFailure: showError});

Object-oriented programming

Prototype also adds support for more traditional object-oriented programming. The Class.create() method is used to create a new class. A class is then assigned a prototype which acts as a blueprint for instances of the class. var FirstClass = Class.create( { // The initialize method serves as a constructor initialize: function () { this.data = "Hello World"; );

Extending another class:Ajax.Request= Class.create( Ajax.Base, { //Overwrite the initialize method initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setOptions(options); this.request(url); }, // ...more methods add ... });The framework function Object.extend(dest, src) takes two objects as parameters and copies the properties of the second object to the first one simulating inheritance. The combined object is also returned as a result from the function. As in the example above, the first parameter usually creates the base object, while the second is an anonymous object used solely for defining additional properties. The entire sub-class declaration happens within the parentheses of the function call.

References

ee also

* Ajax (programming)
* Comparison of JavaScript frameworks
* Script.aculo.us

External links

* [http://www.prototypejs.org/ Prototype Javascript Framework home page]
* [http://www.prototypejs.org/api Official Prototype API documentation]
* [http://javascript-frameworks.wrox.com Wrox Professional JavaScript Frameworks book wiki with 6 Prototype chapters]
* [http://proto-scripty.wikidot.com/ Unofficial Prototype & Script.aculo.us wiki and FAQ] created by community members