Vai al contenuto

Padroneggiare JavaScript e la manipolazione del DOM

La manipolazione del DOM (Document Object Model) è uno dei concetti fondamentali del web development moderno. In questo articolo vedremo come funziona JavaScript nel browser, come interagire con gli elementi HTML dinamicamente e come far vivere una pagina web oltre il semplice HTML statico.

JavaScript ricordiamo che è un linguaggio di programmazione orientato agli oggetti, interpretato ed eseguito direttamente dal browser o da altre piattaforme (come Node.js). Le sue caratteristiche principali:

  • Permette di aggiungere comportamenti interattivi alle pagine web.
  • Viene scaricato dal server e eseguito nel browser del client.
  • Non richiede tipi di variabili espliciti: è un linguaggio dinamico.

I modi principali per inserire JavaScript in una pagina HTML sono:

  1. Inline direttamente nei tag HTML (per piccole porzioni di codice).
  2. Nel tag <script> all’interno dell’HTML.
  3. In un file esterno .js, collegato sempre tramite tag script con attributo src.

Esempio: Inclusione di uno script

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EconoMe</title>
    <link rel="stylesheet" href="./style.css" />
    <!-- Qui colleghiamo il file JavaScript esterno -->
    <script src="./script.js"></script>
  </head>
  <body></body>
</html>

In questo esempio, il browser carica il file script.js esterno e lo esegue mentre costruisce la pagina.

Variabili in JavaScript

Le variabili sono contenitori dove puoi conservare informazioni (numeri, testo, valori logici, oggetti). Essendo JavaScript dinamico o debolmente tipizzato (o a tipizzazione dinamica), non serve specificare il tipo di dato. Questo significa anche che il tipo può cambiare durante l’esecuzione del programma. Vediamo cosa vuol dire, quali sono i vantaggi e gli svantaggi, con esempi semplici e commentati.

l tipo di una variabile viene deciso a runtime (mentre il programma è in esecuzione), non quando scrivi il codice.

let valore = 10;       // ora è un numero
valore = "dieci";     // ora è una stringa
valore = true;        // ora è un booleano

La stessa variabile può contenere tipi diversi senza errori immediati. In un linguaggio a tipizzazione statica (come Java o C#) questo non sarebbe permesso.

  • Codice più semplice e veloce da scrivere
  • Maggiore flessibilità
  • Ideale per il web e la prototipazione rapida
  • Meno barriere per chi inizia

Presenta alcuni evidenti svantaggi, quali ad esempio:

  • Errori difficili da individuare, molti errori compaiono solo a runtime, non mentre scrivi il codice.
  • Comportamenti inattesi (type coercion)
  • Codice meno prevedibile nei progetti grandi
  • Debugging più complesso

Tipi di dichiarazione

  • var: forma “classica”, con ambito di funzione.
  • let: introdotto con ES6, ambito block (più sicuro).
  • const: costante, il suo valore non cambia dopo l’assegnazione.
var nome = "Alice";       // stringa di testo
let eta = 30;             // numero
const citta = "London";   // costante, non cambia
console.log(nome); // stampa: Alice
console.log("Età: " + eta); // stampa: Età: 30
console.log(citta + " è meravigliosa"); // stampa: London è meravigliosa

console.log() serve per stampare informazioni nella console del browser (il tasto F12 apre la Console).

Che cos’è il DOM?

Il DOM (Document Object Model) è una rappresentazione ad albero della tua pagina web. Ogni elemento HTML — come paragrafi, div, bottoni — diventa un nodo in questa struttura. JavaScript può leggere, modificare o aggiungere questi nodi.

Accedere agli Elementi del DOM

Per lavorare con gli elementi della pagina, dobbiamo prima selezionarli. Questi metodi restituiscono gli elementi che corrispondono al criterio di ricerca.

let elementoPerID = document.getElementById("elementId");
let elementiPerClasse = document.getElementsByClassName("nomeClasse");
let elementiPerTag = document.getElementsByTagName("tagName");

Una volta ottenuto il riferimento a un elemento, puoi cambiare cosa mostra:

  • elemento.innerHTML  modifica l’HTML interno.
  • elemento.textContent  modifica solo il testo.
document.getElementById("info").textContent = "Nuovo testo!";

Creare e Rimuovere Elementi Dinamicamente

JavaScript può aggiungere nuovi elementi al DOM oppure rimuoverli.

// creo un nuovo elemento
let nuovaDiv = document.createElement("div");
nuovaDiv.textContent = "Ciao mondo!";

// lo aggiungo al body
document.body.appendChild(nuovaDiv);

// se voglio rimuoverlo
document.body.removeChild(nuovaDiv);

document.createElement() crea un nodo HTML, mentre appendChild() lo aggiunge alla pagina.

Gestione degli Eventi

La programmazione moderna dipende dagli eventi — come click del mouse, pressione di tasti o invio di form. Per ascoltarli si usa addEventListener.

elementoPerID.addEventListener("click", function() {
  console.log("Elemento cliccato!");
});

Spesso è utile aspettare che tutto il DOM sia caricato prima di accedere agli elementi. L’evento DOMContentLoaded serve proprio a questo, Così ti assicuri che gli elementi HTML esistano prima di leggerli/modificarli:

document.addEventListener("DOMContentLoaded", function () {
  // qui inserisci il tuo codice che usa il DOM
});

 

Post collegati:

Tag: