Secondo capitolo del corso di Javascript non intrusivo. Dopo aver pulito il codice HTML, impariamo a raggiungere gli elementi da modificare nella nostra pagina.
Capitolo 2: Raggiungere cosa si vuole cambiare
Per gli sviluppatori Javascript inesperti, l’HTML è come un parco giochi.
HTML:
o nel caso siano un minimo più preparati:
HTML:
Javascript:
In ogni caso, tutti le chiamate di eventi sono nel codice HTML, e se cambia il nome della funzione, è necessario cambiare ogni documento. Inoltre, ogni rollover significa diverso markup che viene aggiunto al peso complessivo della pagina.
Via! Via! - voi demoni delle chiamate di eventi inline
Dimentichiamo per il momento che praticamente ogni effetto di rollover attualmente può essere effettuato via CSS anzichè via Javascript - diciamo che vogliamo usare il seguente markup e creare un rollover per questa immagine:
HTML:
Ora, come cambiare quando il mouse è posizionato sopra a questa?
Scalare i rami del node tree
Ogni documento XML (e questo include HTML) è un albero a nodi (node tree). Un nodo è parte di quest’albero (pensate a un file o una cartella nell’explorer di windows quando esplorate il vostro hard disk). Un nodo può essere dodici cose differenti - per l’HTML solo tre sono realmente interessanti: element, TextNode e AttributeNode.
La nostra attrezzatura da arrampicata
Vediamo quali funzioni e attributi possiamo usare per navigare il node tree di un documento, e come saltare da un elemento all’altro.
Funzioni per raggiungere un elemento nella pagina
getElementById(’elementID’)
restituisce l’elemento con l’ID elementID come un oggetto.
getElementsByTagName(’tag’)
restituisce tutti gli elementi con il nome tag come una array.
Ovviamente le due funzioni possono essere mescolate e integrate. Alcuni esempi:
Javascript:
Strumenti per navigare a partire da un certo elemento
childNodes
restituisce una array con tutti i nodi all’interno del nodo corrente. Sono presenti anche firstChild e lastChild, che sono versioni brevi di childNodes[0] e childNodes[this.childNodes.lenght-1].
parentNode
l’elemento che contiene il nostro nodo
nextSibling
l’elemento successivo allo stesso livello nel document tree.
previousSibling
l’elemento precedente allo stesso livello nel document tree.
Tutte queste funzioni possono essere mescolate secondo necessità.
Javascript:
Attributi e funzioni per gli elementi
attributes
data
nodeName
nodeType
nodeValue
getAttribute(attribute)
Javascript:
Ora per raggiungere l’immagine del nostro esempio, possiamo usare sia getElementsByTagName che getElementById.
HTML:
Usare getElementById è decisamente più semplice, in quanto non è necessario ciclare attraverso tutti gli elementi e trovare un identificativo univoco. In questo esempio, controlliamo che l’attributo src dell’oggetto immagine contenga ‘home.gif’. Una tecnica comune è di cercare una classe speciale.
HTML:
Javascript:
Ora, per aggiungere un effetto rollover, tutto ciò di cui abbiamo bisogno è di aggiungere una funzione che effettui lo scambio della sorgente dell’immagine, e aggiunga il gestore di evento all’immagine.
Javascript:
Prova questo esempio su onlinetools.org
Buono per il momento, ma abbiamo dimenticato una cosa: oltre ad essere un mero elemento grafico, un rollover dovrebbe funzionare anche in assenza di un mouse. Per ottenere questo, dobbiamo controllare se il collegamento attorno all’immagine ottiene o meno il focus, dato che l’immagine stessa non è raggiungibile tramite tastiera quando incastonata in un link.
Per fare questo, abbiamo bisogno di raggiungere l’elemento che contiene l’immagine, in questo caso il collegamento. Faremo questo tramite il comando parentNode. Dato che questo cambia l’oggetto che verrà inviato come parametro alla funzione roll(), abbiamo bisogno di trovare nuovamente l’immagine. Quindi compieremo un ciclo attraverso i childNodes del collegamento e cercheremo quale di questi è un elemento e una immagine, controllando nodeType e nodeName. Questo è necessario, in quanto alcuni browser interpretano lo spazio bianco nel codice sorgente come un nodo, a differenza di altri.
Javascript:
Prova questo esempio indipendente dal mouse su onlinetools.org
Perchè non provi?
Esercitazioni consigliate online alla pagina
http://www.onlinetools.org/articles/unobtrusivejavascript/chapter2.html
