Sources
Help build the largest human-edited directory on the web.
Submit a site - Become an editor
Wikipedia. Licensed under the GNU Free Documentation License.
Are you an expert in this subject? Join the discussion and share your knowledge at Wikipedia.org.
Prototype JavaScript Framework
From Wikipedia, the free encyclopedia
| Prototype JavaScript Framework | |
|---|---|
| Developer | Prototype Core Team |
| Latest release | 1.6 / Nov 7, 2007 |
| Genre | JavaScript toolkit |
| License | MIT License |
| Website | prototypejs.org/ |
The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson that provides an Ajax framework and other utilities. Though available as a standalone library, Ruby on Rails integrates the framework as well as other projects such as script.aculo.us and Rico.
Contents |
Prototype provides various functions for developing JavaScript applications. The features range from programming shortcuts to major functions for dealing with XMLHttpRequest.
Prototype adds a new method for creating classes and extending existing classes. This is made at the library level.
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'});
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$'.
Building on the $() function: the $$() function returns all the elements that match, ie if you wanted all the elements (all the links) you would request them by the following
$$("a")
- Note: returns a list, from there you can do
$$("a").each(Effect.Pulsate);
This will pulsate all the links - similar to blink. Note: Effect.Pulsate is part of Script.aculo.us, not Prototype.
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 value1 = $F("name_of_id_1"); var value2 = $F("name_of_id_2"); var url = "http://yourserver/path/server_script"; var pars = "value1=" + encodeURIComponent(value1) + "&value2=" + encodeURIComponent(value2); var myAjax = new Ajax.Request( url, { method: "post", parameters: pars, onComplete: showResponse });
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 prototype which acts as a blueprint for instances of the class. Finally, old classes can be extended by new classes using Object.extend
var FirstClass = Class.create(); FirstClass.prototype = { // The initialize method serves as a constructor initialize: function () { this.data = "Hello World"; } }; var DataWriter = Class.create(); DataWriter.prototype = { printData: function () { document.write(this.data); } }; Object.extend(DataWriter, FirstClass);
Extending another class:
Ajax.Request.prototype = Object.extend(new Ajax.Base(), { initialize: function(url, options) { this.transport = Ajax.getTransport(); this.setOptions(options); this.request(url); }, // ...snip ... }
Notice the comma at the end before the snip. Since javascript does not have language features for doing extend. Prototype has a method called 'extend' that has two parameters.
- Prototype Javascript Framework home page
- Official Prototype API documentation
- Official Prototype API documentation (PDF book)
- Sergio Pereira's Prototype API documentation
- Prototype Window Library
- Rico - A Prototype Based Library
- Working With Events In Prototype
- Archetype JavaScript Framework: Javascript Framework based on Prototype
- How well do you know prototype
- Perfection kills - prototype tutorials
- Scripteka - prototype extensions library