Andrea Gandino

Bello Javascript. Bello davvero. Peccato che in passato lo si sia utilizzato in tutti i modi meno quelli in cui sarebbe stato saggio usarlo.

L’uso che facciamo oggi di Javascript è molto differente rispetto al passato. Per farla breve (brevissima!), esiste una cosa che si chiama DOM e che rappresenta l’albero di qualsiasi documento XML (e dunque anche XHTML), un albero che è modificabile tramite opportune funzioni presenti in molti linguaggi di programmazione. Javascript è in questa lista.

Iper-semplificando la faccenda, un documento XML è formato da tanti nodi, i quali possono o non possono avere dei genitori, e possono o non possono avere dei figli. Si chiama radice l’unico nodo che non ha genitori, si chiama figlio qualsiasi nodo che abbia un genitore, si chiama foglia quel nodo che non ha figli.

Ora, in XHTML ci troviamo a lavorare con una serie di nodi che noi chiamiamo elementi o tags. Bene, una volta che la pagina è stata caricata e quindi visualizzata nella finestra del vostro browser, è possibile dunque andare ad intervenire sul markup che l’ha generata.

Come? Vediamolo introducendo le due funzioni base proprie del DOM su Javascript.

Funzioni di base del DOM

Dunque iniziamo col dire che ogni funzione creata dall’utente viene ‘chiamata in causa’ al caricare della pagina, o in corrispondenza di quelli che sono detti ‘eventi’.

Il caricare della pagina è qualcosa di automatico, mentre gli eventi sono tutta quella serie di movimenti del mouse che l’utente compie all’interno della finestra del suo browser.

Il nodo generico è detto Element. Ad Element corrispondono due funzioni fondamentali; esse sono in grado di restituire un array di altri n Element, tutti figli del nodo che ha ‘invocato’, se così possiamo dire, la funzione.

Il nodo che può invocare la funzione può essere sia un nodo specifico (es. un tag specifico della nostra pagina), oppure il nodo generico document, che cercherà all’interno dell’intero documento i nodi che rispettano i parametri dati alla funzione.

Semplificando, se il nodo x chiama la funzione, la funzione ritornerà una serie di noti figli di x; se la funzione è chiamata da document allora l’array ritornato conterrà tutti i nodi figli di document.

Da notare che anche i nodi figli dei figli sono, formalmente, figli del nodo da cui ha origine la ricerca, e pertanto vengono inclusi nell’array restituito dalla funzione.

Le funzioni base per gestire un albero DOM sono:

Element.getElementById(id)

La funzione ritorna il nodo figlio di Element che ha l’attributo id uguale a quello specificato come parametro.

Element.getElementsByTagName(tagName)

La funzione ritorna tutti i nodi figli del nodo Element che sono caratterizzati dall’avere come tag quello indicato da tagName. Se per esempio volessimo prendere tutte le righe (tr) di una tabella, invocheremmo la funzione così: getElementsByTagName('tr').

Esiste un carattere jolly, che permette di ottenere tutti i nodi figli di un elemento: tale parametro è la stringa '*'.

Probabilmente, un esempio sarà d’aiuto per rendere le cose più chiare. Ritorniamo dunque all’idea del prendere una tabella e le relative righe.

Sappiamo che la tabella è marcata nel nostro documento col tag table e che le sue righe sono rappresentate da tanti elementi con tag tr. Ora, pensiamo di avere più tabelle. Diciamo che vogliamo prendere soltanto le righe della tabella che ha l’attributo id uguale a “statistiche”. Ecco il codice che gestirà il tutto:

document.getElementById('statistiche').getElementsByTagName('tr');

Il codice qui sopra è, per inciso, l’analogo di quello che con i CSS sarebbe

#statistiche tr

ma sulle similitudini tra CSS e Javascript torneremo in un altro articolo.

Ok, a questo punto dovremmo essere in grado di prendere, sebbene per vie un po’ tortuose, ogni elemento presente nella nostra pagina. Le funzioni Javascript per il DOM comprendono anche alcune funzioni invocabili dagli elementi, ovvero:

getAttribute(attributeName)

Ritorna il valore dell’attributo con nome specificato

setAttribute(attributeName, value)

Aggiunge o setta il valore dell’attributo attributeName

removeAttribute(attributeName)

Rimuove l’attributo con nome specificato

Se volessimo aggiungere l’attributo lang alla tabella con id uguale a “statistiche”, avremmo:

document.getElementById('statistiche').setAttribute('lang', 'en');

A differenza del CSS quindi il Javascript può andare a modificare l’albero DOM, aggiungendo e rimuovendo sia elementi, sia, come in questo caso, attributi degli stessi.

What’s in a (class)name?

Se riprendiamo il parallelo fatto in precedenza con i selettori del CSS, ne manca uno all’appello, vale a dire quello per classi.

Tuttavia, Javascript non ci mette a disposizione una funzione del tipo getElementsByClassName, ed è per questo motivo che dobbiamo noi industriarci a crearne una e ad includerla nei nostri script.

In particolare, è comunque possibile creare una funzione ed associarla al nodo document:

document.nomeDellaFunzione = function () {
    // ... codice della funzione ...
}

così che, una volta creata, sarà possibile chiamarla nello stesso modo delle altre funzioni predefinite viste in precedenza (ma non invocarla dai singoli elementi, bensì solo da document).

Ad ogni modo, quando si parla di getElementsByClassName l’implementazione che segue è frutto del lavoro di un po’ di gente diversa e dovrebbe fornire una soluzione di compatibilità accettabile:

function getElementsByClassName(startNode, classname) {
    var out = new Array();
    var re = new RegExp('(^| )'+classname+'( |$)');
    var elements = startNode.getElementsByTagName('*');
    for(i=0; i<elements.length ; i++) {
        if(re.test(elements[i].className)) out[out.length]=elements[i];
    }
    return out;
}

Il discorso ovviamente non si ferma qui, perchè bisogna vedere cosa farci con gli elementi che abbiamo imparato a selezionare: altro materiale per un altro articolo. (Ho la tentazione di intitolarlo “DEF di Javascript e DOM”, fermatemi!)

Utilizzo

Regola d’oro: quando scrivete delle funzioni Javascript è bene farlo in un file esterno (il perchè sia bene farlo, e alcuni dettagli di accessibilità che entrano in gioco usando Javascript, presumibilmente saranno trattati in un’altra occasione), con estensione .js.

Così, se abbiamo creato la funzione d’esempio myFunction(), possiamo dire al browser di lanciarla non appena ha finito di caricare la pagina corrente, come precedentemente accennato, in questo modo:

window.onload = function() {
    myFunction();
}

Infine, per includere i vostri file nella pagina XHTML che state realizzando, è sufficiente inserire questa riga di codice, all’interno del tag head:

<script type="text/javascript" src="/percorso/del/file.js"></script>