Obiettivi didattici
Comprendere il ruolo di JavaScript accanto a HTML e CSS; riconoscere variabili, condizioni e funzioni; spiegare il DOM e gli eventi; programmare un contatore di clic e modificarlo in autonomia.
5.1 – A cosa serve JavaScript
Una pagina realizzata con HTML definisce contenuti e struttura, mentre CSS ne controlla la presentazione. JavaScript aggiunge il comportamento: permette di reagire alle azioni di chi visita il sito, aggiornare informazioni visualizzate, verificare i dati di un modulo e svolgere calcoli senza dover riscrivere manualmente il documento HTML.
In questa lezione utilizziamo JavaScript eseguito nel browser (lato client). Per esempio, quando premi un pulsante, il browser può eseguire una funzione che modifica immediatamente un numero sullo schermo. HTML, CSS e JavaScript hanno quindi responsabilità distinte ma complementari.
5.2 – Le basi del linguaggio
Variabili e costanti
Una variabile conserva un valore che può cambiare durante l’esecuzione. Con let si dichiara una variabile riassegnabile; con const si dichiara un identificatore che non può essere riassegnato. Il linguaggio distingue numeri, stringhe (testi), valori booleani e altri tipi di dati.
| let eta = 16; // valore modificabile const scuola = “Marconi”; // identificatore non riassegnabile eta = eta + 1; // ora eta vale 17 |
Condizioni: scegliere cosa fare
Il costrutto if verifica una condizione. Se è vera, esegue il primo blocco di istruzioni; altrimenti può eseguire il blocco else. Gli operatori >= e === indicano rispettivamente “maggiore o uguale” e “strettamente uguale”.
| if (eta >= 18) { console.log(“Maggiorenne”); } else { console.log(“Minorenne”); } |
Funzioni: riutilizzare istruzioni
Una funzione raccoglie istruzioni eseguibili quando vengono richiamate. Può ricevere parametri e restituire un risultato tramite return. Questo evita di ripetere lo stesso codice in più punti.
| function saluta(nome) { return “Ciao ” + nome + “!”; } console.log(saluta(“Luca”)); // Ciao Luca! |
console.log() mostra messaggi nella console degli strumenti di sviluppo del browser, generalmente accessibili con F12. È utile per osservare valori e individuare errori durante le prove.
5.3 – Il DOM e gli eventi
Il browser interpreta il documento HTML e ne crea una rappresentazione ad albero: il DOM (Document Object Model). Ogni elemento della pagina può essere individuato e modificato tramite JavaScript. Ad esempio, possiamo selezionare un paragrafo per cambiarne il testo senza ricaricare la pagina.
Istruzioni essenziali
| Istruzione | Funzione |
| document.getElementById(“x”) | Trova un elemento con id=”x”. |
| elemento.textContent = “…” | Aggiorna il testo di un elemento. |
| elemento.addEventListener(“click”, f) | Collega la funzione f a un clic. |
| elemento.classList.toggle(“c”) | Aggiunge o rimuove una classe CSS. |
| document.createElement(“li”) | Crea un nuovo elemento HTML. |
Un evento è un fatto che il browser può rilevare: click (clic), dblclick (doppio clic), keydown (pressione di un tasto). Con addEventListener si specifica quale funzione eseguire al verificarsi dell’evento. La funzione collegata viene spesso chiamata gestore dell’evento.
5.4 – Laboratorio: un contatore di clic
Obiettivo: costruire una pagina con un pulsante che incrementa un numero visibile. Al decimo clic compare un messaggio. Prepara una cartella di progetto contenente due file: contatore.html e script.js.
Passaggio 1 – La pagina HTML
| <!DOCTYPE html> <html lang=”it”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Contatore di clic</title> </head> <body> <h1>Contatore di clic</h1> <p>Hai premuto il pulsante <span id=”numero”>0</span> volte.</p> <button id=”bottone”>Clicca qui</button> <script src=”script.js”></script> </body> </html> |
Lo span con id=”numero” ospita il valore aggiornabile; il pulsante con id=”bottone” è l’elemento che riceverà l’evento click. Il tag script collega il file JavaScript esterno.
Passaggio 2 – Il comportamento JavaScript
| let conteggio = 0;
const bottone = document.getElementById(“bottone”); bottone.addEventListener(“click”, function () { if (conteggio === 10) { |
Passaggio 3 – Prova e analisi
Apri contatore.html nel browser e premi il pulsante. A ogni clic la variabile conteggio aumenta di uno e textContent aggiorna il numero nella pagina. Al raggiungimento del valore 10 la condizione è vera e viene visualizzato un avviso. Il tag script è collocato in fondo al body: in questo modo gli elementi HTML sono già stati creati quando JavaScript li cerca.
Esercitazione autonoma
Aggiungi un secondo pulsante con il testo “Azzera”. Assegna al pulsante un id, recuperalo con getElementById e collega un evento click che riporti conteggio a 0 e aggiorni anche il testo nello span. Verifica che il contatore riparta correttamente dopo l’azzeramento.
