🎯 Ripasso Completo JavaScript — Piano Esercizi
Obiettivo
Questi esercizi coprono TUTTO il programma JavaScript, dal primo console.log fino alle API.
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
- Fai la fork di questo repository (in alto a destra)
- Clona la tua copia sul computer
- Apri il file
index.htmldel primo esercizo sul browser - Apri la Console del browser (F12 → Console)
- Lavora sul file
script.jsdel primo esercizio seguendo i capitoli dall'alto al basso - Guarda l'output nella console per verificare che stai facendo giusto
- Non saltare nessun step — ogni step usa ciò che hai fatto prima
- Salva e ricarica la pagina per vedere i risultati
- Quando hai finito il primo esercizio, ripeti i passaggi 3-8 per il secondo esercizio
- Per il terzo esercizio (API), prima avvia il server: apri il terminale nella cartella
server-apie lancianpm start
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.
Esercizio 3 — "La Biblioteca Online" (API)
Un esercizio dedicato alla comunicazione con un server API usando fetch().
Copre le operazioni CRUD:
| Step | Operazione | Metodo HTTP | Cosa fa |
|---|---|---|---|
| 1 | READ | GET | Caricare tutti i libri |
| 2 | READ | GET | Cercare un libro per ID |
| 3 | CREATE | POST | Aggiungere un nuovo libro |
| 4 | UPDATE | PATCH | Segnare un libro come letto |
| 5 | DELETE | DELETE | Eliminare un libro |
| 6 | BONUS | — | Caricamento auto, filtri, ricerca |
Prerequisito: avviare il server API prima di iniziare (chiedere al docente).
Per ogni step trovi:
- 📖 Spiegazione del concetto (fetch, async/await, metodi HTTP)
- 💡 Esempio di sintassi
- ✏️ TODO — il codice che devi scrivere tu
- ✅ Verifica — come controllare che hai fatto giusto
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.