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), ...).