- Learn
- Guida DOM
- Tutorial finale
Tutorial finale
In questo esempio, mostriamo come efficace può risultare l’uso dei metodi e delle proprietà W3C, e del metodo innerHTML.
L’esempio consiste nel generare dinamicamente una lista di articoli suggeriti per la naviagazione e nel mostrarli generando i tag in modo automatico.
Nell’esempio l’array dei dati è dichiarato nel codice me ma ovviamente la fonte può essere una ulteriore pagina dinamica in qualsivoglia linguaggio server.
In particolare, ci si può rifare all’articolo di Wolfgang Cecchin Alleggerire le pagine di dati con JavaScript(esempio) e alle sue conclusioni sulla possibilità di sfruttare il JavaScript per rendere leggere pagine che con il normale codice HTML sarebbero notevolmente più pesanti.
A questo possiamo aggiungere la possibilità di rendere le pagine dinamiche utilizzando il DOM W3C, i suoi metodi e il metodo innerHTML.
Negli esempi proposti, oltre ad ottenere i risultati dettati dall’articolo di Cecchin, inseriamo e rimuoviamo dinamicamente le righe della tabella riguardanti i vari articoli.
Nel primo esempio proposto, sono utilizzati rigorosamente i metodi e la sintassi del W3C.
Come si nota andando a leggere il codice, esistono degli ostacoli che occorre superare originati da differenze esistenti tra i vari browser. Non si tratta di vero e proprio codice crossbrowser, ma più che altro di accorgimenti per venire incontro a browser che, pur supportando il DOM W3C, nella migliore delle ipotesi, danno delle “interpretazioni personali” alle specifiche, nella peggiore, “inventano” un proprio comportamento (soprattutto Explorer). Un esempio di questo lo si è gia visto nel tutorial per l’inserimento dinamico di nuovi elementi delle lezioni precedenti.
Teniamo a mente però che, grazie proprio alle potenzialità e alla elasticità del DOM W3C, praticamente ogni possibile ostacolo, ha la sua soluzione (il problema è solo conoscerla).
esempio: Tutorial con l’uso del DOM standard
Nel secondo esempio, realizziamo gli stessi obiettivi, facendo però uso del metodo non standard innerHTML, che oltre ad alleggerire ulteriormente la pagina, semplifica sia la scrittura, sia la lettura del codice.
esempio: Tutorial con l’uso di innerHTML
Se vuoi aggiornamenti su Tutorial finale inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Abbiamo ricevuto la tua richiesta di iscrizione. Se è la prima volta che ti registri ai nostri servizi, conferma la tua iscrizione facendo clic sul link ricevuto via posta elettronica.
Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali.
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
