The Art & Science Of JavaScript64
var amount = 10;
// timeout in milliseconds
var timeoutdelay = 1000;
The first two variables allow us to change the values of the id attributes that were adding to the
initial link, and to the generated list of bookmarks, respectively, should we want to do so. We then
define our loading…” messagethis will be added to the link text as a span element while the
bookmarks are being retrieved from the server. Weve also pulled a few other key values,
which define the scripts operation, into configuration variables; these values include the number
of links that are to be shown, and the time (in milliseconds) that our script should wait before as-
suming that the server cannot be reached.
Next, we define a variable that will serve as a reference to the original link to our page:
deliciousbadge.js (excerpt)
// stores the link that was clicked
var o = null;
Although weve initially assigned it a value of null, this variable will provide us with a handy
shortcut thatll prevent us from having to type document.getElementById every time a method
needs to access the link.
Defining Public Methods
Well only need a few public methods, most of which are helpers:
deliciousbadge.js (excerpt)
/* public methods */
return {
// addEvent by Scott Andrew LePera
addEvent:function(elm, evType, fn, useCapture) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
65Creating Client-side Badges
The first method is Scott Andrew LePeras addEvent, which allows us to apply event handlers to
elements on the page in a cross-browser fashion. This method will allow us to delay the running
of our scripts initialization method until after the window has finished loading, without having to
resort to inline JavaScript.
In our initialization method, we have to check whether or not the DOM methods that we plan on
calling are in fact supported:
deliciousbadge.js (excerpt)
// init - checks for DOM and element support
if(document.getElementById && document.createTextNode){
o = document.getElementById(badgeid);
If we get the green light to use these methods, we store our link element in the variable o. If we
hadnt defined o in the main script beforehand, it would be a global variable (something to be
avoided, if at all possible).
Next we need to confirm that our link really exists, and that it is indeed a link (that is, an anchor
deliciousbadge.js (excerpt)
if(o && o.href) {
deliciousbadge.addEvent(o, 'click', callData, false);
As the code above demonstrates, we perform this check by verifying that the object represented by
o (the link) is present on the page, and that it has an attribute called href. Checking for the presence
of the href attribute makes sure that the element with an id of badgeid really is a link and not
something else (a div or a p, for example). Assuming that everything is in order, we can safely add
to our link a click event handler that will execute the callData method when its triggered.
The Art & Science Of JavaScript66
Figure 2.5 shows the badge before it has been clicked. As you can see, the status bar displays the
link destination when the user mouses over the link.
Figure 2.5. Clicking the link will run the callData method
The last two public methods deal with the JSON returned from the dynamically generated script
deliciousbadge.js (excerpt)
// retrieveData - stops timeout and sends the JSON dataset
If the connection to the server was successful, the code we get back will execute the
retrieveData method and send the object containing our bookmarks as a parameter. If this happens,
we need to stop our timeout and call the displayData method to show the bookmarks.
If there was a problem with the connection, the fallback timeout will call the failure method:
deliciousbadge.js (excerpt)
// failure - follows the link if there was a 404
failure: function() {
window.location = o.getAttribute('href');
This method halts the timeout and instead sends the visitor to the web site by assigning
the URL thats stored in our links href attribute to the window objects location property.

Get The Art & Science of JavaScript now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.