Prototype - Overview

What is Prototype ?

Prototype is a JavaScript Framework that aims to ease the development of dynamic web applications. Prototype was developed by Sam Stephenson.
Prototype is a JavaScript library, which enables you to manipulate DOM in a very easy and fun way that is also safe (cross-browser).

Prototype - Useful Features

Let's now look at what Prototype can do specifically for us to develop a Dynamic Web Application.

Cross Browser Support

While doing JavaScript programming, it is required to handle different Web Browsers differently. Prototype Library has been written in such a way that it takes care of all the compatibility issues and you can do cross browser programming without any hassle.

Prototype - Utility Methods

The Prototype library comes with lot of predefined objects and utility functions. You can use those functions and objects directly in your JavaScript programming.
These methods are one of the cornerstones of efficient Prototype-based JavaScript coding. Spend some time to study them to become comfortable with the methods.

Prototype - Element Object

The Element object provides various utility functions for manipulating elements in the DOM.
Here is the list of all the utility functions with examples. All the methods defined here are automatically added to any element accessed using the $() function.
So, writing Element.show('firstDiv'); is the same as writing $('firstDiv').show();

Prototype - Number Processing

Prototype extends native JavaScript numbers in order to provide −

• ObjectRange compatibility, through Number#succ.
• Ruby-like numerical loops with Number#times.
• Simple utility methods such as Number#toColorPart and Number#toPaddedString.
  

Prototype - String Processing

Prototype enhances the String object with a series of useful methods ranging from the trivial to the complex.
Here is the list of all the functions with examples dealing with String.

Prototype String Methods

NOTE − Make sure you have the prototype.js version of 1.6.

Prototype - Array Processing

Prototype extends all the native JavaScript arrays with quite a few powerful methods.
This is done in two ways −

• It mixes in the Enumerable module, which brings a ton of methods in already.
• It adds quite a few extra methods, which are documented in this section.
  

Prototype - Hash Processing

Hash can be thought of as an associative array binding unique keys to values. Only difference is that you can use any string as an index instead of just using a number as index.

Prototype - Basic Object

Object is used by Prototype as a namespace and to call related function using Object object. This is used in the following two ways −

• If you are a simple developer, then you can use the existing functions like inspect or clone.
• If you are one who wishes to create their own objects like Prototype does, or explore objects as if they were hashes, will turn to extend, keys and values.
  

Prototype - Templating

Templates are used for formatting group of similar objects and to produce formatted output for these objects.
Prototype provides a Template class, which has two methods −

• Template() − This is a constructor method, which is used to create a template object and call evaluate() method to apply template.
• evaluate() − This method is used to apply a template to format an object.
  

Prototype - Enumerating

Enumerable class provides a large set of useful methods for enumerations. Enumerations are objects that act as collection of values.
Enumeration methods are mostly used to enumerate arrays and hashes. There are other objects as well like ObjectRange and various DOM- or AJAX-related objects where you can use enumeration methods.

Prototype - Event Handling

Event management is one of the biggest challenges to achieve cross-browser scripting. Every browser has different approaches to handle key strokes.
Prototype Framework handles all cross browser compatibility issues and keeps you free from all trouble related to event management.

Prototype - Form Management

Prototype provides an easy way to manage HTML forms. Prototype's Form is a namespace and a module for all things form-related, packed with form manipulation and serialization goodness.
While it holds methods dealing with forms as a whole, its sub module Form.Element deals with specific form controls.

Prototype and JSON Tutorial

Introduction to JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format.

• JSON is easy for humans to read and write.
• JSON is easy for machines to parse and generate.
• JSON is based on a subset of the JavaScript Programming Language.
  

Prototype and AJAX Tutorial

Introduction to AJAX

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.
For a complete understanding on AJAX, please go through our simple AJAX Tutorial.

Prototype - Expressing Range

Prototype Ranges represent an interval of values. The preferred way to obtain a range is to use the $R utility function.
You can create a big range of values using a simple syntax as follows −

$R(1, 10).inspect();

$R('a', 'e').inspect();

This will produce the following result −

Prototype - Periodical Execution

Many times it is required to execute a function many times after a certain period of time. For example, you may want to refresh your screen after a given time. Prototype provides a simple mechanism to implement it using PeriodicalExecuter object.
The advantage provided by PeriodicalExecuter is that it shields you against multiple parallel executions of the callback function.

Prototype - Quick Guide

Prototype - Overview

What is Prototype ?

Prototype is a JavaScript Framework that aims to ease the development of dynamic web applications. Prototype was developed by Sam Stephenson.
Prototype is a JavaScript library, which enables you to manipulate DOM in a very easy and fun way that is also safe (cross-browser).

Prototype - Useful Resources

The following resources contain additional information on Prototype. Please use them to get more in-depth knowledge on this.

Discuss Prototype

This tutorial gives a complete understanding on Prototype. Prototype is distributed as a single file called prototype.js. Prototype is an object in javascript from which other objects inherit properties.