Prototype - Overview

What is Prototype ?

Prototype is a JavaScript Framework that aims to ease the development of dynamic web apppcations. Prototype was developed by Sam Stephenson.

Prototype is a JavaScript pbrary, which enables you to manipulate DOM in a very easy and fun way that is also safe (cross-browser).

Scriptaculous and other pbraries, such as Rico are build on Prototype s foundations to create widgets and other end-user stuff.

Prototype −

Extends DOM elements and built-in types with useful methods.

Has built-in support for class-style OOP including inheritance.

Has advanced support for event management.

Has powerful Ajax features.

Is not a complete apppcation development framework.

Does not provide widgets or a full set of standard algorithms or I/O systems.

How to Install Prototype?

Prototype is distributed as a single file called prototype.js. Follow the below mentioned steps to setup the prototype pbrary −

Go to the download page (http://prototypejs.org/download/) to grab the latest version in a convenient package.

Now, put prototype.js file in a directory of your website, e.g. /javascript.

You are now ready to use the powerful Prototype framework in your web pages.

How to Use Prototype Library?

Now, you can include the Prototype script as follows −

<html>
   <head>
      <title>Prototype examples</title> 
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
   </head>
   
   <body>
      ........
   </body>
</html>

Example

Here is a simple example showing how you can use Prototype s $() function to get DOM elements in your JavaScript −

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function test() {
            node = $("firstDiv");
            alert(node.innerHTML);
         }
      </script>
   </head>

   <body>
      <span id = "firstDiv">
         <p>This is first paragraph</p> 
      </span>
      
      <span id = "secondDiv">
         <p>This is another paragraph</p>
      </span>
      
      <input type = "button" value = "Test $()" oncpck = "test();"/>
   </body>
</html>

Prototype - Overview

What is Prototype ?

How to Install Prototype?

How to Use Prototype Library?

Example

Output