Practical Prototype and script.aculo.us - Part3

Today i started reading Practical Prototype and script.aculo.us By Andrew Dupont.

Nice book written by Andrew Dupont.

I want to share few quotations i found from this book from next 2 chapters (5-6).

1) Browser-based, event-driven interfaces should be simple. Highlight an element when the user clicks on it.Disable a submit button after a form has been submitted. But reality is harsh in the world of web development. Writing event handlers can feel like building an elaborate set of pulleys to open a window

2) Pre-DOM, Part 1

Let’s travel back in time to 1996—the heyday of Netscape 2.0, the first version to implement JavaScript. Back in the day, this was how you assigned events:

<input type="submit" value="Post" onclick="postBreakfastLogEntry();">

The event assignment was just another attribute in the HTML. On its face, this is a simple and straightforward way to assign events: it makes simple things simple. Unfortunately,it also makes complex things damn near impossible.

First: note that we’re inside a pair of quotation marks. What if we need to use quotation marks in our code?

<input type="submit" value="Post" onclick="postBreakfastLogEntryWithStatus(\"draft\");">

Pre-DOM, Part 2

Such scary times. Let’s jump ahead one year and assign events the way Netscape 3.0 lets us: in pure JavaScript.

// HTML:
<input type="submit" value="Save and Publish" id="save_and_publish">

// JavaScript:
var submitButton = document.getElementById('save_and_publish');
submitButton.onclick = postBreakfastLogEntry;

3) The First Custom Event

Prototype itself fires a custom event called dom:loaded. It fires at a specific time in the page’s life cycle: after the page’s DOM tree is fully accessible to scripts, but before the window’s load event, which doesn’t fire until all external assets (e.g., images) have been fully downloaded.

Use dom:loaded when you want to work with the DOM in that narrow window of time before the page appears on the screen fully rendered. In nearly all cases, it’s better to assign to dom:loaded than load—unless your handler depends upon having everything downloaded and rendered.

This is also a good time to talk about the naming scheme for custom events. You’ve probably noticed that dom:loaded, unlike native events, contains a colon. This is by design—all custom events must contain a colon in their names. Since custom events are handled differently under the hood, Prototype needs a way to distinguish them from native browser events (which number in the hundreds if all major browsers are considered). Embrace the convention.

4) Creating Nodes

Individually, all these methods are simply helpers—convenience methods for repetitive tasks. But when they combine, they form a strong platform that allows for a whole new level of coding. The Element constructor is the Captain Planet of the Prototype DOM extensions—a force greater than the sum of its parts.
Think of the example we’ve been using in a specific context. Suppose we were building a site where a user could select any number of cities and compare some of their qualities. To make the UI snappy, we’d load city data via Ajax and stuff it into our comparison table dynamically. The data itself has to come from the server, but we can offload some of the easier stuff to the client side.

// First, create the row.
var tr = document.createElement('tr');

// We need to "extend" the element manually if we want to use
// instance methods.
$(tr).addClassName('total');

// Next, create each cell individually.
var td1 = document.createElement('td');
td1.appendChild(document.createTextNode('Total'));

var td2 = document.createElement('td');
$(td2).writeAttribute('class', 'number');
td2.appendChild(document.createTextNode(totalPopulation));

var td3 = document.createElement('td');
$(td3).writeAttribute('class', 'code');

// Now append each cell to the row...
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);

// ...and append the row to the table body.
$('cities').down('tbody').insert(tr, 'bottom');

About the Author

ANDREW DUPONT is a UI developer living and working in Austin, Texas. He is a member of the core development team for Prototype, the popular JavaScript toolkit. He has contributed to Prototype in many different ways: writing code and documentation, offering support, and evangelizing to colleagues. In addition, Andrew has spoken about JavaScript at South by Southwest Interactive and other tech industry conferences.

Andrew received liberal arts and journalism degrees from the University of Texas at Austin. He occasionally attended classes, but much preferred the time between classes, during which he experimented with web design and learned about the emerging web standards movement.