Tutti i tutorial

Programmazione dinamica per il web

Nota iniziale

Inutile girarci intorno: JavaScript è il linguaggio più frainteso e, al tempo stesso, più importante del web moderno. Moltissimi tutorial iniziano propinandoti definizioni algoritmiche noiose, per poi lasciarti a piedi quando si tratta di capire perché un click su un bottone restituisce undefined o blocca l'intera pagina.

Questa guida non descrive ogni singola API o metodo nativo. Si concentra invece sui modelli mentali e sui concetti chiave che fanno muovere gli ingranaggi reali del browser. Capirai come lavora l'interprete sotto il cofano, come evitare i classici errori di scoping o asincronia che bloccano anche chi ha già qualche anno di esperienza, e come interagire in modo pulito e performante con la pagina HTML.

Mettiti comodo: parleremo di codice reale, con un approccio pragmatico, da sviluppatore a sviluppatore. Benvenuto nel motore del web.

Illustrazione di apertura della guida JavaScript fondamentali

1. Cos'è JS e come ragiona il browser

JavaScript (JS) è un linguaggio di programmazione ad alto livello, multiparadigma e dinamico. Nota a margine fondamentale: non c'entra nulla con Java. Condividono solo le prime quattro lettere per ragioni commerciali risalenti agli anni '90.

Mentre HTML e CSS sono linguaggi dichiarativi strutturali, JavaScript introduce la logica di esecuzione. Permette di rispondere alle azioni dell'utente, modificare la struttura a runtime, effettuare richieste di rete in background e salvare dati localmente.

Il motore JS e la compilazione JIT

I browser moderni non leggono semplicemente JavaScript riga per riga rallentando l'esecuzione. Usano motori incredibilmente complessi (come V8 in Chrome, Edge e Node.js, o SpiderMonkey in Firefox) che eseguono una compilazione chiamata JIT (Just-In-Time): convertono il codice sorgente in codice macchina super-ottimizzato pochi millisecondi prima dell'esecuzione.

Single Thread e l'Event Loop in soldoni

Questo è il concetto più importante da stampare in testa: JavaScript è single-threaded. Significa che ha un solo binario su cui far viaggiare le istruzioni. Può fare una sola cosa alla volta.

Se JavaScript è single-thread, come fa a non bloccarsi quando scarica un file pesante o aspetta una risposta dal server? Grazie all'Event Loop. Invece di far aspettare il thread principale, JavaScript delega le operazioni lente alle API del browser (le Web APIs). Quando l'operazione è conclusa, il browser inserisce la risposta in una coda. L'Event Loop controlla costantemente se il thread principale è libero; non appena lo è, prende la prima risposta in coda e la esegue. Questo garantisce fluidità all'interfaccia utente.

2. Collegare JS all'HTML: async vs defer

Se colleghi lo script in modo errato, rischi che la pagina si blocchi durante il caricamento o che il codice restituisca l'odioso errore TypeError: Cannot read properties of null (reading 'addEventListener').

Di default, quando il browser incontra un tag <script src="main.js"></script>, interrompe la lettura dell'HTML, scarica lo script, lo esegue e solo dopo riprende a costruire la pagina. Questo rallenta vistosamente il sito.

Per risolvere questo problema, abbiamo due attributi booleani fondamentali da inserire nel tag script:

<!-- Metodo 1: Async -->
<script src="app.js" async></script>

<!-- Metodo 2: Defer (Raccomandato per script correlati al DOM) -->
<script src="main.js" defer></script>

Qual è la differenza reale?

  • async: lo script viene scaricato in parallelo all'HTML. Non appena il download è completato, il browser mette in pausa la lettura dell'HTML per eseguire lo script. L'ordine di esecuzione non è garantito (il file più leggero viene eseguito prima). Ottimo per script terzi indipendenti (es. analytics).
  • defer: lo script viene scaricato in parallelo all'HTML, ma viene eseguito solo dopo che l'HTML è stato interamente analizzato e il DOM è pronto. Gli script mantengono l'ordine esatto in cui sono scritti nel file HTML. È la scelta di default per la logica dell'applicazione.

