In an era of rich internet applications, drag and drop functionality, and dynamically updating interfaces, it has become difficult for a static website built with HTML and CSS to be noticed. A simple way to bring interactivity to your site is through adding JavaScript.
What is JavaScript?
JavaScript is a language designed to make websites more dynamic. Developed in the 1990s at Netscape, it is now also a web standard known as ECMAscript. Despite its name, JavaScript actually has very little in common with the programming language Java.
JavaScript works either as an “inline” or embedded script inserted directly into the HTML of a webpage or it is used as a file or collection of files external to the HTML. The separate external files are then linked to in the header of the page.
Although both techniques work, linking to external files is the preferred option. This method helps preserve the separate layers of a website design (for example, HTML for content, CSS for presentation and JavaScript for interactivity). It also allows you to host the JavaScript files on another server or a high-bandwidth Content Delivery Network , thereby reducing some of the load on your own server. Two such CDNs are Google’s free Google Libraries API and Microsoft’s CDN.
What is a JavaScript library?
A JavaScript library is a collection of JavaScript files that have been gathered together to assist web designers to create dynamic experiences for users without needing a deep understanding of JavaScript.
The exact features available depends on the individual libraries, and can vary from making it easy to select and change elements on the page such as changing the background on alternate rows in a table, through to widgets like calendars for date selection (useful for booking systems) and rich text editors.
Why use a JavaScript library?
JavaScript libraries are compatible across many browsers, including Internet Explorer 6. This makes the design process easier, removing much of the heartache of ensuring a design provides a consistent user experience across browsers.
The modular design of libraries means that you can include only the scripts that you need. Many libraries also support third-party plug-ins, providing access to a wide range of cross-browser effects like sliders or tabbed windows.
Which library should I use?
Which library to use is a personal choice. Each library is different, and you should experiment with a few of them before you settle on one that suits your workflow and experience.
Some libraries make it easy to identify specific parts of your page and make changes, or select elements of a page due to their relation to other elements (for example, applying formatting to every list element nested inside an unordered list). Libraries that excel at this include jQuery, Prototype or MooTools.
If you want to create rich user interfaces with selectable calendars, tabbed boxes and elements that can be hidden or unhidden, you need a library with more features. Both Prototype and jQuery can be extended for example, with script.aculo.us and jQueryUI respectively.
Another option is to use a JavaScript framework, such as the YahooUI framework or the Sencha framework. Sencha is a combination of the ExtJS and the RaphaelJS libraries, providing a combination of AJAX style rich text editing fields with charts and other graphics capabilities. The YahooUI also includes extra features like special CSS layouts for grid designs.
If you still can’t choose, don’t worry. There is no need to pick just one. It is okay to combine scripts from different libraries if that provides the rich user experience you want for your website.
As simple as that
It really can be as simple as that — find the right library, and start working away. You will need to spend some time reading the help documentation, but there are also many supportive communities, as well as exhaustive online resources.
The modular and cross-browser nature of the different libraries means that you can stop worrying about compatibility and just get on with what you do best – making your website the best it can be for your users.
