PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Eight Weeks of Prototype: Week 1, Beginning with Prototype

Downloading and Installing Prototype

Prototype is a single JavaScript file that you download and use as a file in your web site. To make use of Prototype, you simply need to load this one file in your HTML code.

Downloading Prototype

The official home page of Prototype is http://prototypejs.org. You can download the current version (which at time of writing is 1.6.0.2) from the download page at http://prototypejs.org/download. The file you download is called prototype-1.6.0.2.js, which you then need to save in your web site file structure.

For the purpose of this article (and subsequent articles in this series), I will assume you have saved this JavaScript file to a directory called /js, and renamed the file to prototype.js (meaning you can upgrade Prototype in the future without having to change your HTML).

For example, if your site was www.example.com the file would be accessible from www.example.com/js/prototype.js. Creating a separate directory in which to hold this file also gives you a place to store your other JavaScript files as required.

Loading Prototype on Your Web Site

Once you have saved the Prototype JavaScript file on your web site you can use it on any of your HTML pages simply by loading that one file. Listing 1 shows the code you would use to load Prototype if you have saved it in the /js directory as described above.

Listing 1 Loading Prototype and viewing the loaded version (listing-1.html)
<html>
    <head>
        <title>Loading Prototype and viewing the loaded version</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
        <script type="text/javascript">
            alert('Prototype ' + Prototype.Version + ' loaded');
        </script>
    </head>
    <body>
    </body>
</html>

In this code listing I have made an alert box appear which shows the version of Prototype loaded using the internal Prototype.Version variable.

Prototype Documentation and Resources

The Prototype web site contains extensive API documentation for Prototype, which you should refer to frequently to help with your own development. You can find this documentation at http://prototypejs.org/api.

In This Article