# Prototype JavaScript Framework

> Mediated Wiki article. Canonical URL: https://mediated.wiki/source/Prototype_JavaScript_Framework
> Markdown URL: https://mediated.wiki/source/Prototype_JavaScript_Framework.md
> Source: https://en.wikipedia.org/wiki/Prototype_JavaScript_Framework
> Source revision: 1353541081
> License: Creative Commons Attribution-ShareAlike 4.0 International (https://creativecommons.org/licenses/by-sa/4.0/)

JavaScript framework

For other uses, see [Prototype-based programming](/source/Prototype-based_programming).

Prototype Original author Sam Stephenson Developer Prototype Core Team 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.org Repository github.com/prototypejs/prototype

The **Prototype JavaScript Framework** is a [JavaScript](/source/JavaScript) [framework](/source/Software_framework) created by Sam Stephenson in February 2005 as part of [Ajax](/source/Ajax_(programming)) support in [Ruby on Rails](/source/Ruby_on_Rails). 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. As of March 2021[\[update\]](https://en.wikipedia.org/w/index.php?title=Prototype_JavaScript_Framework&action=edit), according to w3techs, Prototype is used by 0.6% of all websites.[1]

## Features

Prototype provides various functions for developing JavaScript applications. The features range from programming shortcuts to major functions for dealing with [XMLHttpRequest](/source/XMLHttpRequest).

Prototype also provides library functions to support [classes](/source/Class_(computer_science)) and class-based objects.[2] In JavaScript, object creation is [prototype](/source/Prototype-based_programming)-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.

## Sample utility functions

### The $() function

The **dollar function**, $(), can be used as shorthand for the *getElementById* function. To refer to an element in the [Document Object Model](/source/Document_Object_Model) (DOM) of an [HTML](/source/HTML) 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 expressions](/source/Regular_expression), so that the [Perl](/source/Perl)-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")

### The $$() function

The **dollar dollar function** is Prototype's *[CSS](/source/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> 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);

### 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:

new Ajax.Request("http://localhost/server_script", {
    parameters: {
        value1: $F("form_element_id_1"),
        value2: $F("form_element_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, {
    // Override 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.

## Problems

Unlike other JavaScript libraries like [jQuery](/source/JQuery), 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 from [monkey patching](/source/Monkey_patch) 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]

- Cross browser issues: host objects are not subject to rules, non-compliant IE DOM behavior, etc.

- Chance of name collisions

- Performance overhead

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 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.[3]

## See also

- [Free and open-source software portal](https://en.wikipedia.org/wiki/Portal:Free_and_open-source_software)

- [Ajax (programming)](/source/Ajax_(programming))

- [Comparison of JavaScript frameworks](/source/Comparison_of_JavaScript_frameworks)

- [Mootools](/source/Mootools) JavaScript Framework

- [jQuery](/source/JQuery)

- [JavaScript framework](/source/JavaScript_framework)

- [JavaScript library](/source/JavaScript_library)

## References

1. **[^](#cite_ref-1)** ["Usage Statistics and Market Share of JavaScript Libraries for Websites, March 2021"](https://w3techs.com/technologies/overview/javascript_library). *w3techs.com*. Retrieved 27 March 2021.

1. **[^](#cite_ref-2)** ["Prototype JavaScript Framework | Defining classes and inheritance"](http://prototypejs.org/learn/class-inheritance). *prototypejs.org*. Retrieved 5 June 2020.

1. ^ [***a***](#cite_ref-kangax_3-0) [***b***](#cite_ref-kangax_3-1) [***c***](#cite_ref-kangax_3-2) kangax (5 April 2010). ["What's wrong with extending the DOM"](http://perfectionkills.com/whats-wrong-with-extending-the-dom/). Retrieved 6 April 2010.

1. **[^](#cite_ref-4)** Zakas, Nicholas C. (2 March 2010). ["Maintainable JavaScript: Don't modify objects you don't own"](https://www.nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/). Retrieved 6 April 2010.

1. **[^](#cite_ref-DionAlmaer_5-0)** Almaer, Dion (6 April 2010). ["Prototype 2.0 will not extend the DOM"](http://ajaxian.com/archives/prototype-2-0-will-not-extend-the-dom). Retrieved 6 April 2010.

1. **[^](#cite_ref-6)** Resig, John (26 March 2008). ["getElementsByClassName pre Prototype 1.6"](http://ejohn.org/blog/getelementsbyclassname-pre-prototype-16/). Retrieved 6 April 2010.

## Bibliography

- Orchard, Leslie M.; Pehlivanian, Ara; Koon, Scott; Jones, Harley (31 August 2009). [*Professional JavaScript Frameworks: Prototype, YUI, ExtJS, Dojo and MooTools*](http://www.wrox.com/WileyCDA/WroxTitle/Professional-JavaScript-Frameworks-Prototype-YUI-ExtJS-Dojo-and-MooTools.productCd-047038459X.html) (1st ed.). [Wrox Press](/source/Wrox_Press). p. 888. [ISBN](/source/ISBN_(identifier)) [978-0-470-38459-6](https://en.wikipedia.org/wiki/Special:BookSources/978-0-470-38459-6).

## External links

- [Official website](http://prototypejs.org)

v t e ECMAScript Dialects ActionScript Haxe Bosque Caja JavaScript engines asm.js JS++ JScript JScript .NET QtScript Solidity TypeScript WMLScript Engines Carakan Futhark JavaScriptCore JScript KJS Linear B QtScript Rhino SpiderMonkey TraceMonkey JägerMonkey Tamarin V8 ChakraCore Chakra JScript .NET Nashorn Frameworks Client-side Dojo Echo Ext JS Google Web Toolkit jQuery Lively Kernel midori MochiKit MooTools Prototype qooxdoo SproutCore Spry Wakanda Framework Server-side Node.js Deno Bun GraalJS Jaxer AppJet WakandaDB Multiple Cappuccino Libraries Backbone.js SWFObject Underscore.js People Brendan Eich Douglas Crockford John Resig Scott Isaacs Other DHTML Ecma International JSDoc JSGI JSHint JSLint JSON JSSS Sputnik SunSpider Asynchronous module definition CommonJS Lists: JavaScript libraries • Ajax frameworks • Server-side JavaScript Comparison: JavaScript web frameworks

v t e Web frameworks Comparison .NET ASP.NET Core AJAX Dynamic Data MVC Razor Web Forms Blazor DNN BFC MonoRail Umbraco WebSharper C++ Drogon Wt ColdFusion ColdBox Platform Common Lisp CL-HTTP Haskell Servant Snap Yesod Java AppFuse Grails GWT ICEfaces JHipster JWt Mojarra Play Remote Application Platform Seam Sling Spring Stripes Struts Tapestry Vaadin Vert.x Wicket WaveMaker ZK JavaScript Back end Server-side Dojo Express.js Fastify Meteor NestJS Sails.js Full-stack Analog Next.js Nuxt Remix SvelteKit Front end Client-side Angular/AngularJS Backbone.js Blaze Closure Dojo Ember.js Ext JS htmx jQuery Knockout MooTools OpenUI5 Prototype Qooxdoo React React Router Sencha Touch SproutCore Svelte Vue.js comparison... Kotlin Jetpack Compose (Web) Ktor Perl Catalyst Dancer Maypole Mojolicious WebGUI PHP CakePHP CodeIgniter Drupal eZ Publish Fat-Free Flow FuelPHP Grav Gyroscope Horde Joomla! Laminas Laravel li₃ Midgard MODX Phalcon PHP-Fusion PHP-Nuke Pop PHP PRADO ProcessWire Qcodo Silverstripe Symfony TYPO3 WordPress XOOPS Yii Python BlueBream CherryPy CubicWeb Django FastAPI Flask Grok Nevow Pylons Pyramid Quixote Tornado TurboGears web2py Zope 2 more... Ruby Merb Padrino Ruby on Rails Sinatra Rust Rocket Scala Lift Play Scalatra Smalltalk AIDA/Web Seaside Other languages Application Express (PL/SQL) Grails (Groovy) OpenACS (Tcl) Phoenix (Elixir) Shiny (R) Yaws (Erlang)

---
Adapted from the Wikipedia article [Prototype JavaScript Framework](https://en.wikipedia.org/wiki/Prototype_JavaScript_Framework) by Wikipedia contributors ([contributor history](https://en.wikipedia.org/wiki/Prototype_JavaScript_Framework?action=history)). Available under [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/). Changes may have been made.