Utilizzando defer, puoi inserire i tag script nell'<head> del documento senza temere che cerchino di accedere a elementi HTML non ancora creati dal browser.

3. Variabili e Scope: var, let e const

Fino a qualche anno fa, in JavaScript si usava solo var per dichiarare variabili. Oggi, usare var è considerato un anti-pattern grave. JavaScript moderno introduce let e const, che cambiano radicalmente il modo in cui i dati vengono conservati e isolati.

Cos'è lo Scope (Ambito di visibilità)

Lo scope definisce dove una variabile è accessibile all'interno del tuo codice. Esistono tre livelli di scope:

  • Scope Globale: variabili accessibili ovunque nel file.
  • Scope di Funzione: variabili accessibili solo all'interno della funzione in cui sono dichiarate.
  • Scope di Blocco (Block Scope): variabili accessibili solo all'interno di una coppia di parentesi graffe { ... } (come in un if, un for o un while).

var vs let/const: il grande tranello

La differenza vitale è che var ignora lo scope di blocco ed è visibile a livello di intera funzione o globalmente (hoisting), mentre let e const rispettano rigorosamente lo scope di blocco.

if (true) {
  var nomeVar = "Marco";
  let nomeLet = "Sofia";
}
console.log(nomeVar); // Stampa "Marco" (Leaked fuori dal blocco!)
console.log(nomeLet); // ReferenceError: nomeLet is not defined (Corretto!)

const non rende gli oggetti immutabili

Questo è un concetto che fallisce nel 90% delle spiegazioni per principianti. Dichiarare una variabile con const impedisce di riassegnare il valore della variabile, ma non impedisce di modificare il contenuto dell'oggetto o dell'array a cui fa riferimento.

const utente = { nome: "Luca" };
utente.nome = "Giorgio"; // Funziona perfettamente! L'oggetto viene modificato.

// utente = { nome: "Paolo" }; 
// TypeError: Assignment to constant variable. (Bloccato!)

Regola d'oro pratica: usa sempre const di default. Se sai che il valore della variabile dovrà essere riassegnato (ad esempio in un contatore di un ciclo), usa let. Bandisci var dal tuo arsenale.

4. Tipi di Dati e Uguaglianza

JavaScript gestisce la tipizzazione in modo dinamico. Non devi specificare se una variabile contiene un numero o un testo: l'interprete lo capisce da solo a runtime. Ma questo comporta alcune insidie strutturali.

Primitivi vs Tipi di Riferimento

I tipi di dati in JS si dividono in due macro-categorie:

  • Tipi Primitivi (String, Number, Boolean, Null, Undefined, Symbol, BigInt): vengono passati per valore. Se copi una variabile primitiva, crei una copia indipendente del dato originale.
  • Tipi di Riferimento (Object, Array, Function): vengono passati per riferimento (indirizzo di memoria). Copiare un array o un oggetto copia solo il puntatore in memoria: modificando la copia, modifichi l'originale.
let x = 10;
let y = x; // Copia il valore
y = 20;
console.log(x); // 10 (Immutato)

let arrA = [1, 2];
let arrB = arrA; // Copia il riferimento in memoria
arrB.push(3);
console.log(arrA); // [1, 2, 3] (Modificato!)

Uguaglianza: == vs ===

JavaScript ha due operatori per verificare se due valori sono uguali:

  • Uguaglianza debole (==): confronta i valori effettuando la coercizione automatica dei tipi. Se i tipi sono diversi, tenta di convertirli prima di confrontarli. Questo porta a follie logiche come: 0 == false (true) o "" == 0 (true).
  • Uguaglianza stretta (===): confronta sia il valore sia il tipo senza alcuna conversione. Se i tipi sono diversi, restituisce immediatamente false.
console.log(5 == "5");  // true (Coercizione del tipo)
console.log(5 === "5"); // false (Tipi diversi: Number vs String)

Regola pratica: usa sempre l'operatore di uguaglianza stretta === (e il suo corrispettivo !==) per evitare bug silenziosi e difficilissimi da scovare.

5. Funzioni: Regular vs Arrow

Le funzioni sono il blocco costruttivo fondamentale di JavaScript. Nel tempo la sintassi si è evoluta, introducendo le funzioni a freccia (Arrow Functions) in ES6. Ma le differenze non sono solo estetiche.

