So far, we have described most of the key aspects and features of JavaScript including object-oriented programming, DOM, AJAX. There were various practical examples.
It’s time for another extremely important step: JavaScript Frameworks. And here comes the real fun (and a considerable saving of time).
JavaScript Frameworks
We briefly present the solutions well known by us in practice. Then we will successively describe them, showing its main features, examples, tricks and tutorials.
Let’s get down to specifics.
Prototype JavaScript Framework
Interesting and extensive JavaScript library, developed since many years. It contains many excellent solutions supporting operations on the DOM, AJAX programming, and others. By the way, this is the first JavaScript framework which I had used widely in my projects.
Example:
– $() — the “dollar” function, is used as a shortcut to the getElementById method. To refer to the DOM object in the HTML page:
$("my_element").style.display = "none";
This and other features are also present in other libraries.
– $F() — returns the value of a form field. E.g. for a text field (element) it returns the value of this field:
$F("form_element_id");
– $$() — the “double dollar” function is an engine of CSS selectors. You can use the same selectors, which are used in the stylesheet.
For example, if we want to refer to the <a> tag of the foobar class, we will write:
$$("a.foobar");
The function returns a collection of matching elements.
AJAX object offered by Prototype, is portable between browsers. It has two main methods: Ajax.Request() and Ajax.Updater().
Example — Ajax.Request:
var url = "http://www.foobar.com/path/script.php";
var myAjax = new Ajax.Request(url, {
parameters: {
firstname: $F("firstname"),
age: $F("age")
},
onSuccess: function(t) {
alert(t);
},
onFailure: function(t) {
alert('Error…');
}
});
Prototype library website.
The script.aculo.us library
It is available under the X11 license, and the base for this library is the Prototype JavaScript framework, so they are often seen together.
Aculo.us extends Prototype JS with animations and various visual effects, or the elements of the user interface based on the Document Object Model (DOM).
jQuery
Powerful (but not huge or slow) and mature JavaScript framework. Among the whole range of features, among others, greatly facilitates the use of common JavaScript operations (including manipulation of the DOM tree), or the great support for AJAX.
jQuery allows you to achieve interesting animation effects, add dynamic page changes, perform AJAX calls, and much more. There is also a huge amount of plugins and scripts based on jQuery.
All results achieved with the help of jQuery can also be achieved without its use. However, the JavaScript code based on “jQ” is incomparably shorter, less complicated, portable (cross-browser), and modern.
Website of the jQuery framework.
jQuery UI
This library is an extension of jQuery with a rich set of graphical components and widgets, such as date and color pickers, drag&drop, tabs, progress bar, graphic effects and others, which are ready and easy to install in our project.
Website of jQuery UI.
jQuery Mobile
You get the impression that it is a mobile version of jQuery, but it’s not quite as it seems. jQ Mobile is a JavaScript framework that extends jQuery of additives useful (and even necessary) to create Web applications, that work with mobile devices.
The library supports, among others, events or UI elements typical for mobile devices.
Website of jQuery Mobile.
Adobe Spry
A JavaScript and Ajax framework from Adobe. Very rich, with many details, such as effects (animations, shaking, etc.), support for processing XML, JSON, HTML, XML, and a lot of widgets.
This library is recommended especially for designers and XHTML/CSS developers, because it allows to achieve the effect quickly, with minimal contact with JavaScript.
Website of Adobe Spry library.
MooTools
“My Object-Oriented Tools”, modular and interesting JavaScript library. The main and obligatory part is core.js.
Other libraries (extensions) are optional.
MooTools is composed of many modules. That approach allows users to retrieve only the parts of the library, which they intend to use. These modules can be basically divided on:
– Core — a set of utility functions necessary for other modules,
– Class — a basic library for creating classes,
– Natives — native classes,
– Element — working with DOM,
– Effects — advanced API to animate elements,
– Remote — tools for working with XMLHttpRequest, cookies and JSON,
– Window — function for windows handling.
Website of MooTools.
Dojo
The Dojo Toolkit is a powerful programming library for JavaScript. Considered as a set of tools, and in this regard differs from libraries such as Prototype JS.
It contains many components as a system of widgets and skins. Dojo supports AJAX and interesting functionality, such as storing data on the client side and the server.
Website of Dojo Toolkit.
YUI
Rich, consisting of many components, open-source library. Created by Yahoo!, available under a BSD license.
Ext JS
Another big library, is offering a wide range of possibilities. Available under the GPL or a commercial license.
Summary
The last three libraries can even to overwhelm by the enormity of their abilities. However, we as programmers are not afraid of, and we select the most appropriate solution for our specific applications.
Naturally there is much more JavaScript libraries.
When analyzing JavaScript frameworks, you can easily see how much they help in typical operations, ensuring also code working in many browsers. This will save our valuable time.
Thank you.
Posted in 
Tags: 
