From a396754ac6b56053ae7518ac3d9a8e90a1bcde07 Mon Sep 17 00:00:00 2001 From: Berack96 Date: Wed, 25 Feb 2026 23:06:51 +0100 Subject: [PATCH] esercizi di ripasso --- javascript/ripasso_completo/README.md | 81 ++ .../esercizio_1_guidato/index.html | 417 +++++++ .../esercizio_1_guidato/script.js | 1096 +++++++++++++++++ .../esercizio_2_autonomo/index.html | 445 +++++++ .../esercizio_2_autonomo/script.js | 310 +++++ 5 files changed, 2349 insertions(+) create mode 100644 javascript/ripasso_completo/README.md create mode 100644 javascript/ripasso_completo/esercizio_1_guidato/index.html create mode 100644 javascript/ripasso_completo/esercizio_1_guidato/script.js create mode 100644 javascript/ripasso_completo/esercizio_2_autonomo/index.html create mode 100644 javascript/ripasso_completo/esercizio_2_autonomo/script.js diff --git a/javascript/ripasso_completo/README.md b/javascript/ripasso_completo/README.md new file mode 100644 index 0000000..449737a --- /dev/null +++ b/javascript/ripasso_completo/README.md @@ -0,0 +1,81 @@ +# 🎯 Ripasso Completo JavaScript β€” Piano Esercizi + +## Obiettivo + +Questi due esercizi coprono **TUTTO** il programma JavaScript, dal primo `console.log` fino a `localStorage`. +Sono pensati per essere fatti **in autonomia**, senza bisogno di aiuto, a patto di seguire le istruzioni passo passo e di non saltare nessun concetto. + +--- + +## Come fare gli esercizi + +1. Fai la fork di questo repository (in alto a destra) +2. Clona la tua copia sul computer +3. Apri il file `index.html` del primo esercizo sul browser +4. Apri la **Console del browser** (F12 β†’ Console) +5. Lavora sul file `script.js` del primo esercizio seguendo i capitoli dall'alto al basso +6. Guarda l'output nella console per verificare che stai facendo giusto +7. **Non saltare nessun step** β€” ogni step usa ciΓ² che hai fatto prima +8. Salva e ricarica la pagina per vedere i risultati +9. Quando hai finito il primo esercizio, ripeti i passaggi 3-8 per il secondo esercizio + +--- + +## Struttura + +### Esercizio 1 β€” "Il Menu della Pizzeria" (GUIDATO) + +Un esercizio **guidato** che funziona anche come tutorial. +Per OGNI concetto trovi: + +- πŸ“– **Spiegazione** del concetto (cosa fa e perchΓ© serve) +- πŸ’‘ **Esempio** funzionante da leggere +- ✏️ **TODO** β€” il codice che devi scrivere tu +- βœ… **Output atteso** β€” per verificare che hai fatto giusto + +**Argomenti coperti (22 step):** + +| Step | Argomento | Capitolo | +| ---- | ---------------------------------- | -------- | +| 1 | console.log, variabili, tipi | 1 | +| 2 | const vs let, typeof | 1 | +| 3 | Operatori aritmetici | 2 | +| 4 | Operatori di confronto e logici | 2 | +| 5 | if / else | 3 | +| 6 | else if, switch | 3 | +| 7 | Ciclo while | 4 | +| 8 | Ciclo for, break, continue | 4 | +| 9 | Funzioni base | 5 | +| 10 | Funzioni con return | 5 | +| 11 | Array: creazione e metodi | 6 | +| 12 | Array: iterazione e map | 6 | +| 13 | Oggetti: creazione e accesso | 7 | +| 14 | Oggetti: annidati e destruttura | 7 | +| 15 | DOM: selezione e modifica testo | 8 | +| 16 | DOM: stili e classList | 8 | +| 17 | DOM: createElement e append | 9 | +| 18 | DOM: addEventListener | 9 | +| 19 | Manipolazione stringhe | 10 | +| 20 | Math e template literals | 10 | +| 21 | localStorage: salvare | 11 | +| 22 | localStorage: caricare | 11 | + +--- + +### Esercizio 2 β€” "La Rubrica Contatti" (SEMI-GUIDATO) + +Stessi concetti dell'Esercizio 1, ma con **meno aiuto**: + +- Solo il **requisito** (cosa devi fare) +- Un **hint** breve (suggerimento) +- Nessun esempio, nessun output scritto + +Se ti blocchi, torna all'Esercizio 1 per rivedere il concetto. + +--- + +## Regola d'oro + +> **Se non ricordi come si fa qualcosa, rileggilo nell'Esercizio 1.**\ +> **Se ancora non capisci, prova a cercarlo online o negli appunti.**\ +> **Se tutto fallisce, chiedere al professore.** diff --git a/javascript/ripasso_completo/esercizio_1_guidato/index.html b/javascript/ripasso_completo/esercizio_1_guidato/index.html new file mode 100644 index 0000000..f108464 --- /dev/null +++ b/javascript/ripasso_completo/esercizio_1_guidato/index.html @@ -0,0 +1,417 @@ + + + + + + Esercizio 1 β€” Il Menu della Pizzeria + + + + +
+

