Creare dati iniziali e struttura del progetto

In parole semplici

Prima di collegare tutto, crea dati finti e struttura ordinata. I dati di prova ti permettono di costruire la pagina senza aspettare il form completo.

Questa lezione fa parte del modulo Progetto finale guidato. L’obiettivo del modulo è: Costruire una mini app semplice, pubblicarla e saper spiegare le scelte principali.

Parole nuove

• dati di prova: dati scritti a mano per costruire e verificare l’app.

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 mini app JavaScript pubblicata online con README essenziale.

Esempio da copiare

const libri = [
  { titolo: "Il piccolo principe", letto: false },
  { titolo: "Marcovaldo", letto: true }
];

console.log(libri);

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

Esercizi

Base · facile

Crea due dati di prova per la tua app e stampali in console.

const libri = [
  { titolo: "Il piccolo principe", letto: false },
  { titolo: "Marcovaldo", letto: true }
];
console.log(libri);

Intermedio · medio

Crea la struttura del progetto (index.html, main.js) e una funzione render che mostra i dati di prova nella pagina, ancora prima di avere un form. Verifica che la lista compaia.

Sfida · difficile

Spiega perché partire da dati finti e da render accelera lo sviluppo (puoi vedere subito il risultato e iterare). Organizza i file separando dati di prova, logica e DOM, e descrivi come sostituirai poi i dati finti con quelli reali del form.

Controllo finale

Hai finito quando la pagina può mostrare dati anche prima di usare un form.