Introduction
In this day and age, where web sites are becoming more and more dynamic, being able to keep up to that trend is a must. While server-side scripts such as PHP can create dynamic pages, it lacks the ability to interactively interact with the user. That is where JavaScript comes up. JavaScript allows you to dynamically update the content of a web page without the need of a page refresh.
Despite the benefits, many programmers have stayed away from using JavaScript because they, like CSS, are supported differently from one browser to the other. What might works in Firefox would not work in Internet Explorer. Many of these programmers would just rather ignore the added benefits that JavaScript bring because they don't want to deal with the headaches involved in using them.
This is where JavaScript frameworks such as Prototype and Yahoo! API comes in. They provide cross-browser capitibility for all of their functionalities. So if you code using these frameworks, if it works in one browser, chances are, it will work in other browsers. It isn't always a guanrantee but it is a whole lot better than coding without them. Another great thing about them is that most are open source. A whole community is continually adding features and fixing bugs, thereby creating a stable and polished library.
In this article, my main focus will be on the framework known as Prototype. It is the one that I use to write up all of my JavaScript applications. I have not been using it for very long as the time of writing this, it has been less than a year since I first start using it. However, based on that short experience in time, I cannot tell you how much easier and clean my code has become because I use it. I don't have to worry about functions and properties that only work on a certain browsers. Terrific wrapper classes makes coding so much faster and efficient. I'll be going over some of the features that I have been using and what I think of them.
AJAX
The main reason I started using Prototype was because of its wrapper for AJAX functionalities. Before, anytime that I need to send and receive data in the background of a web page, I have to deal with using the right class and protocol for Internet Explorer and non-Internet Explorer browsers as they were different. Add that in with complicated function handling, among others, I most often find myself giving up or looking for some script written by someone. It is fine when you can find a script that someone else has written and it works for your intended purposes, but when you can't find it, it is a problem.
In come Prototype and its AJAX classes. They make it so easy to use and after reading their short tutorial on how to use it, I was able to program it right away. By the way, you can read that tutorial by click here. Instead of worrying about whether or not the request has been successfully sent, all that I need to worry about is to make sure I am sending the correct URL and any parameters. Once the request has been made, being able to retrieve and process the response was also easy.
Please note that I am not going over how to use it here as you can read their tutorial by following the link above. It provides all the information you need to get started. And if you still need more help, you can take a look at their API as it is well written and covers all the necessary details.
Events Handling
I hated how I had to handle events before using Prototype. Not only was it confusing but it was limited in its ability. There was also the problem of some of my events overwritting my other events which cause havoc to my scripts. Again, Prototype was there to relieve all of my nightmares. Their Event class was like a God send as it standardize how the events handling work. There is no concern of one events overwritting another as they are kept in a queue. Again, they provide a great documentation on how to use it which can be found by clicking here.
Functions Handling
New to Prototype are some of its functions handling functions such as curry and defer. When you are working with functions that are dynamically created within a function, the scope of the this object somestime get lost. But thanks to some of these functions, that can easily be solved by either using the bind or curry function. If you know what currifying a function is, you also know how powerful it can be. Being able to currify functions was a big plus.
Sometimes you want to have a function run at some intervals and the only way to do that was with window.setTimeout. But again, that is limited in what it can do and can really make the source code looks painful. The newly added PeriodicalExecuter fixes that problem. Just specify the function and the interval at which it should run and you are all set. And if you only need it to run once after the page loads, then you can just use the function defer.
I personally have not used much of these functions handling functions but from what I have used, it is truly powerful and it had allowed me to do some otherwise very complicated applications. Again, they provide plenty of detailed explanations and examples of these which can be found in their API.
DOM Elements
Chances are, if you are using JavaScript, it is because you want to add, remove, or modify an element within the DOM structure of the web site. Prototype provides so many functions to make this so much easier. Creating and modifying these elements are now generally just one line of code. Retrieving data from the elements has never been easier and the same can be said of setting CSS styles and attributes.
What's Next
And with that, we have come to the conclusion. Prototype is a powerful and still growing framework. If you want to include JavaScript in your web site, there isn't any reason why you shouldn't use it (remember, it is free too). It is one of those things that only brings you benefits with no hidden costs. So I urge you to go the the Prototype homepage, download it, and read all the articles and documentations they have. It is a complete knowledgebase and it will only get better. And with that, I am now also available to start writing articles that actually uses Prototype as the backbone of JavaScript applications.