Prototype JavaScript framework: Prototype Tips and Tutorials

Prototype Tips and Tutorials

Welcome to the Learn section!

This area contains narrative documentation you can use to discover Prototype, acquire skills in specific feature areas, etc.

It is mostly articles and tutorials. You might also want to check out the blog for quick-bite examples. New docs in this section should happen fairly often.

If you are looking for reference documentation, hop over to the API Docs!

• Introduction to Ajax

  Prototype framework enables you to deal with Ajax calls in a very easy and fun way that is also safe (cross-browser). Besides simple requests, this module also deals in a smart way with JavaScript code returned from a server and provides helper classes for polling.

• How Prototype extends the DOM

  The biggest part of the Prototype framework are its DOM extensions. Prototype adds many convenience methods to elements returned by the $() function: for instance, you can write $('comments').addClassName('active').show() to get the element with the ID 'comments', add a class name to it and show it (if it was previously hidden). The 'comments' element didn't have those methods in native JavaScript; how is this possible? This document reveals some clever hacks found in Prototype.

• Introduction to JSON

  JSON (JavaScript Object Notation) is a lightweight data-interchange format (if you are new to JSON, you can read more about it on the JSON website). It is notably used by APIs all over the web and is a fast alternative to XML in Ajax requests. Prototype 1.5.1 finally features JSON encoding and parsing support.

• Defining classes and inheritance

  In the early versions of Prototype, the framework came with basic support for class creation: the Class.create() method. Until now the only feature of classes defined this way was that the constructor called a method called initialize automatically. Prototype 1.6.0 now comes with inheritance support through the Class module, which has taken several steps further since the last version; you can make richer classes in your code with more ease than before.

• Contribute

  Think you found a bug? Got some handy code you think would fit awesomely in the framework? Or do you have what it takes to optimize some important method — or even a whole module — making it more flexible, powerful or speedy? Then prove your JavaScript-fu by contributing to Prototype!

  We welcome any (and all!) of these:

  • bug reports;
  • failing tests proving some feature is broken in certain cases;
  • code patches;
  • enhancement requests and patches;
  • additional tests for code that you believe hasn't got enough coverage;
  • API documentation contributions;
  • ideas and other interesting discussions on the mailing lists or in the IRC channel.

• Upgrading to the latest stable release

  If you’ve put off the task of upgrading your old code to the latest stable release of Prototype, now you’re out of excuses. Since version 1.6, Prototype comes with with an update helper that will warn you of any deprecations or API changes.