History of PrototypeJavascriptExtensions
{maketoc}
!Extensions to various classes
This collection of classes and functions extends existing Javascript classes and functions. They simplfy such things as manipulating text, adding keyboard commands, adding inheretance, and other random things.
!!Extensions to the JavaScript classes
One of the ways the prototype.js library adds functionality is by extending the existing JavaScript classes.
!!Extensions for the Object class
||Method | Kind | Arguments | Description
extend(destination, source) | static | destination: any object, source: any object | Provides a way to implement inheritance by copying all properties and methods from source to destination.
extend(object) | instance | any object | Provides a way to implement inheritance by copying all properties and methods from the given object.||
!!Extensions for the Number class
||Method | Kind | Arguments | Description
toColorPart() | instance | (none) | Returns the hexadecimal representation of the number. Useful when converting the RGB components of a color into its HTML representation.||
!!Extensions for the Function class
||Method | Kind | Arguments | Description
bind(object) | instance | object: the object that owns the method | Returns an instance of the function pre-bound to the function(=method) owner object. The returned function will have the same arguments as the original one.
bindAsEventListener(object) | instance | object: the object that owns the method | Returns an instance of the function pre-bound to the function(=method) owner object.The returned function will have the current event object as its argument.||
Let's see one of these extensions in action.
{code source=JavaScript}
<input type=checkbox id=myChk value=1 /> Test?
<script>
//declaring the class
var CheckboxWatcher = Class.create();
//defining the rest of the class implmentation
CheckboxWatcher.prototype = {
initialize: function(chkBox, message) {
this.chkBox = $(chkBox);
this.message = message;
//assigning our method to the event
this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
},
showMessage: function(evt) {
alert(this.message + ' (' + evt.type + ')');
}
};
var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>
{/code}
!!Extensions for the String class
||Method | Kind | Arguments | Description
stripTags() | instance | (none) | Returns the string with any HTML or XML tags removed
escapeHTML() | instance | (none) | Returns the string with any HTML markup characters properly escaped
unescapeHTML() | instance | (none) | The reverse of escapeHTML()||
!!Extensions for the document DOM object
||Method | Kind | Arguments | Description
getElementsByClassName(className) | instance | className: name of a CSS class associated with the elements | Returns all the elements that are associated with the given class name.||
!!Extensions for the Event object
||Property | Type | Description
KEY_BACKSPACE | Number | 8: Constant. Code for the Backspace key.
KEY_TAB | Number | 9: Constant. Code for the Tab key.
KEY_RETURN | Number | 13: Constant. Code for the Return key.
KEY_ESC | Number | 27: Constant. Code for the Esc key.
KEY_LEFT | Number | 37: Constant. Code for the Left arrow key.
KEY_UP | Number | 38: Constant. Code for the Up arrow key.
KEY_RIGHT | Number | 39: Constant. Code for the Right arrow key.
KEY_DOWN | Number | 40: Constant. Code for the Down arrow key.
KEY_DELETE | Number | 46: Constant. Code for the Delete key.
observers: | Array | List of cached observers. Part of the internal implementation details of the object.||
||Method | Kind | Arguments | Description
element(event) | static | event: an Event object | Returns element that originated the event.
isLeftClick(event) | static | event: an Event object | Returns true if the left mouse button was clicked.
pointerX(event) | static | event: an Event object | Returns the x coordinate of the mouse pointer on the page.
pointerY(event) | static | event: an Event object | Returns the y coordinate of the mouse pointer on the page.
stop(event) | static | event: an Event object | Use this function to abort the default behavior of an event and to suspend its propagation.
findElement(event, tagName) | static | event: an Event object, tagName: name of the desired tag. | Traverses the DOM tree upwards, searching for the first element with the given tag name, starting from the element that originated the event.
observe(element, name, observer, useCapture) | static | element: object or id, name: event name (like 'click', 'load', etc), observer: function to handle the event, useCapture: if true, handles the event in the capture phase and if false in the bubbling phase. | Adds an event handler function to an event.
stopObserving(element, name, observer, useCapture) | static | element: object or id, name: event name (like 'click'), observer: function that is handling the event, useCapture: if true handles the event in the capture phase and if false in the bubbling phase. | Removes an event handler from the event.
_observeAndCache(element, name, observer, useCapture) | static | | Private method, do not worry about it.
unloadCache() | static | (none) | Private method, do not worry about it. Clears all cached observers from memory.||
Let's see how to use this object to add an event handler to the load event of the window object.
{code source=JavaScript}
<script>
Event.observe(window, 'load', showMessage, false);
function showMessage() {
alert('Page loaded.');
}
</script>
{/code}
!!New objects and classes defined by prototype.js
Another way the library helps you is by providing many objects implement both support for object oriented designs and common functionality in general.
!!The PeriodicalExecuter object
This object provides the logic for calling a given function repeatedly, at a given interval.
||Method | Kind | Arguments | Description
[ctor](callback, interval) | constructor | callback: a parameterless function, interval: number of seconds | Creates one instance of this object that will call the function repeatedly.||
||Property | Type | Description
callback | Function() | The function to be called. No parameters will be passed to it.
frequency | Number | This is actually the interval in seconds
currentlyExecuting | Boolean | Indicates if the function call is in progress||
!!The Prototype object
The Prototype object does not have any important role, other than declaring the version of the library being used.
||Property | Type | Description
Version | String | The version of the library
emptyFunction | Function() | An empty function object||
!!The Class object
The Class object is used when declaring the other classes in the library. Using this object when declaring a class causes the to new class to support an initialize() method, which serves as the constructor.
See the sample below.
{code source=JavaScript}
<script>
//declaring the class
var MySampleClass = Class.create();
//defining the rest of the class implmentation
MySampleClass.prototype = {
initialize: function(message) {
this.message = message;
},
showMessage: function(ajaxResponse) {
alert(this.message);
}
};
//now, let's instantiate and use one object
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //displays alert
</script>
{/code}
||Method | Kind | Arguments | Description
create(*) | instance | (any) | Defines a constructor for a new class||
!Extensions to various classes
This collection of classes and functions extends existing Javascript classes and functions. They simplfy such things as manipulating text, adding keyboard commands, adding inheretance, and other random things.
!!Extensions to the JavaScript classes
One of the ways the prototype.js library adds functionality is by extending the existing JavaScript classes.
!!Extensions for the Object class
||Method | Kind | Arguments | Description
extend(destination, source) | static | destination: any object, source: any object | Provides a way to implement inheritance by copying all properties and methods from source to destination.
extend(object) | instance | any object | Provides a way to implement inheritance by copying all properties and methods from the given object.||
!!Extensions for the Number class
||Method | Kind | Arguments | Description
toColorPart() | instance | (none) | Returns the hexadecimal representation of the number. Useful when converting the RGB components of a color into its HTML representation.||
!!Extensions for the Function class
||Method | Kind | Arguments | Description
bind(object) | instance | object: the object that owns the method | Returns an instance of the function pre-bound to the function(=method) owner object. The returned function will have the same arguments as the original one.
bindAsEventListener(object) | instance | object: the object that owns the method | Returns an instance of the function pre-bound to the function(=method) owner object.The returned function will have the current event object as its argument.||
Let's see one of these extensions in action.
{code source=JavaScript}
<input type=checkbox id=myChk value=1 /> Test?
<script>
//declaring the class
var CheckboxWatcher = Class.create();
//defining the rest of the class implmentation
CheckboxWatcher.prototype = {
initialize: function(chkBox, message) {
this.chkBox = $(chkBox);
this.message = message;
//assigning our method to the event
this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
},
showMessage: function(evt) {
alert(this.message + ' (' + evt.type + ')');
}
};
var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>
{/code}
!!Extensions for the String class
||Method | Kind | Arguments | Description
stripTags() | instance | (none) | Returns the string with any HTML or XML tags removed
escapeHTML() | instance | (none) | Returns the string with any HTML markup characters properly escaped
unescapeHTML() | instance | (none) | The reverse of escapeHTML()||
!!Extensions for the document DOM object
||Method | Kind | Arguments | Description
getElementsByClassName(className) | instance | className: name of a CSS class associated with the elements | Returns all the elements that are associated with the given class name.||
!!Extensions for the Event object
||Property | Type | Description
KEY_BACKSPACE | Number | 8: Constant. Code for the Backspace key.
KEY_TAB | Number | 9: Constant. Code for the Tab key.
KEY_RETURN | Number | 13: Constant. Code for the Return key.
KEY_ESC | Number | 27: Constant. Code for the Esc key.
KEY_LEFT | Number | 37: Constant. Code for the Left arrow key.
KEY_UP | Number | 38: Constant. Code for the Up arrow key.
KEY_RIGHT | Number | 39: Constant. Code for the Right arrow key.
KEY_DOWN | Number | 40: Constant. Code for the Down arrow key.
KEY_DELETE | Number | 46: Constant. Code for the Delete key.
observers: | Array | List of cached observers. Part of the internal implementation details of the object.||
||Method | Kind | Arguments | Description
element(event) | static | event: an Event object | Returns element that originated the event.
isLeftClick(event) | static | event: an Event object | Returns true if the left mouse button was clicked.
pointerX(event) | static | event: an Event object | Returns the x coordinate of the mouse pointer on the page.
pointerY(event) | static | event: an Event object | Returns the y coordinate of the mouse pointer on the page.
stop(event) | static | event: an Event object | Use this function to abort the default behavior of an event and to suspend its propagation.
findElement(event, tagName) | static | event: an Event object, tagName: name of the desired tag. | Traverses the DOM tree upwards, searching for the first element with the given tag name, starting from the element that originated the event.
observe(element, name, observer, useCapture) | static | element: object or id, name: event name (like 'click', 'load', etc), observer: function to handle the event, useCapture: if true, handles the event in the capture phase and if false in the bubbling phase. | Adds an event handler function to an event.
stopObserving(element, name, observer, useCapture) | static | element: object or id, name: event name (like 'click'), observer: function that is handling the event, useCapture: if true handles the event in the capture phase and if false in the bubbling phase. | Removes an event handler from the event.
_observeAndCache(element, name, observer, useCapture) | static | | Private method, do not worry about it.
unloadCache() | static | (none) | Private method, do not worry about it. Clears all cached observers from memory.||
Let's see how to use this object to add an event handler to the load event of the window object.
{code source=JavaScript}
<script>
Event.observe(window, 'load', showMessage, false);
function showMessage() {
alert('Page loaded.');
}
</script>
{/code}
!!New objects and classes defined by prototype.js
Another way the library helps you is by providing many objects implement both support for object oriented designs and common functionality in general.
!!The PeriodicalExecuter object
This object provides the logic for calling a given function repeatedly, at a given interval.
||Method | Kind | Arguments | Description
[ctor](callback, interval) | constructor | callback: a parameterless function, interval: number of seconds | Creates one instance of this object that will call the function repeatedly.||
||Property | Type | Description
callback | Function() | The function to be called. No parameters will be passed to it.
frequency | Number | This is actually the interval in seconds
currentlyExecuting | Boolean | Indicates if the function call is in progress||
!!The Prototype object
The Prototype object does not have any important role, other than declaring the version of the library being used.
||Property | Type | Description
Version | String | The version of the library
emptyFunction | Function() | An empty function object||
!!The Class object
The Class object is used when declaring the other classes in the library. Using this object when declaring a class causes the to new class to support an initialize() method, which serves as the constructor.
See the sample below.
{code source=JavaScript}
<script>
//declaring the class
var MySampleClass = Class.create();
//defining the rest of the class implmentation
MySampleClass.prototype = {
initialize: function(message) {
this.message = message;
},
showMessage: function(ajaxResponse) {
alert(this.message);
}
};
//now, let's instantiate and use one object
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //displays alert
</script>
{/code}
||Method | Kind | Arguments | Description
create(*) | instance | (any) | Defines a constructor for a new class||