πŸ• Il Menu della Pizzeria

+
+

Ripasso completo JavaScript (guidato)

+
+ + +
+ +

Il Nostro Menu

+ + +
+ + +
+
+
0
+
Pizze nel Menu
+
+
+
0
+
Prezzo Medio
+
+
+
-
+
PiΓΉ Costosa
+
+
+ + +
+

Aggiungi una Pizza

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + + +
+ + +
+

Cerca nel Menu

+ +
+ + +

Menu Attuale

+ + +
+ + + + diff --git a/javascript/ripasso_completo/esercizio_1_guidato/script.js b/javascript/ripasso_completo/esercizio_1_guidato/script.js new file mode 100644 index 0000000..74a9179 --- /dev/null +++ b/javascript/ripasso_completo/esercizio_1_guidato/script.js @@ -0,0 +1,1096 @@ +// ╔══════════════════════════════════════════════════════════════════════════════╗ +// β•‘ πŸ• IL MENU DELLA PIZZERIA β€” ESERCIZIO GUIDATO β•‘ +// β•‘ β•‘ +// β•‘ Questo esercizio ti guida passo passo attraverso TUTTO JavaScript. β•‘ +// β•‘ Ogni capitolo ha: β•‘ +// β•‘ β•‘ +// β•‘ πŸ“– SPIEGAZIONE β€” leggi e capisci il concetto β•‘ +// β•‘ πŸ’‘ ESEMPIO β€” codice funzionante da osservare β•‘ +// β•‘ ✏️ TODO β€” il codice che devi scrivere TU β•‘ +// β•‘ βœ… VERIFICA β€” come controllare che hai fatto giusto β•‘ +// β•‘ β•‘ +// β•‘ REGOLE: β•‘ +// β•‘ 1. Lavora dall'alto verso il basso, NON saltare step β•‘ +// β•‘ 2. Apri la Console del browser (F12) per vedere i console.log β•‘ +// β•‘ 3. Salva il file e ricarica la pagina dopo ogni modifica β•‘ +// β•‘ 4. Se ti blocchi, RILEGGI la spiegazione e l'esempio β•‘ +// β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• + + +// ============================================================================ +// CAPITOLO 1 β€” VARIABILI E TIPI +// ============================================================================ + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ πŸ“– SPIEGAZIONE β”‚ +// β”‚ β”‚ +// β”‚ In JavaScript, le VARIABILI sono come "scatole" dove metti dei valori. β”‚ +// β”‚ β”‚ +// β”‚ - let β†’ crea una variabile che puoi CAMBIARE dopo β”‚ +// β”‚ - const β†’ crea una variabile che NON puoi cambiare (costante) β”‚ +// β”‚ β”‚ +// β”‚ I TIPI principali sono: β”‚ +// β”‚ - string β†’ testo tra virgolette: "ciao", 'mondo' β”‚ +// β”‚ - number β†’ numeri: 42, 3.14 β”‚ +// β”‚ - boolean β†’ vero/falso: true, false β”‚ +// β”‚ β”‚ +// β”‚ console.log() β†’ stampa un valore nella console del browser β”‚ +// β”‚ typeof β†’ ti dice il tipo di una variabile β”‚ +// β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +// πŸ’‘ ESEMPIO (leggi e capisci, NON modificare): +const esempioNomePizza = "Margherita"; +let esempioPrezzo = 7.50; +const esempioDisponibile = true; + +console.log("--- CAPITOLO 1 - Esempio ---"); +console.log("Pizza:", esempioNomePizza); // β†’ "Margherita" +console.log("Prezzo:", esempioPrezzo); // β†’ 7.5 +console.log("Disponibile:", esempioDisponibile); // β†’ true +console.log("Tipo di esempioNomePizza:", typeof esempioNomePizza); // β†’ "string" +console.log("Tipo di esempioPrezzo:", typeof esempioPrezzo); // β†’ "number" + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 1.1 β€” Crea le variabili base della tua pizzeria +// ───────────────────────────────────────────────────────── +// Crea queste variabili e stampale in console: +// +// 1. Una COSTANTE chiamata "nomePizzeria" con il valore "La Pizza del Codice" +// 2. Una COSTANTE chiamata "maxPizze" con il valore 15 +// 3. Una variabile (let) chiamata "pizzeInMenu" con il valore 0 +// 4. Una variabile (let) chiamata "pizzeriaAperta" con il valore true +// +// Poi stampa tutte e 4 con console.log() + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 1.1) + + + +// βœ… VERIFICA: Apri la console (F12). Dovresti vedere: +// "La Pizza del Codice" +// 15 +// 0 +// true + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 1.2 β€” Usa typeof per controllare i tipi +// ───────────────────────────────────────────────────────── +// Stampa il typeof di ognuna delle 4 variabili che hai creato. +// Usa questo formato: console.log("Tipo di nomePizzeria:", typeof nomePizzeria); + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 1.2) + + + +// βœ… VERIFICA: Dovresti vedere in console: +// "Tipo di nomePizzeria: string" +// "Tipo di maxPizze: number" +// "Tipo di pizzeInMenu: number" +// "Tipo di pizzeriaAperta: boolean" + + +// ============================================================================ +// CAPITOLO 2 β€” OPERATORI +// ============================================================================ + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ πŸ“– SPIEGAZIONE β”‚ +// β”‚ β”‚ +// β”‚ OPERATORI ARITMETICI β€” fanno calcoli con i numeri: β”‚ +// β”‚ + (somma) - (sottrazione) * (moltiplicazione) β”‚ +// β”‚ / (divisione) % (resto/modulo) β”‚ +// β”‚ β”‚ +// β”‚ OPERATORI DI CONFRONTO β€” confrontano due valori, restituiscono boolean: β”‚ +// β”‚ === (uguale stretto) !== (diverso stretto) β”‚ +// β”‚ > (maggiore) < (minore) >= <= β”‚ +// β”‚ ⚠️ NON usare == (uguale debole), usa SEMPRE === β”‚ +// β”‚ β”‚ +// β”‚ OPERATORI LOGICI β€” combinano condizioni booleane: β”‚ +// β”‚ && (AND: entrambe vere) || (OR: almeno una vera) ! (NOT: inverte)β”‚ +// β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +// πŸ’‘ ESEMPIO: +console.log("\n--- CAPITOLO 2 - Esempio ---"); +const costoIngredienti = 3.20; +const costoManodopera = 1.80; +const costoTotale = costoIngredienti + costoManodopera; // β†’ 5.00 +console.log("Costo totale:", costoTotale); + +const pizzeOrdinate = 45; +const pizzeDisponibili = 60; +const percentualeVenduta = (pizzeOrdinate / pizzeDisponibili) * 100; // β†’ 75 +console.log("Vendute: " + percentualeVenduta + "%"); + +const Γ¨Costosa = costoTotale > 4; // β†’ true +const Γ¨Economica = costoTotale < 3; // β†’ false +const haIngredienti = costoIngredienti > 0; // β†’ true +const possoPreparare = haIngredienti && pizzeriaAperta; // β†’ true (entrambe vere) +console.log("Posso preparare:", possoPreparare); + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 2.1 β€” Calcoli sulla pizzeria +// ───────────────────────────────────────────────────────── +// 1. Crea una costante "prezzoBase" con valore 8.50 +// 2. Crea una costante "ricarico" con valore 1.3 (ricarico del 30%) +// 3. Crea una costante "prezzoFinale" = prezzoBase * ricarico +// 4. Crea una costante "postiDisponibili" = maxPizze - pizzeInMenu +// (usa le variabili create al Capitolo 1!) +// 5. Stampa prezzoFinale e postiDisponibili + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 2.1) + + + +// βœ… VERIFICA: In console dovresti vedere: +// prezzoFinale β†’ 11.05 +// postiDisponibili β†’ 15 (perchΓ© pizzeInMenu era 0) + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 2.2 β€” Confronti e logica +// ───────────────────────────────────────────────────────── +// 1. Crea una costante "Γ¨Conveniente" che vale true se prezzoFinale < 15 +// 2. Crea una costante "haPostiMenu" che vale true se postiDisponibili > 0 +// 3. Crea una costante "puΓ²Aggiungere" che Γ¨ true se sia Γ¨Conveniente che haPostiMenu sono true (usa &&) +// 4. Crea una costante "menuPieno" che Γ¨ il CONTRARIO di haPostiMenu (usa !) +// 5. Stampa tutti e 4 i valori + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 2.2) + + + +// βœ… VERIFICA: +// Γ¨Conveniente β†’ true (11.05 < 15) +// haPostiMenu β†’ true (15 > 0) +// puΓ²Aggiungere β†’ true +// menuPieno β†’ false + + +// ============================================================================ +// CAPITOLO 3 β€” STRUTTURE CONDIZIONALI +// ============================================================================ + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ πŸ“– SPIEGAZIONE β”‚ +// β”‚ β”‚ +// β”‚ Le condizionali permettono al codice di "decidere" cosa fare. β”‚ +// β”‚ β”‚ +// β”‚ if (condizione) { β”‚ if (condizione) { β”‚ +// β”‚ // se vera β”‚ // se vera β”‚ +// β”‚ } β”‚ } else { β”‚ +// β”‚ β”‚ // se falsa β”‚ +// β”‚ β”‚ } β”‚ +// β”‚ β”‚ +// β”‚ if (cond1) { Per piΓΉ di 2 casi: β”‚ +// β”‚ // ... β”‚ +// β”‚ } else if (cond2) { switch (valore) { β”‚ +// β”‚ // ... case "A": ... break; β”‚ +// β”‚ } else { case "B": ... break; β”‚ +// β”‚ // ... default: ... β”‚ +// β”‚ } } β”‚ +// β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +// πŸ’‘ ESEMPIO: +console.log("\n--- CAPITOLO 3 - Esempio ---"); +const prezzoPizzaEsempio = 12; + +if (prezzoPizzaEsempio >= 18) { + console.log("Fascia: PREMIUM"); +} else if (prezzoPizzaEsempio >= 13) { + console.log("Fascia: GOURMET"); +} else if (prezzoPizzaEsempio >= 8) { + console.log("Fascia: MEDIA"); // ← questo viene stampato (12 >= 8) +} else { + console.log("Fascia: ECONOMICA"); +} + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 3.1 β€” Controlla se una pizza puΓ² essere aggiunta al menu +// ───────────────────────────────────────────────────────── +// Crea una variabile "prezzoCandidata" con valore 9.50 +// Crea una variabile "categoriaCandidata" con valore "Speciale" +// +// Scrivi un if/else che: +// - Se prezzoCandidata > 0 E (&&) categoriaCandidata NON Γ¨ vuota (!== "") +// β†’ stampa "βœ… Pizza accettata nel menu!" +// - Altrimenti +// β†’ stampa "❌ Pizza rifiutata: dati incompleti" + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 3.1) + + + +// βœ… VERIFICA: Dovresti vedere "βœ… Pizza accettata nel menu!" (9.50 > 0 e "Speciale" !== "") + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 3.2 β€” Assegna una fascia di prezzo con else if +// ───────────────────────────────────────────────────────── +// Crea una variabile "prezzo" con valore 14 +// Crea una variabile "fascia" (let, iniziala a "") +// +// Scrivi una catena if / else if / else: +// - prezzo >= 18 β†’ fascia = "Premium" +// - prezzo >= 13 β†’ fascia = "Gourmet" +// - prezzo >= 8 β†’ fascia = "Media" +// - prezzo >= 5 β†’ fascia = "Economica" +// - altrimenti β†’ fascia = "Budget" +// +// Dopo tutti gli if, stampa: console.log("Fascia di prezzo:", fascia) + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 3.2) + + + +// βœ… VERIFICA: Dovresti vedere "Fascia di prezzo: Gourmet" (14 >= 13) + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 3.3 β€” Usa switch per la categoria +// ───────────────────────────────────────────────────────── +// Crea una variabile "categoria" con valore "Gourmet" +// +// Scrivi uno switch(categoria) con questi case: +// - "Classica" β†’ stampa "πŸ• Le pizze della tradizione" +// - "Speciale" β†’ stampa "⭐ Creazioni dello chef" +// - "Gourmet" β†’ stampa "πŸ† Ingredienti ricercati e di alta qualitΓ " +// - "Stagionale" β†’ stampa "🌿 Ingredienti freschi di stagione" +// - default β†’ stampa "❓ Categoria sconosciuta" +// +// RICORDA: metti break; dopo ogni case! + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 3.3) + + + +// βœ… VERIFICA: Dovresti vedere "πŸ† Ingredienti ricercati e di alta qualitΓ " + + +// ============================================================================ +// CAPITOLO 4 β€” CICLI (ITERAZIONI) +// ============================================================================ + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ πŸ“– SPIEGAZIONE β”‚ +// β”‚ β”‚ +// β”‚ I CICLI ripetono un blocco di codice piΓΉ volte. β”‚ +// β”‚ β”‚ +// β”‚ WHILE β€” ripete FINCHΓ‰ la condizione Γ¨ vera: β”‚ +// β”‚ let i = 0; β”‚ +// β”‚ while (i < 5) { β”‚ +// β”‚ console.log(i); // 0, 1, 2, 3, 4 β”‚ +// β”‚ i++; // ⚠️ FONDAMENTALE! Senza, ciclo infinito! β”‚ +// β”‚ } β”‚ +// β”‚ β”‚ +// β”‚ FOR β€” piΓΉ compatto, ha tutto in una riga: β”‚ +// β”‚ for (let i = 0; i < 5; i++) { β”‚ +// β”‚ console.log(i); // 0, 1, 2, 3, 4 β”‚ +// β”‚ } β”‚ +// β”‚ // (inizio; condizione; incremento) β”‚ +// β”‚ β”‚ +// β”‚ break β†’ esce dal ciclo immediatamente β”‚ +// β”‚ continue β†’ salta all'iterazione successiva β”‚ +// β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +// πŸ’‘ ESEMPIO: +console.log("\n--- CAPITOLO 4 - Esempio ---"); +// Prepariamo 5 ordini con un ciclo +for (let i = 1; i <= 5; i++) { + console.log("Ordine #" + i + " preparato"); +} +// β†’ Ordine #1 preparato, Ordine #2 preparato, ... Ordine #5 preparato + +// Esempio con accumulatore: +let sommaPrezzi = 0; +const prezziEsempio = [7.50, 9.00, 12.00, 8.50, 10.00]; +for (let i = 0; i < prezziEsempio.length; i++) { + sommaPrezzi = sommaPrezzi + prezziEsempio[i]; +} +console.log("Somma prezzi:", sommaPrezzi); // β†’ 47 + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 4.1 β€” Prepara i tavoli con while +// ───────────────────────────────────────────────────────── +// Usa un ciclo WHILE per stampare in console: +// "Tavolo 1 pronto" +// "Tavolo 2 pronto" +// "Tavolo 3 pronto" +// "Tavolo 4 pronto" +// +// Suggerimento: +// 1. Crea una variabile contatore: let tavolo = 1; +// 2. Scrivi while (tavolo <= 4) { ... } +// 3. Dentro il while, stampa "Tavolo " + tavolo + " pronto" +// 4. ⚠️ NON dimenticare di incrementare: tavolo++; + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 4.1) + + + +// βœ… VERIFICA: 4 righe in console "Tavolo 1 pronto" ... "Tavolo 4 pronto" + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 4.2 β€” Conta le pizze costose con for +// ───────────────────────────────────────────────────────── +// Dato l'array di prezzi qui sotto, usa un ciclo FOR per contare +// quante pizze costano >= 10 euro +// +// 1. Crea una variabile "pizzeCostose" iniziata a 0 +// 2. Usa un ciclo for che scorre tutto l'array +// 3. Dentro il ciclo, usa un if: se prezziMenu[i] >= 10, incrementa pizzeCostose +// 4. DOPO il ciclo, stampa il risultato + +const prezziMenu = [5, 12, 8, 18, 6, 15, 9, 22]; + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 4.2) + + + +// βœ… VERIFICA: pizzeCostose β†’ 4 (le pizze da 12, 18, 15, 22) + + +// ============================================================================ +// CAPITOLO 5 β€” FUNZIONI +// ============================================================================ + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ πŸ“– SPIEGAZIONE β”‚ +// β”‚ β”‚ +// β”‚ Una FUNZIONE Γ¨ un blocco di codice riutilizzabile con un nome. β”‚ +// β”‚ β”‚ +// β”‚ DICHIARARE una funzione (crearla): β”‚ +// β”‚ function saluta(nome) { ← "nome" Γ¨ un PARAMETRO β”‚ +// β”‚ console.log("Ciao " + nome); β”‚ +// β”‚ } β”‚ +// β”‚ β”‚ +// β”‚ CHIAMARE una funzione (usarla): β”‚ +// β”‚ saluta("Mario"); β†’ stampa "Ciao Mario" β”‚ +// β”‚ saluta("Luigi"); β†’ stampa "Ciao Luigi" β”‚ +// β”‚ β”‚ +// β”‚ RETURN β€” fa "uscire" un valore dalla funzione: β”‚ +// β”‚ function somma(a, b) { β”‚ +// β”‚ return a + b; ← restituisce il risultato β”‚ +// β”‚ } β”‚ +// β”‚ const risultato = somma(3, 4); // risultato = 7 β”‚ +// β”‚ β”‚ +// β”‚ ⚠️ Se una funzione non ha return, restituisce "undefined" β”‚ +// β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +// πŸ’‘ ESEMPIO: +console.log("\n--- CAPITOLO 5 - Esempio ---"); + +function calcolaPrezzo(costoBase) { + const prezzoConRicarico = costoBase * 1.3 + 2; // ricarico 30% + 2€ fissi + return prezzoConRicarico; +} + +const prezzoDiavola = calcolaPrezzo(6); // β†’ 9.8 +console.log("Prezzo Diavola:", prezzoDiavola); + +function presentaPizza(nome, costoBase) { + const prezzoVendita = calcolaPrezzo(costoBase); // una funzione puΓ² chiamarne un'altra! + console.log(nome + " β€” Costo: €" + costoBase + " β†’ Vendita: €" + prezzoVendita); +} + +presentaPizza("Capricciosa", 7); // β†’ "Capricciosa β€” Costo: €7 β†’ Vendita: €11.1" + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 5.1 β€” Crea una funzione per la fascia di prezzo +// ───────────────────────────────────────────────────────── +// Crea una funzione chiamata "calcolaFascia" che: +// - Riceve UN parametro: "prezzo" +// - Usa if/else if (come al Capitolo 3, Step 3.2) per determinare la fascia: +// prezzo >= 18 β†’ return "Premium" +// prezzo >= 13 β†’ return "Gourmet" +// prezzo >= 8 β†’ return "Media" +// prezzo >= 5 β†’ return "Economica" +// altrimenti β†’ return "Budget" +// +// Poi testa la funzione con questi 3 casi: +// console.log(calcolaFascia(20)); // β†’ "Premium" +// console.log(calcolaFascia(10)); // β†’ "Media" +// console.log(calcolaFascia(4)); // β†’ "Budget" + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 5.1) + + + +// βœ… VERIFICA: console mostra "Premium", "Media", "Budget" + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 5.2 β€” Funzione con piΓΉ parametri +// ───────────────────────────────────────────────────────── +// Crea una funzione "creaDescrizione" che: +// - Riceve 3 parametri: nome, ingredienti, prezzo +// - Calcola la fascia usando calcolaFascia(prezzo) (la funzione dello step prima!) +// - Restituisce (return) una STRINGA cosΓ¬: +// "πŸ• NOME β€” Ingredienti: INGREDIENTI | Prezzo: €PREZZO | Fascia: FASCIA" +// +// Poi testala: +// console.log(creaDescrizione("Margherita", "Pomodoro, mozzarella", 8)); + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 5.2) + + + +// βœ… VERIFICA: "πŸ• Margherita β€” Ingredienti: Pomodoro, mozzarella | Prezzo: €8 | Fascia: Media" + + +// ============================================================================ +// CAPITOLO 6 β€” ARRAY +// ============================================================================ + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ πŸ“– SPIEGAZIONE β”‚ +// β”‚ β”‚ +// β”‚ Un ARRAY Γ¨ una lista ordinata di valori. Ogni valore ha un INDICE β”‚ +// β”‚ (posizione) che parte da 0. β”‚ +// β”‚ β”‚ +// β”‚ const colori = ["rosso", "verde", "blu"]; β”‚ +// β”‚ [0] [1] [2] ← indici β”‚ +// β”‚ β”‚ +// β”‚ METODI PRINCIPALI: β”‚ +// β”‚ .push(valore) β†’ aggiunge alla FINE β”‚ +// β”‚ .pop() β†’ rimuove dall'ULTIMO β”‚ +// β”‚ .shift() β†’ rimuove dal PRIMO β”‚ +// β”‚ .splice(i, 1) β†’ rimuove 1 elemento alla posizione i β”‚ +// β”‚ .length β†’ quanti elementi ci sono β”‚ +// β”‚ β”‚ +// β”‚ ITERARE (scorrere) un array: β”‚ +// β”‚ for (let i = 0; i < arr.length; i++) { ... arr[i] ... } β”‚ +// β”‚ for (const elemento of arr) { ... elemento ... } β”‚ +// β”‚ β”‚ +// β”‚ TRASFORMARE con .map(): β”‚ +// β”‚ const doppi = [1, 2, 3].map(function(n) { return n * 2; }); β”‚ +// β”‚ // β†’ [2, 4, 6] β€” crea un NUOVO array trasformato β”‚ +// β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +// πŸ’‘ ESEMPIO: +console.log("\n--- CAPITOLO 6 - Esempio ---"); +const pizzeEsempio = ["Margherita", "Diavola", "Capricciosa"]; +pizzeEsempio.push("Quattro Formaggi"); // β†’ ["Margherita", "Diavola", "Capricciosa", "Quattro Formaggi"] +console.log("Prima pizza:", pizzeEsempio[0]); // β†’ "Margherita" +console.log("Totale:", pizzeEsempio.length); // β†’ 4 + +for (const pizza of pizzeEsempio) { + console.log("β€’ " + pizza); +} + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 6.1 β€” Crea e gestisci l'array del menu +// ───────────────────────────────────────────────────────── +// 1. Crea un array "nomiPizze" con 3 nomi di pizze a scelta +// 2. Aggiungi una quarta pizza con .push() +// 3. Stampa quante pizze ci sono con .length +// 4. Stampa la SECONDA pizza (ricorda: indice 1!) +// 5. Rimuovi l'ultima pizza con .pop() +// 6. Stampa l'array completo + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 6.1) + + + +// βœ… VERIFICA: L'array finale ha 3 elementi (dopo il pop) + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 6.2 β€” Scorri e trasforma l'array +// ───────────────────────────────────────────────────────── +// 1. Usa un ciclo for...of per stampare ogni pizza di nomiPizze cosΓ¬: +// "πŸ• NomePizza Γ¨ nel menu!" +// +// 2. Crea un nuovo array "nomiMaiuscoli" usando .map() che contiene tutti +// i nomi in MAIUSCOLO. Suggerimento: "testo".toUpperCase() +// const nomiMaiuscoli = nomiPizze.map(function(nome) { +// return nome.toUpperCase(); +// }); +// +// 3. Stampa nomiMaiuscoli + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 6.2) + + + +// βœ… VERIFICA: Vedi le 3 pizze con "πŸ•" e poi l'array in maiuscolo + + +// ============================================================================ +// CAPITOLO 7 β€” OGGETTI +// ============================================================================ + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ πŸ“– SPIEGAZIONE β”‚ +// β”‚ β”‚ +// β”‚ Un OGGETTO raggruppa piΓΉ informazioni correlate in un'unica variabile. β”‚ +// β”‚ È come una "scheda" con proprietΓ : chiave β†’ valore. β”‚ +// β”‚ β”‚ +// β”‚ const persona = { β”‚ +// β”‚ nome: "Mario", // proprietΓ  "nome" con valore "Mario" β”‚ +// β”‚ etΓ : 25, β”‚ +// β”‚ attivo: true β”‚ +// β”‚ }; β”‚ +// β”‚ β”‚ +// β”‚ ACCESSO: β”‚ +// β”‚ persona.nome β†’ "Mario" (dot notation) β”‚ +// β”‚ persona["nome"] β†’ "Mario" (bracket notation) β”‚ +// β”‚ β”‚ +// β”‚ MODIFICA: β”‚ +// β”‚ persona.etΓ  = 26; β†’ cambia il valore β”‚ +// β”‚ persona.email = "..."; β†’ AGGIUNGE una nuova proprietΓ  β”‚ +// β”‚ delete persona.email; β†’ RIMUOVE una proprietΓ  β”‚ +// β”‚ β”‚ +// β”‚ DESTRUTTURAZIONE β€” estrae proprietΓ  in variabili: β”‚ +// β”‚ const { nome, etΓ  } = persona; β”‚ +// β”‚ console.log(nome); // β†’ "Mario" β”‚ +// β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +// πŸ’‘ ESEMPIO: +console.log("\n--- CAPITOLO 7 - Esempio ---"); +const pizzaSample = { + nome: "Napoletana", + ingredienti: "Pomodoro, mozzarella, acciughe, capperi", + prezzo: 9.50, + disponibile: true, + dettagli: { // oggetto ANNIDATO (dentro un altro oggetto) + calorie: 850, + tempoPreparazione: 12 + } +}; + +console.log(pizzaSample.nome); // β†’ "Napoletana" +console.log(pizzaSample.dettagli.calorie); // β†’ 850 + +const { nome: nomeEstratto, prezzo: prezzoEstratto } = pizzaSample; +console.log(nomeEstratto, prezzoEstratto); // β†’ "Napoletana" 9.5 + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 7.1 β€” Crea un oggetto pizza +// ───────────────────────────────────────────────────────── +// Crea un oggetto "miaPizza" con queste proprietΓ : +// - nome: un nome di pizza a scelta (string) +// - ingredienti: gli ingredienti (string) +// - prezzo: un numero (es. 10.50) +// - disponibile: true +// +// Poi: +// 1. Stampa il nome con dot notation +// 2. Cambia il prezzo a 12.00 +// 3. Aggiungi una nuova proprietΓ  "fascia" usando la funzione calcolaFascia(miaPizza.prezzo) +// 4. Stampa l'oggetto completo: console.log(miaPizza) + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 7.1) + + + +// βœ… VERIFICA: L'oggetto ha 5 proprietΓ  (nome, ingredienti, prezzo, disponibile, fascia) + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 7.2 β€” Array di oggetti + destrutturazione +// ───────────────────────────────────────────────────────── +// 1. Crea un array "menu" con 3 oggetti pizza (ognuno ha: nome, ingredienti, prezzo) +// Esempio: +// const menu = [ +// { nome: "Margherita", ingredienti: "Pomodoro, mozzarella", prezzo: 7 }, +// { nome: "Diavola", ingredienti: "Pomodoro, mozzarella, salame piccante", prezzo: 9 }, +// { nome: "Tartufo", ingredienti: "Crema di tartufo, mozzarella, funghi", prezzo: 16 } +// ]; +// +// 2. Usa un ciclo for...of per stampare ogni pizza. +// Dentro il ciclo, usa la DESTRUTTURAZIONE per estrarre nome e prezzo: +// +// for (const pizza of menu) { +// const { nome, prezzo } = pizza; +// console.log(nome + " β€” €" + prezzo); +// } + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 7.2) + + + +// βœ… VERIFICA: Vedi 3 righe tipo "Margherita β€” €7" + + +// ============================================================================ +// CAPITOLO 8 β€” DOM: SELEZIONE E MODIFICA +// ============================================================================ + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ πŸ“– SPIEGAZIONE β”‚ +// β”‚ β”‚ +// β”‚ Il DOM (Document Object Model) Γ¨ il modo in cui JavaScript "vede" la β”‚ +// β”‚ pagina HTML. Puoi selezionare elementi e modificarli. β”‚ +// β”‚ β”‚ +// β”‚ SELEZIONARE UN ELEMENTO: β”‚ +// β”‚ document.querySelector("#id") β†’ seleziona per ID β”‚ +// β”‚ document.querySelector(".classe") β†’ seleziona per classe β”‚ +// β”‚ document.querySelector("tag") β†’ seleziona per tag β”‚ +// β”‚ β”‚ +// β”‚ MODIFICARE: β”‚ +// β”‚ elemento.textContent = "testo"; β†’ cambia il testo β”‚ +// β”‚ elemento.innerHTML = "bold"; β†’ cambia l'HTML interno β”‚ +// β”‚ β”‚ +// β”‚ LEGGERE UN INPUT: β”‚ +// β”‚ const valore = document.querySelector("#mio-input").value; β”‚ +// β”‚ β”‚ +// β”‚ STILI: β”‚ +// β”‚ elemento.style.color = "red"; β”‚ +// β”‚ elemento.style.backgroundColor = "#333"; β”‚ +// β”‚ β”‚ +// β”‚ CLASSI CSS: β”‚ +// β”‚ elemento.classList.add("classe") β”‚ +// β”‚ elemento.classList.remove("classe") β”‚ +// β”‚ elemento.classList.toggle("classe") β†’ aggiunge/rimuove β”‚ +// β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +// πŸ’‘ ESEMPIO: +console.log("\n--- CAPITOLO 8 - Esempio ---"); +// Seleziona il titolo del menu e stampa il testo +const titoloEl = document.querySelector("#titolo-menu"); +console.log("Titolo attuale:", titoloEl.textContent); // β†’ "Il Nostro Menu" + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 8.1 β€” Modifica il titolo e le statistiche +// ───────────────────────────────────────────────────────── +// 1. Seleziona l'elemento con id "titolo-menu" e cambia il suo textContent +// in "πŸ• " + nomePizzeria (la variabile del Capitolo 1!) +// +// 2. Seleziona l'elemento con id "stat-totale" e metti come textContent +// il numero di pizze nel tuo "menu" (array del Capitolo 7, Step 7.2) +// Suggerimento: menu.length +// +// 3. Seleziona l'elemento con id "stat-totale" e cambia il suo colore +// in "#d35400" usando: elemento.style.color = "#d35400"; + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 8.1) + + + +// βœ… VERIFICA: Il titolo nella pagina Γ¨ cambiato e il numero di pizze Γ¨ visibile + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 8.2 β€” Leggi i valori dagli input +// ───────────────────────────────────────────────────────── +// 1. Seleziona l'input con id "input-nome" e salva il suo .value in una variabile +// (sarΓ  vuoto, va bene cosΓ¬ per ora) +// +// 2. Seleziona l'input con id "input-prezzo" e salva il suo .value +// ⚠️ ATTENZIONE: .value restituisce SEMPRE una stringa! +// Per convertirlo in numero usa: Number(elemento.value) oppure parseFloat(elemento.value) +// +// 3. Stampa in console i valori letti +// +// 4. Seleziona il div con id "messaggio", cambia il suo textContent in "Benvenuto nella Pizzeria!" +// e rendilo visibile cambiando lo stile: elemento.style.display = "block" +// Aggiungi anche la classe "msg-successo": elemento.classList.add("msg-successo") + +// πŸ‘‡ SCRIVI QUI IL TUO CODICE (Step 8.2) + + + +// βœ… VERIFICA: Un messaggio verde "Benvenuto nella Pizzeria!" appare nella pagina + + +// ============================================================================ +// CAPITOLO 9 β€” DOM: CREAZIONE ELEMENTI E EVENTI +// ============================================================================ + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ πŸ“– SPIEGAZIONE β”‚ +// β”‚ β”‚ +// β”‚ CREARE ELEMENTI dal nulla: β”‚ +// β”‚ const li = document.createElement("li"); β†’ crea un
  • β”‚ +// β”‚ li.textContent = "Testo"; β†’ metti il testo β”‚ +// β”‚ lista.appendChild(li); β†’ inseriscilo nella pagina β”‚ +// β”‚ β”‚ +// β”‚ EVENTI β€” far succedere cose quando l'utente interagisce: β”‚ +// β”‚ β”‚ +// β”‚ bottone.addEventListener("click", function() { β”‚ +// β”‚ // codice eseguito quando si clicca il bottone β”‚ +// β”‚ }); β”‚ +// β”‚ β”‚ +// β”‚ input.addEventListener("input", function(e) { β”‚ +// β”‚ // e.target.value β†’ il testo che l'utente sta scrivendo β”‚ +// β”‚ console.log(e.target.value); β”‚ +// β”‚ }); β”‚ +// β”‚ β”‚ +// β”‚ Il PATTERN fondamentale per le app web Γ¨: β”‚ +// β”‚ 1. L'utente fa qualcosa (click, scrive, ecc.) β”‚ +// β”‚ 2. Il JS legge i dati β”‚ +// β”‚ 3. Il JS aggiorna l'array/variabile (i DATI) β”‚ +// β”‚ 4. Il JS aggiorna la pagina (il DOM) per riflettere i nuovi dati β”‚ +// β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +// πŸ’‘ ESEMPIO: +console.log("\n--- CAPITOLO 9 - Esempio ---"); + +// Creiamo un elemento e lo mettiamo nella pagina +function creaElementoPizza(testo) { + const li = document.createElement("li"); + + const infoDiv = document.createElement("div"); + infoDiv.classList.add("info-pizza"); + + const nomeSpan = document.createElement("span"); + nomeSpan.classList.add("nome-pizza"); + nomeSpan.textContent = testo; + + infoDiv.appendChild(nomeSpan); + li.appendChild(infoDiv); + + return li; +} + +// Mettiamolo nella lista +const listaPizze = document.querySelector("#lista-pizze"); +// (Non aggiungiamo l'esempio per non sporcare la lista) + +// ───────────────────────────────────────────────────────── +// ✏️ STEP 9.1 β€” Renderizza il menu nella pagina +// ───────────────────────────────────────────────────────── +// Prendi l'array "menu" (Capitolo 7) e mostra ogni pizza nella lista. +// +// 1. Seleziona l'elemento con id "lista-pizze" (la