Alcune informazioni aggiuntive sul linguaggio JavaScript ti saranno utili per approfondire le tue conoscenze. In particolare, prova ad entrare di più nel linguaggio JavaScript – ma anche in generale nel mondo della programmazione informatica – vedendo il Document Object Model, gli eventi e i canvas.
DOM in JavaScript
La struttura dei documenti in JavaScript segue il DOM, document object model. Viene usato anche in altri linguaggi, quindi non è una scelta specifica del linguaggio JavaScript: questo apporta vantaggi e svantaggi.
Si tratta di un’ interfaccia di programmazione delle applicazioni (API) per i documenti HTML e XML. Se si vuole accedere e manipolare gli elementi all'interno di una pagina web per creare un'interfaccia utente dinamica, il DOM è essenziale.
Non tutte le applicazioni JavaScript, però, si appoggiano al DOM. Ad esempio, nelle applicazioni che non hanno un'interfaccia utente, il linguaggio JavaScript elabora i dati in modo indipendente dalla struttura della pagina web, quindi il DOM non serve. Rientrano in questa categoria i webservices e i server Node.js.
Inoltre, alcuni framework JavaScript (ad esempio React, Angular e Vue.js) usano Virtual DOM, una propria rappresentazione virtuale del DOM che non dipende dal vero DOM del browser, aumentando le prestazioni e la velocità delle applicazioni.
Per sviluppare web dinamico è, quindi, necessario conoscere il DOM. Se conosci il linguaggio HTML ti è facile far riferimento a quel linguaggio di markup per fissare alcuni punti. Semplificando le cose, un programma HTML parte dal tag <body>, poi passa ad <h1> e da lì a tanti <p>.
Una pagina HTML può essere vista come composta da una gerarchia di nodi, dove ogni nodo ha un nodo padre e può avere nodi figli. L’intero file HTML è il nodo documento e contiene tutti gli altri nodi.
Tra i nodi troviamo gli elementi (tag <p>, <div>, <h1>, etc), attributi degli elementi (es. href in un tag <a>. src in un tag <img>), testo o commenti. (Se non padroneggi il linguaggio html non preoccuparti: puoi consultare la nostra guida html e css in italiano).
Tra le molte componenti spiccano i nodi. Nel linguaggio JavaScript, i nodi rappresentano gli elementi all'interno di un documento HTML o XML.
I nodi hanno diverse proprietà che possono essere sfruttate per accedere e modificare i dati all'interno del documento.
Alcune delle proprietà più comuni sono:
- nodeType: indica il tipo di nodo, ad esempio elemento, testo, commento, ecc.
- nodeName: il nome del nodo, ad esempio 'div' per un elemento div.
- nodeValue: il valore del nodo, ad esempio il testo all'interno di un elemento di testo.
- parentNode: il nodo padre del nodo corrente.
- childNodes: una raccolta di nodi figlio del nodo corrente.
- firstChild: il primo nodo figlio del nodo corrente.
- lastChild: l'ultimo nodo figlio del nodo corrente.
- previousSibling: il nodo precedente al nodo corrente all'interno dello stesso livello gerarchico.
- nextSibling: il nodo successivo al nodo corrente all'interno dello stesso livello gerarchico.
Queste sono solo alcune delle proprietà dei nodi più comuni, ci sono molte altre proprietà disponibili a seconda del tipo di nodo e del contesto.
I nodi DOM contengono una vasta gamma di collegamenti ad altri nodi vicini. Il seguente diagramma, tratto da Eloquent JavaScript, li illustra.
L’indentazione inserisce nel programma degli spazi non richiesti. Il computer accetterà il programma senza problemi: anche le interruzioni di riga nei programmi sono facoltative.
Il ruolo dell’indentazione è far risaltare la struttura del codice.