Funzione Classica (Function Declaration)

Ha il vantaggio dell'hoisting: puoi chiamarla nel codice prima ancora di averla dichiarata riga per riga, perché il browser la carica in memoria all'inizio.

saluta(); // Funziona anche se dichiarata sotto!
function saluta() {
  console.log("Ciao!");
}

Funzione Freccia (Arrow Function)

Ha una sintassi compatta e non subisce l'hoisting (va dichiarata prima di essere usata). Offre una sintassi minimalista, soprattutto per i ritorni impliciti ad una riga.

const raddoppia = x => x * 2; // Ritorno implicito senza parentesi graffe e return

La vera differenza: il valore di 'this'

Questa è la nozione che crea panico. Nelle funzioni classiche, la parola chiave this fa riferimento a chi chiama la funzione a runtime. Nelle funzioni freccia, il this è lessicale: eredita il valore di this dal contesto in cui è stata definita la funzione, ignorando chi la invoca.

const bottone = {
  testo: "Acquista",
  inizializza() {
    // Funzione classica: 'this' fa riferimento a 'bottone'
    setTimeout(function() {
      console.log(this.testo); // undefined! (setTimeout sposta il contesto a window/global)
    }, 100);

    // Arrow function: eredita 'this' dal contesto 'inizializza' (cioè bottone)
    setTimeout(() => {
      console.log(this.testo); // Stampa "Acquista"
    }, 100);
  }
};
bottone.inizializza();

Se hai bisogno di mantenere il riferimento dinamico all'elemento corrente (ad esempio in un handler di un evento nativo), usa una funzione classica. Se devi scrivere callback, cicli, o mantenere stabile il contesto del genitore, usa le Arrow Functions.

6. Oggetti e Array Moderni

Scrivere codice pulito in JavaScript moderno richiede la padronanza delle scorciatoie sintattiche introdotte di recente. Permettono di estrarre e unire dati scrivendo un terzo del codice tradizionale.

Destrutturazione (Destructuring)

Ti permette di estrarre proprietà da oggetti o elementi da array e memorizzarli in variabili dedicate in un colpo solo.

const configurazione = { server: "localhost", porta: 8080, db: "prod" };

// Metodo vecchio:
// const server = configurazione.server;
// const porta = configurazione.porta;

// Metodo moderno (Destructuring):
const { server, porta } = configurazione;
console.log(server, porta); // "localhost" 8080

Operatore Spread (...)

Rappresentato da tre punti consecutivi, l'operatore spread "scompatta" o "distribuisce" gli elementi di un array o le proprietà di un oggetto in un nuovo contenitore. È il modo standard per clonare o unire dati in modo non mutativo.

const numeriBase = [1, 2];
const numeriCompleti = [...numeriBase, 3, 4]; // [1, 2, 3, 4]

const utenteDefault = { ruolo: "user", attivo: true };
const nuovoUtente = { ...utenteDefault, nome: "Anna" }; // Unione proprietà

Metodi essenziali degli Array

Evita di usare cicli for manuali per elaborare dati. JavaScript offre metodi funzionali puliti ed espressivi:

  • .map(): crea un nuovo array modificando ogni singolo elemento dell'array originale.
  • .filter(): filtra l'array restituendo solo gli elementi che superano una determinata condizione.
  • .reduce(): accumula i valori dell'array riducendoli a un singolo risultato finale (es. una somma).
const prezzi = [10, 20, 30];
const prezziTassati = prezzi.map(p => p * 1.22); // [12.2, 24.4, 36.6]
const economici = prezzi.filter(p => p < 25);     // [10, 20]

7. DOM Manipulation: Selezionare e Modificare

Il DOM (Document Object Model) è l'albero strutturale generato dal browser a partire dall'HTML. Interagire con esso è il cuore di ogni script front-end.

Selezionare elementi nel modo moderno

Dimentica i vecchi getElementById o getElementsByClassName. Oggi la selezione si effettua in modo omogeneo sfruttando i selettori CSS tramite due soli metodi:

  • querySelector(selettore): restituisce il primo elemento che corrisponde al selettore specificato (es. id, classe o tag). Se non trova nulla, restituisce null.
  • querySelectorAll(selettore): restituisce una NodeList (struttura simile a un array) contenente tutti gli elementi corrispondenti. Puoi ciclarla direttamente con un forEach.
const titolo = document.querySelector("#main-title");
const bottoniAccetta = document.querySelectorAll(".btn-accept");

bottoniAccetta.forEach(btn => {
  btn.style.backgroundColor = "green"; // Modifica lo stile inline (con cautela)
});

Modificare Classi vs Stili inline

Un errore di architettura molto comune è modificare direttamente gli stili CSS tramite JavaScript (es. el.style.display = 'none'). Questo mescola la logica di stile con quella di esecuzione, rendendo la manutenzione un incubo.

La buona pratica: definisci lo stato visivo nel CSS (tramite classi ad es. .is-hidden, .active) e usa JavaScript unicamente per aggiungere, rimuovere o scambiare queste classi nel DOM.

const banner = document.querySelector(".cookie-banner");

// Modo corretto ed elegante:
banner.classList.add("is-hidden");
banner.classList.remove("active");
banner.classList.toggle("is-open"); // Rimuove se presente, aggiunge se assente

textContent vs innerHTML (Sicurezza XSS)

Per modificare il testo all'interno di un elemento, prediligi sempre textContent rispetto a innerHTML. L'uso di innerHTML costringe il browser a ri-analizzare il markup HTML ed espone il sito a vulnerabilità di tipo XSS (Cross-Site Scripting) se inserisci dati provenienti direttamente dagli input dell'utente.

const display = document.querySelector(".username-display");
display.textContent = inputUtente; // Sicuro: interpreta tutto come testo puro

8. Gestire gli Eventi in modo corretto

Gli eventi sono i segnali emessi dal browser quando accade qualcosa: un click, il movimento del mouse, la pressione di un tasto sulla tastiera o il caricamento di una risorsa.

La sintassi standard: addEventListener

Non inserire mai attributi onclick direttamente nei tag HTML (es. <button onclick="...">). Mantieni separato il comportamento legando gli ascoltatori direttamente da JavaScript.

const btnSalva = document.querySelector("#btn-save");

function gestisciClick(event) {
  console.log("Salvataggio in corso...");
}

btnSalva.addEventListener("click", gestisciClick);

L'oggetto Event e preventDefault()

La funzione di callback dell'evento riceve automaticamente come primo parametro un oggetto event contenente dati preziosi sull'evento stesso (ad esempio, le coordinate del mouse, il tasto premuto o l'elemento che ha generato il click con event.target).

Un metodo di fondamentale importanza di questo oggetto è event.preventDefault(): istruisce il browser ad interrompere il comportamento di default associato a quell'elemento. L'esempio classico è evitare l'invio e il ricaricamento della pagina all'invio di un form HTML:

const form = document.querySelector("#signup-form");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // Impedisce il ricaricamento della pagina
  
  // Ora possiamo convalidare i dati ed inviarli via AJAX/Fetch
  console.log("Invio form asincrono...");
});

9. L'Asincronia per umani: async/await

Poiché JavaScript è single-thread, non può congelarsi in attesa che un server esterno risponda a una chiamata API. Le operazioni di rete devono essere asincrone.

In passato questo veniva gestito con i callback (che portavano al temuto Callback Hell, codice piramidale illeggibile). Poi sono arrivate le Promise, e infine la sintassi moderna e pulita: async/await.

Cosa sono le Promise

Una Promise è un oggetto che rappresenta lo stato temporaneo di un'operazione non ancora conclusa. Può essere in tre stati:

  • Pending: l'operazione è ancora in corso.
  • Fulfilled: l'operazione è completata con successo (restituisce un risultato).
  • Rejected: l'operazione è fallita (restituisce un errore).

Sintassi moderna con async/await

La combinazione di async e await è semplicemente "zucchero sintattico" sopra le Promise. Rende il codice asincrono identico al codice sincrono riga per riga, rendendolo facilissimo da leggere e mantenere.

Per poter usare la parola chiave await, questa deve trovarsi all'interno di una funzione contrassegnata come async.

