Esempi di unobtrusive Javascript
Mercoledì 28 Marzo, 2007Come promesso ecco qualche esempio concreto di unobtrusive Javascript, strumento davvero potente e versatile se usato a dovere. Sul sito/Blog di Ryan Johnson è possibile scaricare due esempio davvero ottimi di unobtrusive Javascript:
- Control.Tabs : Unobtrusive CSS Tabs for Prototype
- Control.Modal : Unobtrusive CSS Modal Windows and Lightboxes for Prototype
Ryan Johnson, nei suoi script, fa uso della libreria Prototype, come molti del resto. Ha scritto anche alcune estensioni relativamente alla Prototype, poi introdotte - in forma diversa - nell'ultima versione della libreria.
Usare Prototype per illustrare il funzionamento di codice unobtrusive Javascript è generalmente più comodo - come vedremo più avanti, tuttavia ecco un primo esempio grezzo che non richiede nessuna librerie esterna. Cominciamo ricordando che il concetto che sta alla base del unobtrusive Javascript è quello di partire da una qualsiasi pagina HTML (standard e non necessariamente scritta da noi - altro importantissimo punto di forza) e sfruttare Javascript per apportare alcune modifiche.
Schematimamente il concetto è quello di eseguire una funzione che analizza il codice HTML, attraversa quindi il DOM e in punti particolare aggiunge o modifica funzionalità. Normalmente si sfruttano due metodi per eseguire codice Javascript al caricamento di una pagina: il primo è quello che non racchiudere il codice in nessuna funzione e quindi lasciare che il browser esegua immediatamente il codice caricato nel punto in cui compare la chiamata:
-
<script>alert("Hello");</script>
Stesso risultato lo si ottiene includendo il codice:
-
<script src="http://miosito.com/miocodice.js"></script>
Tuttavia quando si deve operare sul DOM di una pagina si presuppone che essa si a completamente caricata, cioè che tutti i TAG della pagina sia presenti e disponibili per essere rintracciati. Così la soluzione migliore diventa quella di essere sicuri che la pagina sia completa. Ciò è possibile agganciandosi all'evento onload del TAG body ad esempio, che viene rilasciato quando il caricamento della pagina è completo.
-
window.onload = miafunzione;
-
// oppure, che è lo stesso
-
window.onload = function() { alert("Hello"); }
Da evitare, ovviamente, la soluzione canonica che definirla intrusiva sarebbe un eufemismo:
-
<body onload="miafunzione()">
Altra tecnica, più rozza e ugualmente intrusiva (in quanto costringerebbe l'utente finale a posizionare il codice in un punto particolare), è quella di inserire il nostro script alla fine del documento, prima della chiusura del Tag body; tecnica oramai obsoleta e usata in rari casi (vedi Google Analytics!).
Ancora meglio è usare il metodo qui sotto:
-
if (window.addEventListener) {
-
window.addEventListener("load", miafunzione, false);
-
} else if (window.attachEvent) {
-
window.attachEvent("onload", miafunzione);
-
} else {
-
window.onload = createSubMenus;
-
}
Anche questo frammento di codice non è racchiuso in una funzione. Esso aggiungerà un event listener per l'evento load della finestra, richiamando la nostra funzione miafunzione(). I browser moderni, come FireFox ad esempio, useranno la funzione addEventListener() definita nella specifica DOM Level 2, mentre Internet Explorer userà la sua funzione proprietaria attachEvent(). Tuttavia non siamo ancora alla perfezione: in questa maniera, infatti, si rimpiazzeranno tutti gli - eventuali - eventi onload creati da altri script, il che non è proprio "non intrusivo".
Per risolvere rapidamente la questione, che per via dei diversi comportamenti dei browser sarebbe quantomeno complicata da esporre qui, conviene usare libreirie come Prototype che forniscono un'elengantissimo metodo per superare il problema:
-
Event.observe(window, 'load', function() { alert("Hello"); } );
La sintassi è davvero ovvia e spettacolare! Il vantaggio, per chi non lo avesse capito, è quello di poter scrivere:
-
Event.observe(window, 'load', function() { alert("Hello 1"); } );
-
Event.observe(window, 'load', function() { alert("Hello 2"); } );
Al caricamento della pagina verrà mostrato prima l'alert "Hello 2" e poi l'alert "Hello 1". In pratica si carica in modo FILO (First Input Last Output) un stack, garantendo comunque l'esecuzione di tutti gli eventi agganciati al load del documento, esattamente quello che si voleva ottenere. In questo modo una pagina può caricare - virtualmente - infiniti unobtrusive Javascript che si agganciano alla load del documento.
Ma cosa si può fare con questa tecnica? Molte cose interessanti. Un esempio che possiamo commentare (vedi anche Prototype: l'uso del doppio dollaro ($$)) ci viene da Tobie Langel. Con poche righe di codice e scaricando le librerie Prototype e Scriptaculous si può dare un simpatico effetto ai classici anchor delle nostre pagine. Prima di tutto create una pagina HTML con il seguente codice:
Includete nella pagina:
-
<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
-
<script src="scriptaculous-js-1.7.0/src/effects.js" type="text/javascript" charset="utf-8"></script>
-
-
<script type="text/javascript" language="javascript1.2">
-
Event.observe(window, 'load', function() {
-
$$('a[href^=#]:not([href=#])').each(function(element) {
-
element.observe('click', function(event) {new Effect.ScrollTo(this.hash.substr(1));
-
Event.stop(event);
-
bindAsEventListener(element))
-
})
-
})
-
</script>
Grazie all''uso di Event.observe() e alla funzione doppio-dollaro ($$) è possibile modificare in modo semplice il comportamento del classico anchor. In questo caso viene agganciata una nuova funzione al caricamento della pagina HTML. Quando scatta l'evento load vengono rintracciati nel DOM tutti i link (Tag <A>) con l'href che inizia con cancelletto (#, escludendo quello con solo cancelletto!). A questi elementi viene agganciata una funzione all'evento click, similmente a quanto fatto con la load del documento. A questo punto entra in gioco Scriptaculous che produce un effetto di scroll verso l'elemento punatato dal nostro link - modificato!
volevo solo essere sicuro che non ci fosse qualche altro...
upnews.it ha detto:
undolog » Blog Archive » Esempi di unobtrusive Javascript…
Come promesso ecco qualche esempio concreto di unobtrusive Javascript, strumento davvero potente e versatile se usato a dovere. Sul sito/Blog di Ryan Johnson è possibile scaricare due esempio davvero ottimi di unobtrusive Javascript:
* Control.Ta…