You can get Prototype from the Prototype project [PRO1] or the book Prototype and Script.aculo.us [POR1]. To use it in web pages include a line like
The examples in this article use Prototype 1.6.
File person_form.html is a simple example to get started. It is a HTML form that takes a surname and given name and outputs a display name with the Chinese convention of surname before first name. Here is the code:
The script defines a
Person class with the help of the Prototype
method. The function
showDisplayName() looks up the values of the surname and name
form elements using the Prototype
$ utility function, which returns the element in the
document with matching ID. These values are used to create an instance of the
object. The value returned from
person.getDisplayName() is inserted into the
HTML document after any HTML tags have been escaped. The prototype
escapes HTML markup just in case one of our customers misuses our web site by placing
A class in Prototype is similar to other object oriented languages. An instance of a class is
created with the
A namespace in Prototype is similar to a namespace in C++ or a package in Java. A namespace groups different classes and functions into a logical set. Namespaces are not meant to be instantiated.
Iterators are callback functions that are passed to functions that then iterate over a collection.
Collections are generalizations of arrays that can be resized and more easily iterated over than
arrays, especially without having to know the size of the collection. The Prototype
Array object. Prototype
Prototype adds a considerable number of methods for dealing with collections and mixes these in with the
Array object. One of the most commonly used of these methods is the
method which takes a function as an argument and executes that function for each member of the collection.
object, including built-in objects. In particular, it adds many properties and functions to
standard DOM objects. When using the Prototype
$() method instead of
document.getElementbyId() to look up a DOM element you will be guaranteed to get a
DOM element with these extra properties. These make very useful shortcuts. For example to hide
can be abbreviated to
$$ function returns arrays of elements based on CSS selectors. For example, the code
returns all h4 elements with a class of
by adding an
extend() method to
this reference that exists when the function
executes. This is a dynamic concept and can give surprising results to programmers with a Java or
C++ background. This commonly occurs when you pass a callback method to a function to be invoked
later. Prototype adds to methods to
Function to assist with this problem:
Both methods return the bound function.
Prototype provides enhanced string manipulation capabilities for stripping tags, escaping,
transformation, and more. For processing Chinese text string substitution is especially interesting.
match() returns an array of string matches. The
page pinyin_format.html demonstrates the more
powerful and convenient Prototype global substitution
gsub method. In this example the
gsub searches for pinyin strings in the form ni3, hao3, etc and transforms them into the
gsub takes a regular expression consisting of one or more letters followed by a numeral from 1 to 4.
The second argument to
gsub is an anonymous function that looks up the formatted expression
in the associative array
pinyin, if it is there. Here is a screen shot.
There are still some capitalization problems with this example. The Type Pinyin tool at the excellent MDBG [MDBG] site works based on listening for keystrokes. It cannot take text such as 'ni3hao3' cut and paste from another location and format all at once. However, this example type pinyin tool can do that. Some sounds without vowels, such as 呣 (m2, m4) and 嗯 (ng2, ng4), are problematic for both tools.
function document.observe('dom:loaded', function) can be used to perform initialization
actions after the HTML DOM has been loaded. In fact, it is necessary to wait for the HTML DOM to load
before connecting events to handlers. The
observe() function registers an event handler
for an element. We do this rather than put code for
onLoad directly in the HTML
observer() to validate a simple form.
The HTML page for the code is in file form_event.html.
The script connects the form submit event for form with id
myForm to the event handler
checkForm. When the form is submitted the alert box is shown.
Prototype provides a
serialize() method on
Form.Element and a
Form to assist with using AJAX to process form
submission. These encode the data with MIME type
which is what server side technologies work with.
There are also methods for JSON and XML data encoding.
request() method submits a form using AJAX. The return
type of the method is an
Ajax.Request object. The
initiates and processes an AJAX request. An
Ajax.Response object manages callbacks.
Ajax.Update method provides the capability to update a HTML container, such as a
div element with results from an AJAX call.
Copyright Alex Amies 2008. Please send comments to email@example.com.