Andrea Gandino

Per diversi motivi, fino a non molto tempo fa l’equazione Javascript = sgradevole era quasi immediata, merito del fatto che lo stesso linguaggio di scripting era usato prevalentemente per compiti che non gli sarebbero dovuti competere.

Oggi le cose sono un po’ differenti. Se infatti XHTML è per il contenuto della pagina e CSS per la sua resa grafica, è grazie al DOM che è possibile regolarne quello che definiamo il comportamento della pagina stessa, ovvero analizzare e modificare la struttura di un documento XHTML tramite delle funzioni Javascript.

Pertanto, se prima Javascript veniva impropriamente utilizzato per realizzare animazioni, generare contenuto e via discorrendo, ora è bene tenere a mente che tale linguaggio può e deve scendere in campo per fare ben altro, ovvero dare una mano ai fogli di stile.

Sì perché i fogli di stile e le funzioni DOM di Javascript hanno molto in comune, essenzialmente perché entrambi fanno la stessa cosa, ovvero andare a recuperare elementi specifici grazie a particolari selettori.

Dato questo forte parallelismo tra CSS e Javascript, è chiaro come il secondo possa dare una mano enorme al primo.

E’ possibile, ad esempio, replicare i selettori del CSS in Javascript, e caricare il nostro file di script nel momento in cui carichiamo anche la nostra pagina.

La cosa importante da tenere a mente è che non dobbiamo far svolgere a Javascript i compiti che sono propri di CSS, bensì mettere CSS in condizione di poter arrivare dove normalmente non potrebbe.

Un esempio tipico è quello di avere una tabella che si vuole realizzare alternando il colore delle righe che la compongono.
In CSS3 avremo un selettore molto potente, :nth-child, che è in grado di rappresentare tutti gli n-esimi elementi di un genitore, con possibilità di fare una selezione tra tutti i nodi e prendere, ad esempio, solo quelli ‘pari’ (:nth-child(2n)).

Ma CSS3 è ancora molto lontano all’orizzone e non potendo fare una previsione su quando riusciremo finalmente ad utilizzarlo su base quotidiana, dobbiamo in qualche modo arrangiarci.

L’approccio classico è quello di aggiungere/non aggiungere una classe per ogni riga della tabella tramite il linguaggio con cui la pagina è stata generata (es. PHP).

Tuttavia ciò risulta essere pesante e di più difficile manutenzione, visto che andrebbe fatto x volte, dove x è il numero delle tabelle che rendere con l’effetto desiderato.

Una via, a mio modo di vedere, più saggia è quella di utilizzare Javascript per lo scopo preposto: se la tabella presenta un attributo id, allora facciamo in modo che il nostro script prenda l’elemento caratterizzato da quell’identificatore, e in un loop aggiunga una classe a tutti gli elementi tr pari che sono figli di quell’elemento.

In altre parole: prendo una tabella, ne considero le righe e alternatamente applico una classe per variarne il colore di sfondo.

function stripe_rows(id) {
    var table = document.getElementById(id);
    var tbody = table.getElementsByTagName('tbody');
    var rows = tbody[0].getElementsByTagName('tr');
    for(var i=0; i<rows.length; i=i+2) {
        rows[i].className = rows[i].className + " myClass";
    }
}

In questo modo, riconducendoci a quanto detto in precedenza, otteniamo un triplice vantaggio:

1. il contenuto informativo della tabella è reso tramite un markup assolutamente ridotto allo stretto necessario, non avendo nulla che possa risultare superfluo.
2. lo stile continua ad essere gestito tramite il foglio di stile.
3. il comportamento della tabella è frutto dell’impiego di Javascript.

A mio modo di vedere, sarebbe meglio però non utilizzare un id per identificare la tabella che vogliamo modificare, bensì una classe. Sfortunatamente, il DOM non ci mette a disposizione una funzione per prendere tutti gli elementi che hanno una determinata classe; ne esistono tante fatte dagli utenti, come quella illustrata in un altro post apparso di questo sito.

Potendo avvalerci di tale funzione, il nostro script risulterebbe essere:

function stripe_rows(className) {
    var tables = document.getElementsByClassName(className);
    for(var j=0; j<tables.length; j++) {
        tbody = tables[j].getElementsByTagName('tbody');
        rows = tbody[0].getElementsByTagName('tr');
        for(var i=0; i<rows.length; i=i+2) {
            rows[i].className = rows[i].className + " myClass";
        }
    }
}

Ecco che con questa semplice funzione associamo un particolare comportamento a tutte le tabelle presenti nel nostro documento, lasciando al foglio di stile il compito di regolarne l’apparenza, come potete vedere nel piccolo esempio che ho preparato.