| Prototype | |
|---|---|
| Original author | Sam Stephenson |
| Developer | Prototype Core Team |
| Initial release | February 2005; 21 years ago (2005-02) |
| Stable release | 1.7.3 / September 22, 2015; 10 years ago (2015-09-22) |
| Written in | JavaScript |
| Type | JavaScript library |
| License | MIT License |
| Website | prototypejs |
| Repository | |
ThePrototype JavaScript Framework is aJavaScriptframework created by Sam Stephenson in February 2005 as part ofAjax support inRuby on Rails. It is implemented as a single file of JavaScript code, usually namedprototype.js. Prototype is distributed standalone, but also as part of larger projects, such as Ruby on Rails, script.aculo.us and Rico. As of March 2021[update], according to w3techs, Prototype is used by 0.6% of all websites.[1]
Prototype provides various functions for developing JavaScript applications. The features range from programming shortcuts to major functions for dealing withXMLHttpRequest.
Prototype also provides library functions to supportclasses and class-based objects.[2] In JavaScript, object creation isprototype-based instead: an object creating function can have aprototype 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.
Thedollar function, $(), can be used as shorthand for thegetElementById function. To refer to an element in theDocument Object Model (DOM) of anHTML page, the usual function identifying an element is:
document.getElementById("id_of_element").style.color="#ffffff";
The $() function reduces the code to:
$("id_of_element").setStyle({color:'#ffffff'});
The $() function can also receive an element as parameter and will return, as in the previous example, a prototype extended object.
vardomElement=document.getElementById("id_of_element");// Usual object reference returnedvarprototypeEnhancedDomElement=$(domElement);// Prototype extended object reference
_), 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 forregular expressions, so that thePerl-like matching variables could be emulated, such as$` and$'.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")
Thedollar dollar function is Prototype'sCSS 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> elements 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);
In an effort to reduce the amount of code needed to run a cross-browserXMLHttpRequest function, Prototype provides theAjax object to abstract the different browsers. It has two main methods:Ajax.Request() andAjax.Updater().There are two forms of theAjax object.Ajax.Request returns the raw XML output from an AJAX call, while theAjax.Updater will inject the return inside a specified DOM object.TheAjax.Request below finds the current values of two HTML form input elements, issues an HTTP POST request to the server with those element name/value pairs, and runs a custom function (calledshowResponse below) when the HTTP response is received from the server:
newAjax.Request("http://localhost/server_script",{parameters:{value1:$F("form_element_id_1"),value2:$F("form_element_id_2")},onSuccess:showResponse,onFailure:showError});
Prototype also adds support for more traditional object-oriented programming. TheClass.create() method is used to create a new class. A class is then assigned aprototype which acts as a blueprint for instances of the class.
varFirstClass=Class.create({// The initialize method serves as a constructorinitialize:function(){this.data="Hello World";}});
Extending another class:
Ajax.Request=Class.create(Ajax.Base,{// Override the initialize methodinitialize:function(url,options){this.transport=Ajax.getTransport();this.setOptions(options);this.request(url);},// ...more methods add ...});
The framework functionObject.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.
Unlike other JavaScript libraries likejQuery, Prototype extends the DOM. There are plans to change this in the next major version of the library.[3]
In April 2010, blogger Juriy 'kangax' Zaytsev (of Prototype Core) described at length the problems that can follow frommonkey patching new methods and properties into the objects defined by the W3C DOM.[3] These ideas echo thoughts published in March 2010 by Yahoo! developer Nicholas C. Zakas[4] They have been summarized as follows[5]
By 2008, specific issues with using DOM-extension methods in older versions of Prototype, combined with newer versions of current browsers, were already being documented.[6] Rather than adding new methods and properties to pre-existing 'host' DOM objects such asElement, likeelement.hide(), the solution to these issues is to provide wrapper objects around these host objects and implement the new methods on these.jQuery is such a wrapper object in the library of that name.[3]
| Dialects | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Engines | |||||||||
| Frameworks |
| ||||||||
| People |
| ||||||||
| Other | |||||||||
 Lists:JavaScript libraries •Ajax frameworks •Server-side JavaScriptComparison:JavaScript web frameworks | |||||||||
