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