Practical Prototype and script.aculo.us - Part2

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 (3-4).

1) The Traditional for Loop

Amazingly, the first version of JavaScript didn’t even support arrays. They were added soon after, but with only one real enhancement over a vanilla Object—a magic length property that would count the number of numeric keys in the array. For example

var threeStooges = new Array();
threeStooges[0] = "Larry";
threeStooges[1] = "Curly";
threeStooges[2] = "Moe";
console.log(threeStooges.length);


The length property and the ubiquitous for looping construct result in a simple, lowtech way to loop over an array’s values: start at 0 and count up to the value of length.

for (var i = 0; i < threeStooges.length; i++) {
console.log(threeStooges[i] + ": Nyuk!");
}

2) Prototype’s Enumerable Object

Prototype defines a handful of functions in an object called Enumerable. Anything that is "enumerable" (anything that can be iterated over) can use these methods. These functions include each (much like the one we defined previously) and many other methods that all hook into each internally. These methods aren’t specific to arrays—they can be used on any collection, as long as we tell them how to enumerate the items therein.

3) Two other Prototype classes that make use of Enumerable are Hash and ObjectRange.Together they serve as great examples of how to use Enumerable with other types of collections.

Hash

There is no built-in facility in JavaScript for setting key/value pairs—the construct that’s known as a hash (in Ruby), a dictionary (in Python), or an associative array (in PHP). There is, of course, an ordinary object, and this suffices for most cases.

var airportCodes = {
AUS: "Austin-Bergstrom Int'l",
HOU: "Houston/Hobby",
IAH: "Houston/Intercontinental",
DAL: "Dallas/Love Field",
DFW: "Dallas/Fort Worth"
};

for (var key in airportCodes) {
console.log(key + " is the airport code for " + airportCodes[key] + '.');
}

4) Turning Collections into Arrays

Enumerable also boasts a generic toArray method that will turn any collection into an array. Obviously, this isn’t very useful for arrays themselves, but it’s a convenience when working with hashes or ranges.

$H({ foo: 'bar', baz: 'thud' }).toArray();
//-> [ ['foo', 'bar'], ['baz', 'thud'] ]
$R(1, 10, true).toArray();
//-> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Keep in mind that using $A, the array-coercion shortcut function, will produce the same result. If an object has a toArray method, $A will use it.

5) XmlHttpRequest (XHR for short) is a JavaScript interface for making arbitrary HTTP requests. It lets a developer ask the browser to fetch a URL in the background, but without any of the typical baggage of a page request—the hourglass, the new page, and the re-rendering.

6) The difference is crucial—the user has to wait around for a page request, but XHR doesn’t. Like the acronym says, Ajax allows for asynchronous communication— the JavaScript engine can create a request, send it off, and then do other things until the response comes back. It’s far better than making your users do other things until the response comes back.

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.