Introduzione
Quando si inizia a studiare JavaScript, uno dei passi più utili e pratici è imparare a gestire l’interazione con l’utente. Non basta scrivere variabili e condizioni: un programma web diventa davvero utile quando risponde a click, input da tastiera, invio di un form e altre azioni del browser.
In questo tutorial vediamo un sotto-argomento molto concreto e fondamentale: come leggere i dati inseriti dall’utente e reagire a un evento in JavaScript. È un tema perfetto per chi sta iniziando, perché unisce i concetti base del linguaggio con un caso d’uso reale. Imparerai a:
- selezionare elementi della pagina;
- leggere il valore di un campo input;
- ascoltare un evento, come il click di un pulsante;
- mostrare un risultato all’utente in modo dinamico.
Questo tipo di logica è alla base di moltissime applicazioni: moduli di login, calcolatrici, filtri di ricerca, to-do list e form di contatto.
Codice completo
<!-- HTML di esempio -->
<div id="app">
<h2>Calcolatore semplice</h2>
<label for="numero1">Primo numero</label>
<input type="number" id="numero1" placeholder="Inserisci un numero">
<label for="numero2">Secondo numero</label>
<input type="number" id="numero2" placeholder="Inserisci un numero">
<button id="sommaBtn">Calcola somma</button>
<p id="risultato">Il risultato apparirà qui.</p>
</div>
<script>
// Selezioniamo gli elementi della pagina
const inputNumero1 = document.querySelector(´#numero1´);
const inputNumero2 = document.querySelector(´#numero2´);
const pulsanteSomma = document.querySelector(´#sommaBtn´);
const areaRisultato = document.querySelector(´#risultato´);
// Aggiungiamo un evento al click del pulsante
pulsanteSomma.addEventListener(´click´, function () {
// Leggiamo i valori dagli input
const valore1 = inputNumero1.value;
const valore2 = inputNumero2.value;
// Convertiamo i valori da stringa a numero
const numero1 = Number(valore1);
const numero2 = Number(valore2);
// Controlliamo che i dati siano validi
if (valore1 === ´´ || valore2 === ´´) {
areaRisultato.textContent = ´Inserisci entrambi i numeri prima di calcolare.´;
return;
}
if (Number.isNaN(numero1) || Number.isNaN(numero2)) {
areaRisultato.textContent = ´Uno dei valori inseriti non è un numero valido.´;
return;
}
// Eseguiamo il calcolo
const somma = numero1 + numero2;
// Mostriamo il risultato
areaRisultato.textContent = `Il risultato della somma è: ${somma}`;
});
</script>Spiegazione
Vediamo il codice passo dopo passo. L’obiettivo è semplice: l’utente inserisce due numeri, clicca un pulsante e ottiene la somma.
1. Selezione degli elementi
Con document.querySelector() prendiamo gli elementi dal DOM usando il loro id:
- #numero1 e #numero2 sono i campi di input;
- #sommaBtn è il pulsante;
- #risultato è il paragrafo dove mostriamo l’output.
Questa è una pratica molto comune in JavaScript lato browser: prima trovi gli elementi, poi li usi per leggere dati o modificarli.
2. Ascolto di un evento
Con addEventListener(´click´, ...) diciamo al browser: “quando l’utente clicca questo pulsante, esegui questa funzione”.
Gli eventi sono il modo principale con cui JavaScript reagisce alle azioni dell’utente. In questo esempio usiamo il click, ma potresti usare anche input, submit, change e molti altri.
3. Lettura del valore degli input
Il valore di un campo input si legge con .value. Attenzione però: il valore restituito è sempre una stringa, anche se l’input è di tipo number.
Per questo motivo facciamo la conversione con Number(). Senza questa conversione, il rischio è di ottenere comportamenti inattesi. Per esempio, la somma di due stringhe potrebbe trasformarsi in concatenazione in altri contesti.
4. Validazione dei dati
Prima di calcolare il risultato, controlliamo due casi importanti:
- se uno dei campi è vuoto, mostriamo un messaggio utile;
- se il contenuto non è un numero valido, blocchiamo il calcolo.
Questa parte è essenziale in qualsiasi applicazione reale. Non bisogna mai fidarsi completamente dell’input dell’utente.
5. Aggiornamento del contenuto della pagina
Per mostrare il risultato usiamo textContent. È una scelta sicura e semplice quando dobbiamo inserire testo nella pagina. In questo caso scriviamo il risultato dentro il paragrafo dedicato, senza ricaricare la pagina.
Questo è uno dei punti più interessanti di JavaScript: la pagina diventa interattiva e cambia in tempo reale in base alle azioni dell’utente.
Best practice
- Valida sempre l’input: non assumere che l’utente inserisca dati corretti.
- Converti esplicitamente i valori: usa Number() o altre funzioni di conversione in modo chiaro.
- Usa nomi descrittivi: variabili come numero1, numero2 e areaRisultato rendono il codice più leggibile.
- Preferisci textContent per il testo semplice: è più sicuro di innerHTML quando non devi inserire markup.
- Gestisci i casi limite: input vuoti, valori non numerici, numeri negativi o decimali.
- Separazione delle responsabilità: HTML per la struttura, JavaScript per il comportamento. Mantieni il codice ordinato e facile da mantenere.
Se vuoi fare un passo in più, puoi anche disattivare il pulsante finché i campi non sono compilati correttamente, oppure mostrare messaggi di errore più dettagliati vicino agli input.
Riepilogo
In questo tutorial hai imparato un sotto-argomento molto pratico dell’introduzione a JavaScript: gestire l’input dell’utente e reagire a un evento. Questo ti permette di costruire pagine interattive, non più statiche.
- Hai visto come selezionare elementi del DOM con querySelector().
- Hai imparato a leggere i valori degli input con .value.
- Hai usato addEventListener() per rispondere a un click.
- Hai applicato una validazione di base per rendere il codice più robusto.
- Hai aggiornato il contenuto della pagina senza ricaricare il browser.
Queste competenze sono fondamentali per quasi tutti i progetti web moderni. Una volta compresi questi meccanismi, sarà molto più facile passare a form, componenti dinamici, validazione avanzata e interfacce più complesse.
Approfondisci con risorse ufficiali
- MDN Web Docs - JavaScript: documentazione completa e affidabile sul linguaggio.
- MDN Web Docs - addEventListener(): approfondimento sul sistema degli eventi nel browser.
- MDN Web Docs - querySelector(): guida per selezionare elementi del DOM.
- MDN Web Docs - HTMLInputElement.value: riferimento per leggere i valori degli input.
- JavaScript.info: ottimo sito didattico con esempi chiari e progressivi.
Ti consiglio di provare subito a modificare l’esempio: aggiungi una sottrazione, una moltiplicazione o un pulsante per resettare i campi. Sperimentare è il modo migliore per consolidare i concetti di base di JavaScript.