And there was Ajax... unobtrusively entering Domino 2.0 blog

Ajax is not only fetching data from the server without reloading the page. It's also adding behaviours to the page after it is loaded. I am a strong believer of unobtrusive javascript (progressive enhancement). All basic functions of this blog will still work if you turn off JavaScript or CSS. I also tried my best to write my JavaScript 'the Ajax way'.

The core functions

Nowadays, writing JavaScript is far from coding functions like:
function doSometing(a){alert('I'm doing something with '+a)}
It's all about object oriented programming, avoiding global namespace pollution and JSON. So I picked one namespace: 'Mme' (some characters of my name) as a Factory object for my coding:

var Mme={ extend:function(a,b){ for(var o in b)a[o]=b[o]; return o }, get:function(a,b){ return(b||document).getElementById(a) }, tags:function(a,b){ return(b||document).getElementsByTagName(a) } }

This gives me access to three very useful functions:

• Mme.extend(obj1, obj2) can be used to add things to an existing object, extending it or overriding its standard properties and functions. Since all things in JavaScript are objects, you can use extend on HTML elements, style, objects, built-in functions and object prototypes.
• Mme.get(id [,document]) is short for document.getElementById() It takes the page's document by default, but you can also get an element from an iframe by specifying the second parameter. I prefer not to use the $() function found in many Ajax libraries.
• Mme.tags(tagName [,object]) is short for: getElementsByTagName(). It takes the page's document by default, but it can also take only the tags within a specific object when specified in the second parameter.

I also enhanced the String object a bit using my new Mme.extend function:

Mme.extend(String.prototype,{ begins:function(a){return this.indexOf(a)==0}, has:function(a){return this.indexOf(a)>-1}, middle:function(a,b){var o=this.split(a);return(o.length<2)?'':o[1].split(b)[0]} })

Next thing is adding generic functions to bind JavaScript behaviour to specific HTML elements. For this, each behaiour has a 'pattern' property, same as a CSS rule but very limited for performance reasons:

• #id binds to the element with this id.
• tag binds to all elements with this tagname.
• [#id] tag binds to all elements with this tagname. If #id is specified, it takes the tags within this element.
• [#id] tag.class takes only the elements with specific tag and className.

So I extended my Mme factory with .init to initialize the Mme, .initLib to initialize a module and .getRange to get the HTML elements that correspond with the pattern.

var Mme={ extend:function(a,b){for(var o in b)a[o]=b[o];return o}, get:function(a,b){return(b||document).getElementById(a)}, tags:function(a,b){return(b||document).getElementsByTagName(a)}, init:function(){var o=this,n;for(n in o)o.initLib(o[n])}, initLib:function(a){ var o,i; if(a.init)a._ready=a.init(); if(a.pattern){ o=a._range=this.getRange(a.pattern) if(o){ if(o.tagName)a.bind(o) else if(o.length){for(i=0;i<o.length;i++)a.bind(o[i])} a._bound=true } } }, getRange:function(a){ var v={id:a.middle('#',' '),clss:a.middle('.',' ')},o,q,i v.tag=(v.id?a.middle('#'+v.id+' ','.'):a).split('.')[0] o=Mme.get(v.id) if(v.tag){ o=Mme.tags(v.tag,o) if(a.middle('.',' ')){q=[];for(i=0;i<o.length;i++)if(o[i].className==v.clss)q.push(o[i]);o=q} } return o }

To finish it off, I launch the Mme.init() when the document is loaded:
window.onload=function(){Mme.init()}. And now the behaviours.

Making links open in another window

One of the first things my boss noticed when he looked at my blog, was that all links opened up in the same window. So if he clicked on a link, he would loose my site. This had a reason: in XHTML, the target attribute of a hyperlink is forbidden. So we need JavaScript to help. When links have the className external, they should open in another window:

Mme.popup={ pattern:'#content a.external', bind:function(a){ a.title='New window: '+(a.title||a.href); a.onclick=function(){window.open(a.href);return false} } }

Protecting e-mails

On my Tangosite, I used to display the e-mail addresses from people who signed my guest book. But not for long: someone scraped all the e-mail addresses of my site and used it to spam. So it's a very good idea to hide the addresses. I change them into "my DOT name AT mycompany DOT org" and change them back to real e-mail addresses with this behaviour:

Mme.mailto={ pattern:'#content a.mailto', bind:function(a){ var v=decodeURI(a.href).replace(/ AT /,'@').replace(/ DOT /g,'.') a.href=v a.title='Send e-mail to: '+(a.title||v.middle('mailto:','@')) } }

So here's my e-mail address, in case you want to send me feedback. Keep in mind that I hardly ever respond to e-mails, unless I know you very well or my job is at stake ;-)

Striped tables

Oh well, everybody loves striped tables, no? Give any table the className stripe and it will get striped even before you can say 'unobtrusive javascript'.

Mme.stripe={ pattern:'table.stripe', bind:function(a){ var o=Mme.tags('tr',a),i; a.cellSpacing=0; for(var i=0;i<o.length;i+=2)o[i].className='odd' } }

Where's the zip you can download? There is none for the moment. It will be available for registered users. I'm still working on the registration. Don't panic: it will be free. I just want to know you before I give you my car keys and let you drive my car :-))