dom e eventi

dom

const el = document.querySelector("#app");
el.textContent = "hello";

eventi

button.addEventListener("click", () => console.log("tap"));

arrow functions

const greet = (name) => `ciao ${name}`;

objects

const { role } = { role: "engineer" };

esercizi

aggiorna il dom in risposta a un click.

const el = document.querySelector("#app");
button.addEventListener("click", () => { el.textContent = "ok"; });

panoramica

In questo capitolo su dom e eventi lavoriamo su dom, eventi, arrow functions, objects per creare micro-pattern riutilizzabili.

lavora in sequenza: leggi, prova, modifica gli snippet e annota i trade-off principali.

obiettivi

• capire e applicare dom in uno scenario reale
• capire e applicare eventi in uno scenario reale
• capire e applicare arrow functions in uno scenario reale
• capire e applicare objects in uno scenario reale

scheda rapida

const el = document.querySelector("#app");
el.textContent = "hello";

adatta questo scheletro agli esempi della lezione.

tips

• usa const di default
• separa moduli piccoli
• gestisci errori async
• riduci mutazioni globali
• profilare prima di ottimizzare
• mantieni dom leggibile

mini progetto

aggiorna il dom al click.

• seleziona elemento
• aggiungi evento
• aggiorna

output atteso: ui aggiornata.

checklist

• ho eseguito gli snippet e controllato l'output
• ho annotato almeno 2 trade-off
• ho completato il mini progetto
• ho salvato un riepilogo personale