To sum up our previous discussions and examples, the most common uses of Javascript fall into these general categories:
- responding to user-generated “events” (e.g. “mouseover”, “mouseout”, “click”, “submit”, “keypress”, “keyup” events)
- responding to other types of browser events (e.g. “load”, “error” “resize” events)
- doing mathematical calculations
- changing the style of elements on the screen (either individual CSS styles, or swapping entire CSS classes)
- making elements appear/disappear from the page (e.g. by toggling the CSS “display” property between “block” and “none”)
- image swaps (i.e. changing an image’s “src” attribute for mouseover effects, or for slideshow effects)
- detecting what a user has entered in a form
- determining whether a given expression is true or false, and running some Javascript depending on the result (e.g. if/else statements)
Javascript is Horribly Inconsistent
You should be aware that there are significant inconsistencies in how the major web browsers handle Javascript. There are also inconsistencies and bugs within each browser’s support of Javascript. Until only a few years ago, Javascript developers often had to write several sets of code: one for each of the browsers they wanted to support. Although this still happens, it is not as common, due to the popularity of a few Javascript “Frameworks”, which simplify coding practices.
Javascript Frameworks
Thankfully, a few altruistic developers have created these Javascript libraries (scripts written in Javascript) whose sole purpose is to smooth out these inconsistencies in the browsers’ support of Javascript so that regular developers no longer have to worry about them. This is achieved by creating a layer of abstraction between the code the Javascript developer writes, and the actual code that is eventually run in the browser.
Javascript framework as an abstraction layer
You, the developer, write code using the intuitive-looking functions and objects provided by the Javascript framework. The Javascript framework then converts your nice clean Javascript code into the horrible mess that the browser’s Javascript engine actually understands.
Thus, the frameworks hide the complexity of the buggy browser implementations from the average developer. The frameworks include functions and objects that your code can call instead of calling the buggy built-in Javascript functions and objects. You write one set of code using those functions and objects, and it runs as you would expect it to regardless of which browser you’re using.
Behind the scenes, rest assured that the framework is determining which browser you are using and running idiosyncratic code that is known to work for that browser, but you don’t need to (or want to) know that.
In addition to smoothing out the inconsistencies and differences in each browser’s Javascript implementation, the frameworks also offer some shortcut ways of doing common programming tasks. These shortcuts expedite development and make developers’ lives at least a little bit more enjoyable.
Prototype and JQuery
Four independent (and competing) frameworks that serve this purpose are Prototype, JQuery, YUI, and MooTools. Each provides much of the same functionality as far as we are concerned, although they achieve it in slightly different ways. In this class, we will be using JQuery, although everything we will be doing with it can also be done in any of the other frameworks (and in fact, anything we do with any Javascript library can be done – with much difficulty – in plain Javascript, since the libraries are themselves written in plain Javascript).
No related posts.