The Prototype JavaScript Framework is a JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
In computer programming, a software framework is an abstraction in which software providing generic functionality can be selectively changed by user code, thus providing application specific software...
created by Sam Stephenson in February 2005 as part of the foundation for Ajax support in Ruby on Rails
Ruby on Rails
Ruby on Rails, often shortened to Rails or RoR, is an open source web application framework for the Ruby programming language.-History:...
. 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
Script.aculo.us
script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework, providing dynamic visual effects and user interface elements via the Document Object Model ....
Rico is an open source JavaScript library for developing rich Internet applications that use Ajax.Rico uses the Prototype Javascript Framework library and the JSON standard.- Features :...
.
Features
Prototype provides various functions for developing JavaScript applications. The features range from programming shortcuts to major functions for dealing with XMLHttpRequest
XMLHttpRequest
XMLHttpRequest is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script. The data might be received from the server as XML text or as plain text...
.
Prototype also provides library functions to support classes
Class (computer science)
In object-oriented programming, a class is a construct that is used as a blueprint to create instances of itself – referred to as class instances, class objects, instance objects or simply objects. A class defines constituent members which enable these class instances to have state and behavior...
and class-based objects, something the JavaScript language lacks. In JavaScript, object creation is prototype
Prototype
A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.The word prototype derives from the Greek πρωτότυπον , "primitive form", neutral of πρωτότυπος , "original, primitive", from πρῶτος , "first" and τύπος ,...
-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.
The $ function
The dollar function, $, can be used as shorthand for the getElementById function. To refer to an element in the Document Object Model
Document Object Model
The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
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.
var domElement = document.getElementById("id_of_element"); // usual object reference returned
var prototypeEnhancedDomElement = $(domElement); // prototype extended object reference
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 expression
Regular expression
In computing, a regular expression provides a concise and flexible means for "matching" strings of text, such as particular characters, words, or patterns of characters. Abbreviations for "regular expression" include "regex" and "regexp"...
Perl is a high-level, general-purpose, interpreted, dynamic programming language. Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language to make report processing easier. Since then, it has undergone many changes and revisions and become widely popular...
-like matching variables could be emulated, such as $` and $'.
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")
-Computing:*Cascading Style Sheets, a language used to describe the style of document presentations in web development*Central Structure Store in the PHIGS 3D API*Closed source software, software that is not distributed with source code...
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
Script.aculo.us
script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework, providing dynamic visual effects and user interface elements via the Document Object Model ....
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 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 (called showResponse below) when the HTTP response is received from the server:
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";
}
});
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.
Problems
In contrast to other JavaScript libraries like jQuery
JQuery
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
, Prototype made the decision to extend the DOM, but there are plans to change this in the next major version of the library.
In April 2010, blogger Juriy 'kangax' Zaytsev (of Prototype Core) described at length the problems that can follow from adding new methods and properties to the objects defined by the W3C DOM. These ideas echo thoughts published in March 2010 by Yahoo! developer Nicholas C. Zakas They have been summarised as follows
Cross browser issues: host objects have no rules, IE DOM is a mess, etc.
Chance of name collisions
Performance overheads
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. Rather than adding new methods and properties to pre-existing 'host' DOM objects such as Element, like element.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.
It is now widely expected that the majority of these ideas and issues will be addressed in the release of Prototype 2.0, but Prototype developers will have to learn to work with an altered syntax, and much existing Prototype code will become outdated.
- Rationale :There are many JavaScript frameworks available. The intention of this comparison is to show some examples of JavaScript frameworks with their different features.- Table of Javascript Frameworks :- External links :* * * * * * * *...
script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework, providing dynamic visual effects and user interface elements via the Document Object Model ....
MooTools is a lightweight, object-oriented, web-application framework for JavaScript, written in JavaScript. It is released under the free, open-source MIT License...
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
