Home  >  

Prototype.js Utility Functions Primer

Author photo
November 11, 2008 | | Comments (1)
AddThis Social Bookmark Button

Prototype is one of the more popular JavaScript libraries and is used on a number of popular HTML based web applications, like Twitter and Apple's mobile me.

Prototype.js began as a spin-off of Ruby on Rails, but it can be used with any web development platform.

Here is a great introduction to prototype.js from Scott Raymond:

The Prototype JavaScript framework by Sam Stephenson is designed to ease development of dynamic web applications. It extends core JavaScript classes and adds new ones to provide powerful features, especially for working with Ajax and manipulating DOM elements. In many ways, it also bridges part of the gap between the JavaScript and Ruby languages—particularly by borrowing ideas from Ruby's Enumerable module.

The most useful functions in prototype are the "utility methods".

$(element) is essentially document.getElementById on steroids, it returns and extended element that can use any of the additional prototype methods.

For example, if you would like to hide an element on your page, you could write $(element).hide(); instead of document.getElementById(element).style.display = 'none';

the double dollar function - $$(CSS Selector) - is also a very useful function. It returns a collection of extended elements that use the CSS Rule. In addition to CSS Selectors the double dollar function can can return an array.

For example if you wanted to return an array of every link on your page that has an href="#", you could use $$('a[href="#"]').

The $w() function lets you create an array without splitting up your items. So you could use $w('dogs cats cows pigs') instead of ['dogs', 'cats', 'cows', pigs'].

the $A() is another very useful array function. If you want to return an array of elements, but do not want to extend the elements then you can use $A(document.getElementsByTagName('tag')).

$F(element) will return the value of from a formField. Remember to use the elements id, not name.

$H() is the prototype hash function. I'll talk about the has function in more detail in later blog posts.

$R() is the prototype range function. It's most commonly used for integer ranges.

For example $R(1,5) would give you a range from 1 to 5.

There you have the Prototype Utility Functions.

In later blog posts, I'll walk through the Prototype.js AJAX functions, which dramatically simplify and streamline writing AJAX calls.

Read more from Jeremy Bierly. Jeremy Bierly's Atom feed

Comments

1 Comments

beiks said:

tephenson is designed to ease development of dynamic web applications. It extends core JavaScript classes and adds new ones to provide powerful features, especially for
online Master Degree & distance learning high schoolworking with Ajax and manipulating DOM elements. In many ways, it also bridges part of the gap between the JavaScript and Ruby languages—particularly by borrowing ideas from Ruby's Enumerable module.

Leave a comment


Tag Cloud

iPad

What's your take on the iPad? (Putting aside the Flash/iPad flame war)

Answer

Latest Features

Recommended for You

@InsideRIA on Twitter

Archives

  • Or, visit our complete archive.  

About This Site

Welcome to the premiere community site for all things RIA sponsored by O'Reilly Media and Adobe Systems Incorporated.