Related articles
No articles related to this article found in our database.
Writing Javascript for humans beings with Prototype - Part 1
Introduction
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.
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:
<script type="text/javascript" src="PATH/TO/prototype.js"></script>
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.
<input type="text" name="authorWebsite" value="www.google.com" />
$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.
See Also
Going to start your new website or blog? Try this web hosting search before making any decision. You can find some reliable and cheap web hosting on that site. If you're current hosting needs are exceeding, you can also find dedicated server on that site at a very reasonable price.Bookmark Article
Share Article
Liked this tutorials? Want to put a link on your website, please use following code
About Author
Abdullah Ibrahim AKA designcode is 20 year old web developer having skills over PHP, MySQL, XML, SOAP, AJAX, Javascript, Photoshop, Flash, XHTML and CSS. He loves to create rich web 2.0 applications.Apart from his day time Job as a Software Developer, he also do web designing and development as a freelancer web designer and developer.
In his free time, that he rarely have, he like to read books, listen music and hangout with friends.