Classes and Functions that extend Javascript Classes
Created by: Will, Last modification: 27 Dec 2005 (12:28 UTC) by xing
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.
<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); },
var watcher = new CheckboxWatcher('myChk', 'Changed'); </script>
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.
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.
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.
<script> //declaring the class var MySampleClass = Class.create();
//defining the rest of the class implmentation MySampleClass.prototype = { initialize: function(message) { this.message = message; },