4 Creare contenuti per il web - Andrea Giachetti

94
all'esecuzione del codice la pagina viene modificata: al posto di “Pippo” comparirebbe scritto
“ciao”. Allo stesso modo si possono variare le proprietà di formattazione con apposite funzioni.
Per esempio, possiamo nel codice Javascript collegato a una pagina HTML definire la funzione:
function ChangeFont(n)
{ document.getElementById("id").style.fontSize = n; }
Anche non conoscendo la sintassi del linguaggio in dettaglio, si può intuire che, quando questa
funzione viene eseguita, le dimensioni del carattere nell'elemento identificato dall'identificatore
“id”, vengono cambiate. Analogamente, quindi, esisteranno funzioni che mi permettono di
modificare tutti gli oggetti nella pagina eseguendo un codice opportuno.
Resta da capire come si possa fare eseguire il codice in funzione di un'azione dell'utente
sull'interfaccia del browser. La risposta è semplice: mediante il Document Object Model del
browser è infatti anche possibile accedere alle azioni operate sugli oggetti. Ad ogni elemento,
cioè, sono associati “eventi” che possono essere associati all'esecuzione di una funzione
Javascript. Tali eventi sono, per esempio, il caricamento di una pagina, il click e rilascio del
mouse sull'elemento, il click semplice del mouse, la sovrapposizione del mouse all'oggetto, la
selezione di parte di testo.
Gli eventi vengono attivati attraverso corrispondenti attributi inseriti nell'elemento HTML. Per
esempio, se viene scritto:
sezione
le proprietà dell'elemento identificato da vengono variate attraverso il movimento del
mouse. Quando il cursore è sopra l'elemento (onmouseover) lo sfondo diventa grigio, quando
esce diventa rosso. La variabile this identifica nel linguaggio Javascript l'elemento in cui ci
troviamo (lo specifico elemento div in questo caso).
Ovviamente un'azione su un pulsante può far modificare anche tutti gli altri elementi del
documento, non solo quello ove si verifica l'azione. Si consideri l'esempio seguente:
In questo caso, l'evento generato da un elemento button, modifica un immagine caricata nella
pagina, selezionato dall'id “personaggio”, cambiando l'attributo corrispondente all'url della
stessa (provare per credere). Anche se son si conoscono in dettaglio i principi della
programmazione, gli esempi mostrati dovrebbero chiarire i concetti base dell'HTML dinamico.