Web | This Site

Learn Prototype
Prototype Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# Prototype Overview

# What is Prototype ?

Prototype is a JavaScript Framework that aims to ease 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 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. This is very simple to do require setup to use prototype library. You have to carry three simple steps:

1. Go to the download page to grab the latest version in a convenient package.

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

That's it. You are ready to use powerful Prototype framework in your web pages.

# How to use Prototype Library?

Now you can include Prototype script as 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>

To understand it in better way you can Try it yourself.

# Why is this tutorial?

A very good documentation for Prototype Framework is available at prototypejs.org then why I'm creating this tutorial ?

The answer is that I have put all the most commonly used functionality together in this tutorial. Second, I have explained all the useful methods along with suitable examples which are not available at the official site.

If you are an advanced user of Prototype Framework then you can directly jump to official website otherwise this tutorial could be a good start for you and you can use it like a reference manual.

Advertisement

Online Image Processing

Indian Baby Names