cat javascript/html-funzionante-prima-di-javascript.md

Lezione 50 12 min

HTML funzionante prima di JavaScript

Partire da una pagina comprensibile anche prima di aggiungere comportamento.

In parole semplici

JavaScript migliora la pagina, ma l’HTML deve restare chiaro. Titoli, bottoni, label e messaggi devono avere senso anche prima del codice complesso.

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

  • progressive enhancement: aggiungere funzionalità senza rompere la base HTML.

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

<h1>Le mie note</h1>
<form>
  <label for="titolo">Titolo nota</label>
  <input id="titolo" name="titolo">
  <button>Aggiungi</button>
</form>
<ul id="lista-note"></ul>

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

Esercizio guidato

  1. Scrivi prima l’HTML senza JavaScript.
  2. Controlla che label e input siano collegati.
  3. Aggiungi solo dopo il file JavaScript.
  4. Mantieni nomi e id comprensibili.
  5. Verifica che la pagina abbia senso anche se lo script non parte.

Controllo finale

Hai finito quando la struttura HTML è leggibile prima del comportamento JavaScript.