108 lines
4.3 KiB
Markdown
108 lines
4.3 KiB
Markdown
# 🎯 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
|
|
|
|
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
|
|
10. Per il **terzo esercizio** (API), prima avvia il server: apri il terminale nella cartella `server-api` e lancia `npm 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.**
|