// Definizione di una funzione asincrona
async function ottieniDatiUtente() {
  console.log("Richiesta avviata...");
  
  // Il thread principale aspetta che la fetch si risolva senza bloccare la pagina
  const risposta = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const dati = await risposta.json();
  
  console.log("Dati ricevuti:", dati.name);
}

ottieniDatiUtente();
console.log("Questo messaggio appare PRIMA dei dati, perché JS è asincrono!");

Quando scrivi await fetch(...), l'esecuzione di quella specifica funzione si ferma fino a quando la Promise non si risolve, ma il resto della pagina continua a girare fluida e a rispondere alle azioni dell'utente.

10. Prevenire i Crash: try/catch

Quando JavaScript incontra un errore irreversibile (ad esempio una variabile inesistente o un parsing JSON fallito), interrompe bruscamente l'esecuzione del codice. Se questo succede, i tuoi pulsanti smetteranno di funzionare e la pagina apparirà congelata all'utente.

Per salvaguardare la stabilità dell'applicazione, avvolgiamo le operazioni "a rischio" in un blocco try/catch.

const datiRicevuti = '{"nome": "Luca", "eta": 28}';
const datiCorrotti = '{"nome": "Luca", "eta": '; // JSON non valido!

function analizzaJSON(stringa) {
  try {
    const oggetto = JSON.parse(stringa);
    console.log("Parse riuscito:", oggetto.nome);
  } catch (errore) {
    // Questo blocco viene eseguito solo se si verifica un errore nel try
    console.warn("Attenzione, formato JSON non valido:", errore.message);
  } finally {
    // (Opzionale) Eseguito sempre, a prescindere dal successo o fallimento
    console.log("Operazione conclusa.");
  }
}

analizzaJSON(datiCorrotti); // Non crasha! Gestisce l'errore in modo controllato.

Usa try/catch per gestire gli errori legati all'interazione con servizi esterni: chiamate API (fetch che possono fallire per problemi di connessione), accesso a storage locali o analisi di formati dati non sicuri.

11. Debugging reale: oltre il console.log

Scrivere console.log() ovunque per ispezionare il valore delle variabili è la prassi di molti sviluppatori, ma è un metodo inefficiente e disordinato. JavaScript e i DevTools offrono strumenti decisamente più professionali.

Funzionalità avanzate della Console

Invece del classico log, prova questi metodi nativi:

  • console.table(array): formatta un array di oggetti in una magnifica tabella interattiva ordinabile.
  • console.dir(elementoDOM): mostra un elenco interattivo di tutte le proprietà JavaScript dell'oggetto DOM selezionato, invece di stamparne la rappresentazione HTML.
  • console.error() e console.warn(): colorano i messaggi nella console aiutandoti a distinguerli visivamente.

L'istruzione debugger

Il modo definitivo di fare debug è inserire la parola chiave debugger; direttamente nel punto del codice che desideri analizzare, tenendo aperti i DevTools del browser.

function calcolaTotale(prezzo, quantita) {
  const sconto = 0.1;
  debugger; // Il browser congela l'esecuzione esattamente qui!
  return (prezzo * quantita) * (1 - sconto);
}

Non appena l'interprete incontra debugger, congela la pagina. I DevTools ti permetteranno di ispezionare lo stato esatto di tutte le variabili in quel millisecondo, scorrere il codice istruzione per istruzione e vedere l'evoluzione dei dati senza scrivere un singolo log manuale.

12. Dove continuare dopo

Capire JavaScript è un percorso continuo. Una volta acquisiti questi concetti e prassi, puoi collegare i pezzi restanti del tuo ambiente di sviluppo e del workflow moderno. Ecco le letture ideali per fare il passo successivo:

  • DevTools: capire perché una pagina non funziona: per approfondire l'ispezione della console, del network e fare debugging a livello pro.
  • NPM e Vite: il tutorial indispensabile per passare da file JavaScript singoli a progetti moderni strutturati con moduli e dipendenze.
  • Accessibilità web: per capire come rendere gli elementi interattivi creati con JavaScript fruibili anche da tastiera e screen reader.
  • Tutti i tutorial: torna all'indice per consultare le altre guide a disposizione.