Obiettivo della lezione
Usare questo argomento per aggiungere comportamento reale a una pagina web, senza perdere ordine nel codice.
- Capire il concetto senza teoria inutile.
- Vedere un esempio breve ma realistico.
- Applicare subito il codice in una pagina HTML.
Spiegazione pratica
In questa lezione affronti: controllare campi vuoti, email, password, messaggi di errore e feedback immediato. Il punto non è memorizzare tutto, ma capire come riconoscere il problema e scegliere l’istruzione giusta.
JavaScript lavora spesso insieme a HTML e CSS: legge elementi della pagina, risponde agli eventi dell’utente e aggiorna contenuti o classi CSS.
Consiglio didattico: prova ogni esempio in una pagina separata e controlla sempre la console del browser.
Esempio guidato
Copia il codice in una pagina di prova e modifica i valori per verificare cosa cambia.
const form = document.querySelector('#contatto');
form.addEventListener('submit', function(event) {
event.preventDefault();
const email = document.querySelector('#email').value;
if (email === '') alert('Inserisci la email');
});
Cosa osservare: controlla il risultato nella pagina e nella console; se qualcosa non funziona, leggi il messaggio di errore prima di cambiare codice a caso.
Errori comuni
- Dimenticare parentesi, virgolette o punti e virgola quando il codice diventa più lungo.
- Usare un selettore che non trova nessun elemento nella pagina HTML.
- Scrivere codice prima che il documento HTML sia stato caricato, senza usare defer o DOMContentLoaded.
Esercizio consigliato
Crea una piccola pagina personale e aggiungi un pulsante che modifica un testo, una classe CSS o un messaggio visibile.