Writing Javascript for humans beings with Prototype--tutorial.jcwcn.com

Javascript, as most of us knows is a scripting language based on the concept of prototype-based programming. The language is best known for its use in websites. If we go back 5 years, Javascript was something like Microsoft's authority, as Internet Explorer was the authority browser. They distorted the Javascript in any shape they wanted, and don't even bothered to have a documentation on their MSDN.

As new browsers borning, they are following standards and its becoming more hard to write multi browser compatible javascript. So Sam Stephenson created the Prototype JavaScript framework in February of 2005, this framework made the life of many developers even easier. Now a days, a lot of web applications are using Prototype. Some famous are Digg, FeedBurner, Amazon, Alexa and many others. So I think its time to get rid of non-human javascript and enter the new world of Javascript, which revolved around Prototype.

I will write about 5-6 more part of this articles that will include advance usage of Prototype. In this article, I have discussed basics of Prototype.

Before you read this article, I am assuming that you are pretty much fimiliar with Javascript and you are here to switch to a painless javascript. The latest version of Prototype can be downloaded from the prototype site. Simply download prototype.js and link it to your pages with a <script> tag:

Lets Get Started

One nice thing about using Prototype is that it provides very simple functions for common tasks. The best example is "$" function. This function takes element ID(s) and return a references to them. For example,

$('header') // will return reference to the element with the ID 'header'

$('header', 'navigation', 'footer') // will return an array of element references

Another powerful function of Prototype is "$$". With this function, you can select elements using CSS selectors. Here are few examples

$$('div') // will return all DIVs in the document. Same as document.getElementsByTagName('div')

$$('li.nav') // will return all LI elements with class 'nav'

$$('#contents a[rel]') // will return all links inside the element of ID "contents" with a rel attribute

$$('a[href="#"]') // will return all links with a href attribute of value "#"

While having a big form, "myForm.myInputElement.value" really sucks. Prototype have got a very handy function for it. "$F" takes an ID of any form element and return its value.

$F('authorWebsite') // will return www.google.com

This is not end, Prototype have more handy functions. "document.getElementsByClassName" is another example. As we can conclude from its name that this function returns the list of element with the class name you provide.

document.getElementsByClassName('nav') // will return all elements with class 'nav'

document.getElementsByClassName('nav', $('sidelinks')) // will return all elements with class 'nav' and inside the element with ID 'sidelinks'

In this article, I discussed the very basics of Prototype. But this was just the first part. In next part of this article (which is supposed to be published on next weekend), I will discuss the "String", "Number" and "Array" methods that Prototype provides. So stay tuned and keep checking the website.

Writing Javascript for humans beings with Prototype

Lets Get Started

See Also

relation tutorial

Category

New

Hot