L’avvento dei CSS ci ha permesso di iniziare a sviluppare pagine in cui potevamo separare gli stili dalla struttura. Questa separazione dello stile dal contenuto non solo rende i nostri documenti più facili da gestire ma ci dà anche la possibilità di modificare il rendering stilistico della pagina semplicemente sostituendo il suo foglio di stile.
Per le stesse ragioni per cui è auspicabile la separazione dello stile dalla struttura all’interno di un documento HTML, è altrettanto utile (se non di più) separare anche il comportamento dalla struttura.
La tecnica
Questa strategia, conosciuta con il nome di JavaScript non intrusivo (Unobtrusive JavaScript) è stata coniata nel 2002 da Stuart Langridge nell’articolo “Unobtrusive DHTML, and the power of unordered lists” in cui propone un modo per tenere tutto il codice JavaScript, compresi i gestori di eventi, al di fuori del codice HTML.
La tecnica è stata quindi portata alla ribalta dagli inventori di jQuery ed ora è abbracciata da tutte le librerie JavaScript più importanti.
Il JavaScript non intrusivo considera le espressioni JavaScript incorporate nel <body> delle pagine HTML, sia come attributi degli elementi HTML (come ad esempio onmouseover) sia in blocchi di script collocato all’interno del corpo della pagina, non corrette. I sostenitori della tecnica affermano che lo scopo del codice nel corpo della pagina è quello di descrivere la struttura di un documento, non il suo comportamento.
Essi sostengono anche, che i gestori di eventi in linea sono più difficili da usare e mantenere, quando si ha la necessità di impostare diversi eventi su un singolo elemento (funzionalità estesa con il modello eventi del DOM Level 2). Né possono essere utilizzati con eventi personalizzati.
Inoltre con struttura, stile e comportamento separati all’interno della pagina, la leggibilità e la manutenibilità del codice sono massimizzate.
Esempio
Tradizionalmente, JavaScript è stato posto spesso in linea con il markup di un documento HTML. Vediamo un classico pulsante al cui click andremo a cambiare il font di un’altro elemento:
<button
type="button"
onclick="document.getElementById('bersaglio').style.color='orange';">
Cambia colore
</button>
Aggiorniamo ora lo script con la tecnica del JavaScript non intrusivo spostandolo quindi il blocco di script nella sezione <head> della pagina, al di fuori del campo di applicazione del corpo del documento, andando così a realizzare la separazione del contenuto dal comportamento:
<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById('mioPulsante').onclick = function() {
document.getElementById('bersaglio').style.color = 'orange';
};
};
</script>
Modifichiamo anche la parte HTML perchè dobbiamo aggiungere un selettore (id) al nostro pulsante perchè possa essere appunto selezionato dalla parte di script, ed andremo a togliere l’attributo onclick dall’elemento:
Ho aggiunto lo script nel gestore onload perché dobbiamo fare in modo che l’elemento pulsante esista prima di usarlo.
Tutto questo però non avviene senza un prezzo! Avrete già notato che ci sono voluti poche righe di script per raggiungere il nostro obiettivo quando l’abbiamo messo nel codice pulsante. JavaScript non intrusivo può invece aumentare il numero di linee dello script da scrivere. Tuttavia i benefici ripagheranno abbondantemente tale sforzo.
Visto che come accennato in precedenza buona fetta di importanza nella propagazione della tecnica la dobbiamo a jQuery, vediamo come ottenere lo stesso risultato sfruttando la sua potenza ed andando a diminuire drasticamente la quantità di codice da scrivere. Naturalmente anche in questo caso lo script risiederà nell’<head>.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#mioPulsante").click(function(){ $("#bersaglio").css("color","orange"); });
});
</script>
In questo caso ho sostituito il gestore onload con il più performante ready di jQuery, ed ho utilizzato il suo metodo click() per associare il gestore evento all’evento JavaScript click dell’elemento pulsante.
Struttura della pagina web
Concludiamo dicendo che secondo lo schema del JavaScript non intrusivo, idealmente, una pagina HTML dovrebbe essere strutturata come mostrato nella figura sottostante, con la struttura, lo stile e comportamento ognuno all’interno del proprio settore.
Risorse
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
“Unobtrusive DHTML, and the power of unordered lists”
http://www.onlinetools.org/articles/unobtrusivejavascript/