Per gli studenti della Ia e Ib Itis Volta Frosinone: questa volta vi lancio in acque profonde!
Al solito, per comodità, dal momento che l'interfaccia del programma non occupa molto spazio sullo schermo, l'ho inserito anche in questa pagina utilizzando un tag "iframe".
Il programma crea, premendo il tasto "Tabellina", una tabella pitagorica di 15 righe e 15 colonne. Il tasto "Clear" la cancella. Nulla di sensazionale, ma è un pretesto per insegnarvi il DOM.
Il DOM (Document Object Model) viene creato dal browser quando la pagina html viene caricata. Potete pensare al DOM come a uno schema della pagina, costruito dal browser mentre la carica. In pratica il browser "prende appunti" e memorizza al suo interno uno schema in cui ogni tag è rappresentato da un pallino (nodo), e i tag che si trovano al suo interno sono altri nodi che vengono chiamati "childnodes" (nodi-figlio). Per capirci, prendiamo in esame la pagina html dell'esempio, che riporto qui sotto:
<!DOCTYPE html>
<html>
<head>
<link href="cssDoc.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="jsDoc.js"></script>
</head>
<body>
<button onclick="document.getElementById('demo').appendChild(makeTable(15,15))">Tabellina</button>
<button onclick="deleteTable()">Clear</button>
<p align="center" id="demo"></p>
</body>
</html>
Lo schema di questa semplicissima pagina è il seguente (a parte la dichiarazione di tipo <!DOCTYPE html>.
Il nodo <html> ha due figli (childNodes): <head> e <body>. A loro volta <head> e <body> hanno rispettivamente 2 (<link> e <script>) e 3 (<button>, <button> e <p>) childNodes. Questo schema, ovviamente memorizzato in formato digitale, è il DOM della pagina.
Per la cronaca, ma ne parleremo più diffusamente in un altro post, osserviamo che ogni nodo (node) può avere degli "attributi". Ad esempio, il nodo <p> ha l'attributo "id", il cui valore è in questo caso "demo".
I programmatori dei browsers, oltre a fornire la capacità di creare uno schema della pagina, rendono disponibili un set di metodi per manipolare i nodi. Ad esempio, se un nodo ha un attributo "id" (poniamo con il valore "demo") noi possiamo individuarlo (cioè ottenere un riferimento ad essso) e memorizzare tale riferimento in una variabile (se questo ci fa comodo) con l'istruzione:
var x = document.getElementById("demo");
Ora vi presenterò, e spiegherò, alcuni metodi che ho usato per realizzare il programmino oggetto del nostro studio.
- var tbl= document.createElement("table"); //crea un tag <table>
- var row= document.createElement("tr"); //crea un tag <tr>
- var col= document.createElement("td"); //crea un tag <td>
Si noti che il metodo createElement("tag") appartiene all'oggetto document. In altre parole, non posso scrivere solo createElement("tag"), ma devo necessariamente scrivere document.createElement("tag"). Il che significa: crea l'oggetto (il nodo) "tag" utilizzando il metodo createElement("tag") dell'oggetto (nodo) "document".
InZomma: nel DOM i nodi sono degli "oggetti". Dice: ma che è un "oggetto"? Semplice: la mia mano è un "oggetto", e ha il metodo "sganciaUnCeffone", che invocherò se non mi saprete rispondere all'interrogazione. E' più chiaro adesso?
Un "oggetto" può anche avere delle proprietà. Ad esempio, la mia mano ha la proprietà "dimensioni", il cui valore è lievemente superiore al quello della mano di Roma (ossia l'"oggetto" alunno di cognome "Roma").
Dopo aver creato un nodo occorre assegnargli un papà (se preferite: genitore 1). Se, ad esempio, vogliamo che il noto "table" abbia come papà (sia figlio di) il nodo "p" con l'"id" di valore "demo", possiamo scrivere:
var tbl= document.createElement("table");
var demo = document.getElementById("demo");
demo.appendChild(tbl);
Naturalmente, siccome la "table" che abbiamo creato non ha (ancora) righe e colonne, non vedremo una beneamata fava. Per vedere qualcosa dovremo aggiungere almeno una riga con almeno una colonna. Cosicché il codice diventa:
var tbl= document.createElement("table");
var row= document.createElement("tr");
tbl.appendChild(row);
var col= document.createElement("td");
row.appendChild(col);
var demo = document.getElementById("demo");
demo.appendChild(tbl);
A questo punto vedremo... la solita beneamata fava! Già, perché abbiamo una tabella, con una riga e una colonna (una cella), ma dentro non c'è scritto niente. Cosa volete metterci nell'unica cella della tabella? Un testo? Va bene. Allora aggiungiamo al codice precedente:
var t = document.createTextNode("il prof è completamente pazzo");
col.appendChild(t);
e il gioco è fatto. Volete di meglio? Ci volete mettere un'immagine? E allora scriviamo:
var myImg=document.createElement("img");
myImg.setAttribute("src", "http://www.w3schools.com/js/pic_htmltree.gif");
demo.appendChild(myImg);
Il codice completo (con il javascript, in grassetto, inserito direttamente nella pagina html) è il seguente:
<!DOCTYPE html>
<html>
<body>
<button id="myBtn" onclick="myFunction()">Cliccami</button>
<button id="clearBtn" onclick="document.getElementById('demo').innerHTML='';">Clear</button>
<script>
function myFunction() {
var demo = document.getElementById("demo");
if(demo.innerHTML!=""){return(null);}
var myImg=document.createElement("img");
myImg.setAttribute("src", "http://www.w3schools.com/js/pic_htmltree.gif");
demo.appendChild(myImg);
}
</script>
<p id="demo"></p>
</body>
</html>
Il risultato è questo:
Il minimo che vi chiedo, per ora, è di scegliere un'immagine migliore. Conoscete le mie preferenze, non deludetemi.
Conclusioni
Siete affogati? Non credo proprio. In classe vi spiegherò meglio, con il poco tempo che abbiamo e tutti i limiti della situation. Un giorno capirete perché la scuola pubblica è ridotta come sapete, e spero che farete qualcosa per rimediare. Quando le cose cambieranno io sarò sotto terra: pensate anche a me il giorno della vittoria.
