Salve a tutti,
come va ? Tutto bene ?
Vorrei proporvi del codice che ho scritto per iniziare la mia (spero proficua) esplorazione del DOM, il Document Object Model che consente di generare e manipolare elementi HTML per la creazione di pagine Web dinamiche (finalmente nel vero senso della parola). Ovviamente, mi sento in dovere di citare le mie fonti di 'ispirazione'. Ecco un pò di link:
http://pro.html.it/articoli/id_227/idcat_33/pro.html
http://www.w3c.org/DOM/
Il codice che ho scritto non fa un granchè ed è molto semplice.
Permette di creare una tabella dal nulla, impostandone tutti i parametri rilevanti (numero di righe e colonne, larghezza ecc.). Ad un occhio attento si noterà come il codice possa essere facilmente potenziato e adattato a qualsiasi esigenza contestuale. Ad esempio, sarebbe stato possibile immettere un controllo sul valore dei dati immessi dall'utente, impostare controlli per le varie prompt e molto altro.
OK, iniziamo l'analisi del codice !
Ho creato una semplice funzione JavaScript che ho chiamato GeneraTabella:
In questo modo, con l'if che leggete, posso capire se il browser supporta alcuni dei metodi basilari proposti dal DOM: in caso negativo verrà visualizzato un semplice avviso circa l'impossibilità di eseguire la funzione. Dopodichè associo alla variabile 'form' il nome del form che contiene i campi dai quali ricavo i parametri per la tabella.codice:<script language="JavaScript" type="text/javascript"> <!-- function GeneraTabella() { if (document.createElement && document.getElementsByTagName) { form=document.mioform;
Questa porzione di codice consente di acquisire, in apposite variabili, i dati della tabella, immessi dall'utente.codice:if (form.attiva.value=='Crea!') { form.attiva.value='Elimina!'; nrighe=form.nrighe.value; ncolonne=form.ncolonne.value; larghezza=form.vlarghezza.value+form.tlarghezza[form.tlarghezza.selectedIndex].value; if (form.tlarghezza[form.tlarghezza.selectedIndex].value=='px') larghezzacella=Math.floor(form.vlarghezza.value/ncolonne)+'px'; else larghezzacella=Math.floor(form.vlarghezza.value/ncolonne)+'%'; bordo=form.bordo.value+'px'; marginecelle=form.mcelle.value; spaziocelle=form.scelle.value;
Ecco il DOM in azione: ho creato un elemento TABLE, ho ricavato un riferimento al tag BODY e, infine, ho creato un TBODY, il 'corpo' della tabella che stiamo creando. Dunque, grazie al metodo createElement siamo in grado di creare un'istanza di qualsiasi elemento HTML semplicemente specificandone il tag. Il metodo getElementsByTagName, invece, restituisce un array contenente tutti gli elementi della pagina contraddistinti da un certo tag. Nel nostro caso, con .item(0) accedo al primo elemento di tale vettore, che contiene un riferimento al tag BODY, unico del suo genere in una pagina Web.codice:tabella=document.createElement('TABLE'); corpo=document.getElementsByTagName('BODY').item(0); corpotab=document.createElement('TBODY');
Questi due cicli for innestati rappresentano il cuore della funzione. Quello esterno si occupa di creare le righe (tag TR), mentre quello interno fa lo stesso con le colonne (tag TD). Il metodo appendChild consente di appendere letteralmente un elemento a un altro andando a creare una vera e propria struttura gerarchica, mentre setAttribute consente di manipolare un attributo specifico di un qualsivoglia elemento HTML Al termine di ogni iterazione del ciclo interno, dunque, la cella creata viene 'appesa' alla riga, e poi il ciclo esterno passa alla sua nuova iterazione. Alla fine di entrambi i cicli, avremo in 'corpotab' tutto il contenuto della tabella.codice:for (i=0; i<nrighe; i++) { riga=document.createElement('TR'); for (j=0; j<ncolonne; j++) { cella=document.createElement('TD'); cella.setAttribute('width',larghezzacella); attributo=prompt('Caratteristiche della '+(j+1)+'ª cella della '+(i+1)+'ª riga.\nTesto:'); testo=document.createTextNode(attributo); cella.appendChild(testo); attributo=prompt('Sfondo:'); cella.setAttribute('bgColor',attributo); attributo=prompt('Allineamento:'); cella.setAttribute('align',attributo); attributo=prompt('Altezza:'); cella.setAttribute('height',attributo); riga.appendChild(cella); } corpotab.appendChild(riga); }
Impostiamo larghezza, bordo, cellspacing e cellpadding della tabella che stiamo creando. Dopodichè, appendiamo 'corpotab' a 'tabella' e la stessa 'tabella' a 'corpo', il riferimento al tag BODY.codice:tabella.setAttribute('width',larghezza); tabella.setAttribute('border',bordo); tabella.setAttribute('cellSpacing',spaziocelle); tabella.setAttribute('cellPadding',marginecelle); tabella.appendChild(corpotab); corpo.appendChild(tabella); }
Quest'else sta a indicare che abbiamo già attivato la funzione e che, dunque, abbiamo già creato la tabella. Convertiamo allora il value del pulsante in 'Crea!' ed eliminiamo il figlio 'tabella' dal riferimento al tag BODY. In questo modo siamo pronti per creare un'altra tabella.codice:else { form.attiva.value='Crea!'; document.getElementsByTagName('BODY').item(0).removeChild(tabella); } }
La funzione finisce con il messaggio citato in precedenza.codice:else alert('Spiacente, il tuo browser non supporta lo standard DOM.'); } //--> </script>
Ecco l'interno codice della funzione:
Sicuramente vi saranno problemi (soprattutto in termini di indentazione) nella lettura del codice.codice:<script language="JavaScript" type="text/javascript"> <!-- function GeneraTabella() { if (document.createElement && document.getElementsByTagName) { // controllo accesso alle funzionalità DOM form=document.mioform; if (form.attiva.value=='Crea!') { form.attiva.value='Elimina!'; nrighe=form.nrighe.value; ncolonne=form.ncolonne.value; larghezza=form.vlarghezza.value+form.tlarghezza[form.tlarghezza.selectedIndex].value; if (form.tlarghezza[form.tlarghezza.selectedIndex].value=='px') larghezzacella=Math.floor(form.vlarghezza.value/ncolonne)+'px'; else larghezzacella=Math.floor(form.vlarghezza.value/ncolonne)+'%'; bordo=form.bordo.value+'px'; marginecelle=form.mcelle.value; spaziocelle=form.scelle.value; tabella=document.createElement('TABLE'); corpo=document.getElementsByTagName('BODY').item(0); corpotab=document.createElement('TBODY'); for (i=0; i<nrighe; i++) { riga=document.createElement('TR'); for (j=0; j<ncolonne; j++) { cella=document.createElement('TD'); cella.setAttribute('width',larghezzacella); attributo=prompt('Caratteristiche della '+(j+1)+'ª cella della '+(i+1)+'ª riga.\nTesto:'); testo=document.createTextNode(attributo); cella.appendChild(testo); attributo=prompt('Sfondo:'); cella.setAttribute('bgColor',attributo); attributo=prompt('Allineamento:'); cella.setAttribute('align',attributo); attributo=prompt('Altezza:'); cella.setAttribute('height',attributo); riga.appendChild(cella); } corpotab.appendChild(riga); } tabella.setAttribute('width',larghezza); tabella.setAttribute('border',bordo); tabella.setAttribute('cellSpacing',spaziocelle); tabella.setAttribute('cellPadding',marginecelle); tabella.appendChild(corpotab); corpo.appendChild(tabella); } else { form.attiva.value='Crea!'; document.getElementsByTagName('BODY').item(0).removeChild(tabella); } } else alert('Spiacente, il tuo browser non supporta lo standard DOM.'); } //--> </script>
Per ovviare a ciò, vi consiglio di visitare la pagina che ho creato all'occorrenza, dove potete trovare lo script funzionante:
http://www.antoniofittipaldi.it/creatabella.htm
Spero di aver fatto cosa gradita !
Aspetto numerose segnalazioni di bug, correzioni, proposte di miglioramenti...
Personalmente sono molto affascinato da questo modo di 'fare Web'. E voi ?
Un saluto caloroso a tutti e alla prossima !
