Project Write-Up: Parts 1 and 2

Part 1:

Our project initially aimed to be a small javascript toolkit (along the lines of jQuery, but
likely with less features), but we've since changed our goal to provide a simple toolkit for
animating DOM elements on a web page. This will be helpful for web developers who need a middle
ground between a dynamic website with javascript and full-on flash for animation, and it will
provide a simple interface, as its target audience is web developers.

Doing animation in javascript is possible, but quite tedious. A web developer will not want to
deal with setting timeouts and calculating durations and intermediate values in an animation.
One way we aim to simplify this task is by defining "tweens", which is I believe a flash
terminology for an animation where the developer specifies a value to update (such as a div's
width) and the amount to change it by, and the time-span, and the "tween" code will handle
all of the nitty-gritty details.

Why solve this problem? There is indeed an existing solution for jQuery (our solution also will
leverage jQuery's extant, and quite effective, means of manipulating the DOM), but it is quite
simple. The jQuery animation tool is a quick and easy way to alter the CSS attributes of
individual elements in isolation, but it doesn't provide a way to coordinate the animation of
multiple elements. This is exactly what we aim to do—provide an intuitive means of composing
animations of multiple elements.

Part 2:

Since we've already compared our project to the jQuery toolkit's animation tool, I'll describe
how they built their library; the internals of our code are set up in a similar manner.

At the core of jQuery is the "$" function, which returns a jQuery object. It takes a selector,
which can be a variety of things: something to identify a DOM element by CSS properties (e.g.
an equivalent to getElementById) or tag name, a DOM element object itself, or some other rarer
cases.

An example of jQuery code:
$(document).ready(function() {
  $("div").css({'backgroundColor':'blue'}).append("<img src=\"blah\"/>").show();
});

This example demonstrates two types of jQuery selectors. The first passes the javascript object
"document" to the "$" function, and registers an anonymous function to run when the document's
ready event fires. The second call, within the anonymous function, selects all div elements in
the HTML document, changes the background color to blue via CSS, creates an image and appends
it within every div, and then shows the divs (which were perhaps previously hidden with
"hide()").

The implementation of jQuery is, from a high level, fairly simple. It creates an object, called
jQuery, as a function, and all functionality is programmed into this object. It contains all of
the convenience methods of jQuery, which themselves encapsulate handling browser quirks and
whatnot. jQuery also includes its own CSS selection engine for filtering and running regexes
on the page's style sheets. One interesting aspect of the implementation is that the jQuery
object has an "extend" function that can be used to add new fields and methods to the
object, and this method is used to modularize the library—for example, AJAX support and
animations are included via this type of extension. The library is then made accessible
by defining a new field in the existing javascript "window" object—the jQuery object is
assigned to and called by "window.$".

To get an idea of what this looks like, here's some boiled down pseudocode.

var jQuery = window.$ = function(selector) {
  return new jQuery.prototype.init(selector)
}

jQuery.prototype = {
  init: function(selector) { ... },
  attr: function ( ... ) { //either get or set HTML attribute values. },
}
jQuery.extend = jQuery.prototype.extend = function() {
  // do some copying.
}
jQuery.extend({
  ajax: function( ... ) { //do ajax stuff! },
  ...
});

An example for the Animate tool (http://docs.jquery.com/Effects/animate) that shows composition
of animations (but only on a single element!) is shown below:

$("#go2").click(function(){
  $("#block2").animate( { width:"90%"}, 1000 )
     .animate( { fontSize:"24px" } , 1000 )
     .animate( { borderLeftWidth:"15px" }, 1000);
});

Advertisement