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: mostrare contenuti a schede o sezioni espandibili, utili per faq e pagine didattiche. 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.
document.querySelectorAll('.tab').forEach(function(tab) {
tab.addEventListener('click', function() {
document.querySelector('.attiva').classList.remove('attiva');
tab.classList.add('attiva');
});
});
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.