Render: aggiornare la pagina dai dati

In parole semplici

Render significa “mostra i dati nella pagina”. Invece di modificare la pagina in tanti punti diversi, puoi creare una funzione render da richiamare dopo ogni cambiamento.

Questa lezione fa parte del modulo Organizzare una piccola app. L’obiettivo del modulo è: Passare da esempi isolati a un progetto con file, dati e funzioni organizzati.

Parole nuove

• render: funzione che aggiorna la pagina partendo dai dati.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una notes app semplice con file separati e salvataggio locale.

Esempio da copiare

function render(note) {
  lista.innerHTML = "";

  for (const nota of note) {
    const elemento = document.createElement("li");
    elemento.textContent = nota.titolo;
    lista.append(elemento);
  }
}

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

1. Crea una lista HTML vuota.
2. Crea una lista di note in JavaScript.
3. Scrivi una funzione render.
4. Dentro render crea un li per ogni nota.
5. Richiama render dopo aver aggiunto una nota.

Controllo finale

Hai finito quando la pagina si aggiorna richiamando una sola funzione.