websql | Re-Cycled Air

Lately I’ve developed a distaste for Javascript. I like what Javascript has done for the web, but I hate the syntax. I hate that there are little “Gotch Ya!”‘s all over the language. I don’t have to worry about that too much anymore though since I’ve started using CoffeeScript. If you interested in learning more about it, check out the official web site, and then my “Getting Started” guide.

Now that I’ve had a chance to dive in to CoffeeScript a bit more, I’ve started to integrate what I’m doing with other features and libraries to see what I can create. For work I’ve been using a lot of WebSQL and jQuery, so that was the first place I took my new found CoffeeScript powers to.

Using jQuery with CoffeeScript is really, really, easy. For instance, let’s say we want to Ajax a page into an array:

$.get("mypage.html", (data) -&gt;
    myArray.push data
)

The syntax changes just a hair, but overall it looks a lot cleaner.

As mentioned previously, the other thing I’ve been doing a lot at work recently was working with WebSQL. It’s been dropped by the W3C, but Webkit has implemented it already so it’s here to stay. Anyways, CoffeeScript makes WebSQL a little more palatable.

#Start a transaction
db.transaction( (tx) -&gt;
    query = "SELECT * FROM table"
    tx.executeSql(query, [], (tx, results) -&gt;
        rLength = results.rows.length
        for(i=0; i &lt; rLength; i++)
            alert results.rows.item(i).someColName
    )
)

With WebSQL and CoffeeScript, the syntax doesn’t change a ton, but I like the look of it better without the braces.

Another feature that I wanted to share with out about CoffeeScript is it’s equivalent to PHP’s key, value loop construct. In PHP, it would look like:

foreach($key =&gt; $value as $myArray) {
    //do stuff
}

In CoffeeScript, the equivalent is:

for own key, value of myArray
    #Do stuff.

The benefit of the CoffeeScript version is that it can loop over object properties as well, not just arrays. If you have any other cool features or examples of CoffeeScript usage, drop a link (or example) into the comments.