Prototype – Quick Guide


Prototype – Quick Guide

”;


Previous

Next

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).

Scriptaculous and other libraries, 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 application 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 library −

  • 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>
      <div id = "firstDiv">
         <p>This is first paragraph</p> 
      </div>
      
      <div id = "secondDiv">
         <p>This is another paragraph</p>
      </div>
      
      <input type = "button" value = "Test $()" onclick = "test();"/>
   </body>
</html>

Output