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: usare queryselector e getelementbyid per leggere e modificare contenuti html. 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 titolo = document.querySelector('h1');
const pulsante = document.querySelector('#azione');
console.log(titolo.textContent);
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.