Anyone who has kept up with the advancements of JavaScript knows the Prototype library. For those who don’t know, it’s a JavaScript library that wraps a whole bunch of functionality into easy to use (and remember) “shortcuts” for doing things like getting elements on a page, manipulating said elements, and dealing with data. It’s all written in JSON notation and allows you do things like:

$('element-id').addClassName('active').show();

Instead of

var element = document.getElementById('element-id');
    element.className = 'active';
    element.style.display = 'block';

Anyway, things like Prototype, jQuery, Dojo, and YUI all provide some convenience to writing custom JavaScript applications. I haven’t dug super deep into any of the frameworks’ source (mostly because the code has been somewhat obfuscated and “compressed” to save space), but I imagine that they all have one thing in common; they make use of the prototype property to extend both existing and custom built objects/classes in JavaScript.

The prototype Property

Even if you don’t make heavy use of one of the afforementioned framework/toolkits, using the prototype property to extend existing JavaScript objects and/or classes can be quite useful. Say you want an easy way to print out a date. Rather than createing a separate function, just extend the Date object itself.

Date.prototype.months = new Array(
    {name: "January",   abbrev: "Jan", number: "01"},
    {name: "February",  abbrev: "Feb", number: "02"},
    {name: "March",     abbrev: "Mar", number: "03"},
    {name: "April",     abbrev: "Apr", number: "04"},
    {name: "May",       abbrev: "May", number: "05"},
    {name: "June",      abbrev: "Jun", number: "06"},
    {name: "July",      abbrev: "Jul", number: "07"},
    {name: "August",    abbrev: "Aug", number: "08"},
    {name: "September", abbrev: "Sep", number: "09"},
    {name: "October",   abbrev: "Oct", number: "10"},
    {name: "November",  abbrev: "Nov", number: "11"},
    {name: "December",  abbrev: "Dec", number: "12"}
);
Date.prototype.dow = new Array(
    {name: 'Sunday',    abbrev: 'Sun', number: "01"},
    {name: 'Monday',    abbrev: 'Mon', number: "02"},
    {name: 'Tuesday',   abbrev: 'Tue', number: "03"},
    {name: 'Wednesday', abbrev: 'Wed', number: "04"},
    {name: 'Thursday',  abbrev: 'Thu', number: "05"},
    {name: 'Friday',    abbrev: 'Fri', number: "06"},
    {name: 'Saturday',  abbrev: 'Sat', number: "07"}
);
Date.prototype.getShortDate = function() {
    return this.months[this.getMonth()].abbrev + ' ' + this.getDate() + ' ' + this.getFullYear();
};
Date.prototype.getLongDate = function() {
    return this.dow[this.getDay()].name + ', ' + this.months[this.getMonth()].name + ' ' + this.getDate() + ', ' + this.getFullYear();
};
Date.prototype.getValueDate = function() {
    var d = (this.getDate() < 10) ? '0'+this.getDate():this.getDate();
    return this.getFullYear() + '/' + this.months[this.getMonth()].number + '/' + d;
};

var now = new Date();
document.write(now.getLongDate());

And you get something like this . Handy.

Now, there’s a couple of issues with the above script. One, the names aren’t localized and two, there’s probalby a more efficient way to formatting a date (much like the example on this page). But, it works in all the browsers I tested (Chrome, Firefox, IE7, Safari [Mac]).

You can prototype most of the default objects in JavaScript. Say you have an application the has to validate a bunch of text fields. Prototype the String objects to add built in parsing methods for various fields.

String.prototype.isValidEmail = function() { ... }
String.prototype.isValidPhone = function() { ... }

You get the idea.

The prototype property is a handy little tool. There maybe some limitations between browsers, but overall, it should help simplify your code and prevent repetitive and reduntant methods.

function lastfm()
{
    new Ajax.Request('/as/recenttracks.xml',
    {
        method: 'get',
        onLoading: function() {


    },
    onLoaded: function(transport) {
        if (transport.overrideMimeType) {
            transport.overrideMimeType('application/xml');
        }
    },
    onSuccess: function(transport) {
        var response = transport.responseXML.documentElement;
        updateLastfm(response);
    },
    onFailure: failedLastfm()
});


}

The only issue I ran into was that I was originally using the RSS flavor of recent tracks, however it didn’t split up the artist and track information. It displays it as <title>[artist] – [track]</title>. That en-dash in the middle was preventing me from using title.split() on the JavaScript side of things. Really weird.

Also, since I’m a complete newbie with Ruby, I couldn’t figure out how (read: didn’t take the time to learn) to grab the content from a remote server and serve it up to the JavaScript. I’m sure it’s pretty simple… but I was at work and in a hurry. So, being that I know PHP, I just created a script to download the file and save it to the local disk and setup a cronjob.

Here’s the PHP script:

class lastfm
{
    private $user;
    private $reports;
    private $basews;
    public $saveto;


function __construct($user)
{
    $this->user = $user;
    $this->basews = 'http://ws.audioscrobbler.com/1.0/user/';
    $this->reports = array(
        'recenttracks.xml',
        'weeklyartistchart.xml',
        'weeklytrackchart.xml',
        'topartists.xml'
    );
    $this->saveto = '.';
}

public function go()
{
    for ($i = 0; $i < count($this->reports); $i++)
    {
        try
        {
            $opts = array('http' => array('method' => 'GET', 'header' => 'Content-type: text/plain; charset=utf-8'));
            $context = stream_context_create($opts);

            $fp = fopen($this->saveto.DIRECTORY_SEPARATOR.$this->reports[$i], 'w+');
            $stream = fopen($this->basews.$this->user.'/'.$this->reports[$i], 'r', false, $context);
            $string = stream_get_contents($stream);
            fwrite($fp, $string);
            fclose($fp);
            fclose($stream);
            echo 'Saved ' . $this->saveto.DIRECTORY_SEPARATOR.$this->reports[$i] . "\n";
        }
        catch (Exception $e)
        {
            echo $e->getMessage() . "\n";
        }
    }
}

public function setSaveto($path)
{
    if (is_dir($path))
    {
        if (ereg('\/$', $path))
        {
            $path = ereg_replace('\/$', '', $path);
        }
        $this->saveto = $path;
    }
    else
    {
        $this->createDir($path);
        $this->setSaveto($path);
    }
}

private function createDir($path)
{
    if (!is_dir($path))
    {
        $res = `mkdir -p $path`;
    }
}


}

I’ll hit up the Rails API Docs one of these days and write a simple Ruby script that does all the work of the PHP script. Even better would be to process the XML document using ruby that just returns a string of HTML and use Ajax.PeriodicalUpdater($(e), ...).