Quarta tappa del viaggio verso la completa separazione delle azioni dal codice, dalla logica e dalla presentazione.
Capitolo 4: Come chiamare gli script
La tecnica principale che usiamo per mantenere non intrusivi il nostro Javascript è quella di tenerlo in un singolo file anzichè spargerlo in mezzo al markup della pagina. Per eseguire le funzioni nei nostri file .js abbiamo bisogno di chiamarle quando la pagina è caricata. Questo può essere fatto in diversi modi, ognuno con i propri vantaggi e svantaggi.
La vecchia scuola
Quando eravamo giovani e innocenti, aggiungevamo l’attributo onload all’ elemento body.
Dovremo ricordare che questo è sbagliato e NON farlo mai più!
Se chiamiamo lo script nell’elemento body non abbiamo imparato nulla, dal momento che stiamo ancora mescolando markup e chiamate di eventi. Quello di cui abbiamo bisogno è di separare le chiamate nel file .js
La via della separazione
Possiamo farlo abbinando la chiamata all’evento onload dell’oggetto window.
Usando una sola funzione non avremo bisogno delle parentesi alla fine del nome della funzione, in quanto queste hanno lo scopo di restituire il risultato di una funzione piuttosto che attivare la funzione stessa.
Nel caso in cui sia necessaria più di una funzione, è necessario usare una funzione anonima per chiamare le altre, questa volta con parentesi.
Javascript:
oppure
Questo metodo per chiamare le funzioni ovviamente non è applicabile solo all’oggetto window. Come mostrato precedentemente, possiamo aggiungerlo per ogni oggetto presente nella pagina. Ovviamente se supportato dal modello Javascript/DOM del browser che lo userà.
La via realmente non intrusiva
Esiste la possibilità di aggiungere gestori di eventi a gestori già esistenti. Purtroppo i differenti browsers implementano questa funzionalità in modo differente, mentre IE per Mac non la support affatto.
Scott Andrew ha scritto una bella funzione riutilizzabile che compie esattamente questo, e può essere invocata passando come parametri l’oggetto al quale attaccare un evento, il tipo di evento, e il nome della funzione.
Lo svantaggio più ovvio è che non avrà effetto su IE nei sistemi Macintosh.
La voce di Opera
Ho ricevuto una email dal Supporto Tecnico di Opera che spiega che il precedente esempio era errato, e per questo motivo è attualmente differente da quello presente nel sito di Scott:
The addEvent function is not entirely standards-compliant. It will work for now in FireFox but once they fix this bug it will not work reliably in FireFox anymore. It probably does not do what you want in Opera, it supports the standards correctly. The issue is that you set up a “capturing” event handler by using “true” as the third argument to the addEventListener function:
That true should be false. If it is true, the event listener should not fire for any element the event listener is registered on. For instance, if you use this with a LI element it will not do anything unless the LI has child elements. Test in Opera :)
Altre letture
Gli eventi sono un argomento molto complesso e confuso in Javascript. Per lo sviluppo di siti internet gli esempi qui mostrati saranno sufficienti, ma se si intende sviluppare applicazioni web, probabilmente vorrete andare oltre. Potete seguire i collegamenti nell’appendice link utili per maggiori informazioni sugli eventi e su come applicarli agli elementi.
Proposte di esercizio e articolo originale all’url http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html
Un commento
Ciao,
complimenti per l’articolo…molto interessante…
ti volevo chiedere come è possibile modificare un colore della scritta..
ho questo codice
//controlla se ci sono elementi nella pagina
if (Elements.length > 0){
var element = null;
var styleElem = null;
var textNode = null;
var styleText= "#FF00FF" ;
for (Counter=0; Counter
while(element = Elements[Counter].getElementById(id)) {
element.parentNode.removeChild(element);
}
styleElem = Elements[Counter].createElement("style");
styleElem.setAttribute("id", id);
styleElem.setAttribute("type", "text/css");
textNode = Elements[Counter].createTextNode( styleText );
styleElem.appendChild(textNode);
Elements[Counter].documentElement.childNodes[0].appendChild(styleElem);
}
}
ho provato in questo modo, ma nulla da fare…
riusciresti a darmi qualche dritta?..
grazie!