Javascript Mojo

Stuart Langridge has released a couple of very neat new Javascript experiments. sorttable makes any data table on a page “sortable” by clicking the table headers. I’ve seen this effect used to demonstrate Microsoft’s proprietary “behaviors” technology but Stuart’s solution has the advantage of being standards compliant and working across different browsers. Best of all, it follows the principles of inobtrusive DHTML and hooks in to the markup using only a class attribute.

Stuart’s second experiment, JavaScript Event Sheets, is even more interesting. It tackles the problem of attaching events to page elements. The most common way of doing this is with inline attributes, but these require adding behavioural (rather than structural) code to your markup and can lead to additional maintenance costs further down the road. A better alternative is to use the DOM to dynamically add events, which works fine but means tightly coupling the structure of the document to the Javascript that sets up the events. Stuart’s solution is to abstract the logic that attaches events to elements out to a separate file, called a Javascript Event Sheet. This uses CSS style syntax (partially handled by my getElementsBySelector function) to specify how events attached to different elements should be handled. Stuart demonstrates the idea with a common image rollover:

img.rollover {
  mouseover: rollover_handler;
  mouseout: rollout_handler;
}

Stuart’s blog entries concerning the two new experiments are here and JavaScript Event Sheets.

Posted 5th November 2003 at 7:12 pm

15 comments

Wow, great stuff!
Matt - 5th November 2003 20:06 - #
Simon,

Great find. I really like the sortable tables.

But I think you slashdotted kryogenix.org. ;-)
Scott Johnson - 5th November 2003 21:02 - #
The sortable tables don't seem to work in Internet Explorer 5 on OS 9. There's a "Handler could not be removed" error on page load, and the tables aren't sortable.
kirkaracha - 5th November 2003 22:43 - #
It doesn't work in Safari on OS X either - it gives "(event handler ):Undefined value" errors in the debugging log if you turn it on, which really isn't very informative. The great thing about the technique though (in common with all inobtrusive DHTML techniques) is that it doesn't really matter if it doesn't work in a certain browser.
Simon Willison - 5th November 2003 22:51 - #
I seem to remember seeing another table sorting script on Brainjar many moons ago...

...ah, here we are: Table Sorting Demo

insin - 5th November 2003 23:17 - #
Sorry, there is nothing really new here... See http://www.w3.org/TR/NOTE-AS Daniel
Daniel Glazman - 5th November 2003 23:25 - #
any sample for a javascript to be able to read or write a file on web server? I need that script on my site. Please help
tommy - 6th November 2003 00:06 - #
Tommy - that can't be done without having some kind of server side script (in a language such as PHP) running on the server which the Javascript can interface with in some way.
Simon Willison - 6th November 2003 00:58 - #
Why is there always some loser that has to inform us that... "There's nothing new here" ...? I'll tell you what 'Glaz' as soon as the world finds something new...you'll be the first one we contact, ok..? NF
neverfails - 6th November 2003 02:25 - #
Daniel, Hey, that's neat. I didn't realise that the W3C had already done something like this. Does anything at all support it? It would be pretty simple to poke my jses script to be compliant with the Action Sheets spec proposal...
sil - 6th November 2003 06:41 - #
You could use the abbreviated syntax for objects and put the rules directly in Javascirpt. Wouldn't that load faster and require less hacks for browser compatibility? i.e. (Warning: incomplete and just now make up):
```
var rules = new Array();
rules.add = new Function();
rules.parse = new Function();

rules.add({
  selector: "ul.nav",
  onmouseover: "fun1",
  onclick: "fun2"
});

rules.add({
  selector: "ul.nav li",
  onmouseover: "fun1",
  onclick: "fun3"
});

rules.parse();
```
P.S. I can't post comments on Stuart Langridge's web log for some reason... :-?

Jimmy Cerra - 6th November 2003 07:58 - #
neverfails: easy ranter eh ? Check this list. That's my personal list of contributions to standards. Find the BECSS entry, it's the standardized version of Action Sheets + Microsoft HTCs. The Merovingian could answer in a more cursive way, but I'll only say "bien le bonjour du loser". It just happens I work on exactly the same subject 5 years ago, and THAT allows me to say there is nothing new here, despite of the sure quality of the code and the interest of the implementation. That's not pejorative at all, that's factual.

sil: Action Sheets are not a W3C spec but a Netscape spec submitted to the W3C. It eventually became BECSS, discussed by Netscape, MSFT and Electricite de France, and that's now back on the table of the CSS WG.

Simon: your comment script refuses entities.... I needed an eacute somewhere ;-)

Daniel Glazman - 6th November 2003 16:23 - #
Daniel Glazman,

"That's my personal list of contributions to standards."

So? Stop blowing your own trumpet. I couldn't care less what *you've* achieved, if all you do is belittle others' efforts. So you made a statement of fact. Couldn't you do it with a little more humour, rather than sounding like the established expert on whatever?

Your tone is likely to aggravate people. It worked on me ;)

Tim - 7th November 2003 15:13 - #
Tim, Daniel didn't belittle others' efforts. He just said that the idea was not new, there has been made already a proposal in the same way. Then he got flamed by neverfails that he is a loser. Then, Daniel is a bit stupid in the sense that he is defending himself (I personally think it is better to ignore flamers). I think that someone earns respect for what he has achieved. Not if he belittles others' efforts, but I really don't see it here. By the way, I think it is a bad idea to mix javascript with css in this way. The xbl proposal is enough for me.
Martijn - 7th November 2003 23:57 - #
Martijn - I guess it's all in the eyes of the perceiver...fair enough - if you didn't think DG was being arrogant, that's fine. Maybe I was a bit harsh!

Daniel G - my apologies. I went off the deep end a bit, there. KUTGW.

Tim - 10th November 2003 10:51 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/11/05/mojo

Simon Willison’s Weblog

Javascript Mojo

15 comments