Lezione 8: Switch e Menu 🎯

📚 Benvenuto nella Lezione 8!

Bentornato Navigator! 🎯 Hai imparato if/else per le condizioni. Ma cosa fai quando hai 10, 20 o più opzioni da gestire?

Lo switch statement è perfetto per questi casi! È più pulito, leggibile e performante quando hai molte condizioni basate su UN valore.

In questa lezione creerai un sistema di tab interattivo come quelli di app professionali! 📱

🎯 Cosa Imparerai

✅ Sintassi switch statement completa
✅ Case multipli e break
✅ Default case per gestire il resto
✅ Quando usare switch vs if/else
✅ Navigazione tra contenuti
✅ Progetto: Menu tab con 4 sezioni

🎮 Dove Si Usa Switch?

Switch è perfetto per:

📱 Menu navigazione: Home, About, Services, Contact
🎮 Stati di gioco: menu, playing, paused, game-over
🌍 Lingue: it, en, es, fr, de
📅 Giorni settimana: lun, mar, mer...
🎨 Temi: light, dark, blue, custom

👀 Demo: Selettore Giorni

Clicca un giorno e vedi il messaggio cambiare!

📅 Che giorno è oggi?

Seleziona un giorno

🤔 Come Funziona?

Il codice usa uno switch:

switch (giorno) {
    case 'lun':
        messaggio = '💼 Inizio settimana!';
        break;
    case 'ven':
        messaggio = '🎉 Ultimo giorno!';
        break;
    case 'sab':
    case 'dom':
        messaggio = '🏖️ Weekend!';
        break;
    default:
        messaggio = 'Giorno lavorativo';
}

🔀 Switch Statement: Sintassi Base

Switch valuta UN'espressione e confronta con diversi case:

Sintassi

JavaScript

switch (espressione) {
    case valore1:
        // Codice se espressione === valore1
        break;
    
    case valore2:
        // Codice se espressione === valore2
        break;
    
    default:
        // Codice se nessun case corrisponde
}

Esempio Pratico: Voti

JavaScript

const voto = 'A';

switch (voto) {
    case 'A':
        console.log('🏆 Eccellente!');
        break;
    
    case 'B':
        console.log('👍 Ottimo!');
        break;
    
    case 'C':
        console.log('✅ Buono');
        break;
    
    case 'D':
        console.log('⚠️ Sufficiente');
        break;
    
    default:
        console.log('❌ Insufficiente');
}

📌 Come Funziona

Switch valuta l'espressione (es. voto)
Confronta con ogni case usando ===
Quando trova un match, esegue quel codice
Il break esce dallo switch
default viene eseguito se nessun case corrisponde

🛑 Break e Default

Perché serve Break?

Senza break, il codice continua nei case successivi!

JavaScript - SENZA Break (❌)

const giorno = 1;

switch (giorno) {
    case 1:
        console.log('Lunedì');
        // Manca break! ❌
    case 2:
        console.log('Martedì');
        // Anche questo viene eseguito!
    case 3:
        console.log('Mercoledì');
}

// Output: Lunedì, Martedì, Mercoledì 😱

Case Multipli (Fall-Through Voluto)

A volte vuoi che più case eseguano lo stesso codice:

JavaScript - Fall-Through (✅)

const giorno = 'sab';

switch (giorno) {
    case 'lun':
    case 'mar':
    case 'mer':
    case 'gio':
    case 'ven':
        console.log('💼 Giorno lavorativo');
        break;
    
    case 'sab':
    case 'dom':
        console.log('🏖️ Weekend!');
        break;
    
    default:
        console.log('⚠️ Giorno non valido');
}

Default Case

JavaScript

const lingua = 'jp';

switch (lingua) {
    case 'it':
        saluto = 'Ciao';
        break;
    case 'en':
        saluto = 'Hello';
        break;
    case 'es':
        saluto = 'Hola';
        break;
    default:
        saluto = 'Hello (default)'; // 'jp' non è nei case
}

⚠️ Ricorda!

SEMPRE metti break (tranne fall-through voluto)
default è opzionale ma consigliato
default può essere ovunque, ma di solito è alla fine

⚖️ Switch vs If/Else

Quando usare switch e quando if/else?

Criterio	Switch	If/Else
Confronti	✅ UN valore con molte opzioni	Condizioni diverse
Leggibilità	✅ Più pulito con 5+ opzioni	Meno chiaro con molti else if
Flessibilità	Solo uguaglianza (===)	✅ Qualsiasi condizione (>, <, &&, \|\|)
Performance	✅ Più veloce con molti case	Controlla ogni condizione

Esempio Confronto

Con Switch ✅

switch (ruolo) {
    case 'admin':
        accesso = 'completo';
        break;
    case 'editor':
        accesso = 'modifica';
        break;
    case 'viewer':
        accesso = 'lettura';
        break;
    default:
        accesso = 'guest';
}

Con If/Else

if (ruolo === 'admin') {
    accesso = 'completo';
} else if (ruolo === 'editor') {
    accesso = 'modifica';
} else if (ruolo === 'viewer') {
    accesso = 'lettura';
} else {
    accesso = 'guest';
}

✅ Quando Usare Cosa

Usa Switch quando:

Confronti UN valore con 5+ opzioni
Hai valori esatti da confrontare (stringhe, numeri)
Menu, navigazione, stati

Usa If/Else quando:

Condizioni complesse (&&, ||, >, <)
Range di valori (età > 18)
Condizioni diverse tra loro

✍️ Esercizio Guidato: Calculator Display

Crea una calcolatrice che mostra operazioni diverse usando switch!

📋 Cosa Devi Fare

Seleziona i 2 input numeri e il select operazione
Seleziona il bottone calcola e il div risultato
Aggiungi evento click al bottone
Prendi i valori e convertili in numeri
Usa switch per gestire le 4 operazioni (+, -, *, /)
Mostra il risultato con operatore emoji

📝 Struttura HTML da Usare

Ecco gli elementi HTML con cui lavorerai:

HTML - Elementi Calcolatrice

<!-- Numeri -->
<input id="calcNum1" type="number" value="10">
<input id="calcNum2" type="number" value="5">

<!-- Operazione -->
<select id="calcOperation">
    <option value="+">Addizione</option>
    <option value="-">Sottrazione</option>
    <option value="*">Moltiplicazione</option>
    <option value="/">Divisione</option>
</select>

<!-- Controlli -->
<button id="btnCalculate">Calcola</button>
<div id="calcResult"></div>

📌 IDs da Usare:

#calcNum1 → Primo numero
#calcNum2 → Secondo numero
#calcOperation → Operazione (valori: "+", "-", "*", "/")
#btnCalculate → Bottone calcola
#calcResult → Div risultato

🧮 Calcolatrice

Seleziona tutti gli elementi:

const num1Input = document.querySelector('#calcNum1');
const num2Input = document.querySelector('#calcNum2');
const operationSelect = document.querySelector('#calcOperation');
const button = document.querySelector('#btnCalculate');
const result = document.querySelector('#calcResult');

Usa switch per le operazioni:

const operation = operationSelect.value;

switch (operation) {
    case '+':
        risultato = num1 + num2;
        simbolo = '➕';
        break;
    case '-':
        // completa...
    // altri case...
}

Mostra con template literal:

result.innerHTML = `
    ${num1} ${simbolo} ${num2} = 
    ${risultato}
`;

// Scrivi qui il tuo codice!

// 1. Seleziona elementi


// 2. Aggiungi evento click


// 3. Prendi valori e converti


// 4. Usa switch per operazione


// 5. Mostra risultato

🎮 Progetto Finale: Menu Tab Profilo Completo

È il momento del progetto vero! 📱

Creerai un sistema di tab professionale con:

✅ 4 tab: Info, Skills, Projects, Settings
✅ Switch per gestire la navigazione
✅ Contenuti diversi per ogni tab
✅ Tab attivo evidenziato
✅ Animazioni smooth

🎯 Obiettivi del Progetto

✅ Click su tab → mostra contenuto corrispondente
✅ Nascondi tutti i panel prima
✅ Switch per decidere quale mostrare
✅ Classe 'active' sul tab selezionato
✅ Classe 'active' sul panel visibile

📝 Riferimento Elementi HTML

HTML - IDs Principali

<!-- Tab Buttons (4) -->
<button id="tabInfo" class="profile-tab">📋 Info</button>
<button id="tabSkills">💪 Skills</button>
<button id="tabProjects">🚀 Projects</button>
<button id="tabSettings">⚙️ Settings</button>

<!-- Content Panels (4) -->
<div id="panelInfo" class="profile-panel">...</div>
<div id="panelSkills">...</div>
<div id="panelProjects">...</div>
<div id="panelSettings">...</div>

📱 Il Profilo Live

👨‍💻

Mario Rossi

Full Stack Developer

📧

Email

mario.rossi@email.com

📱

Telefono

+39 123 456 7890

📍

Sede

Milano, Italia

JavaScript

React

Node.js

CSS

🚀 Progetti Recenti

🌐

E-commerce Platform

Full-stack application

📱

Mobile App

React Native

⚙️ Preferenze

Notifiche Email

Profilo Pubblico

💻 Completa il Codice del Menu Tab

// PROGETTO: Menu Tab Interattivo

// 1. SELEZIONA TAB BUTTONS
const tabInfo = document.querySelector('#tabInfo');
const tabSkills = document.querySelector('#tabSkills');
const tabProjects = document.querySelector('#tabProjects');
const tabSettings = document.querySelector('#tabSettings');

// 2. SELEZIONA PANELS
const panelInfo = document.querySelector('#panelInfo');
const panelSkills = document.querySelector('#panelSkills');
const panelProjects = document.querySelector('#panelProjects');
const panelSettings = document.querySelector('#panelSettings');

// 3. FUNZIONE PER CAMBIARE TAB
function cambiaTab(tabNome) {
    // Nascondi tutti i panel
    panelInfo.classList.remove('active');
    panelSkills.classList.remove('active');
    panelProjects.classList.remove('active');
    panelSettings.classList.remove('active');
    
    // Rimuovi active da tutti i tab
    tabInfo.classList.remove('active');
    tabSkills.classList.remove('active');
    tabProjects.classList.remove('active');
    tabSettings.classList.remove('active');
    
    // COMPLETA: Usa switch per mostrare il tab corretto
    switch (tabNome) {
        case 'info':
            // Mostra panel info e attiva tab info
            // TUO CODICE QUI
            
            break;
            
        case 'skills':
            // Mostra panel skills e attiva tab skills
            // TUO CODICE QUI
            
            break;
            
        case 'projects':
            // COMPLETA
            
            break;
            
        case 'settings':
            // COMPLETA
            
            break;
            
        default:
            // Mostra info di default
            panelInfo.classList.add('active');
            tabInfo.classList.add('active');
    }
}

// 4. AGGIUNGI EVENT LISTENERS
tabInfo.addEventListener('click', () => cambiaTab('info'));
tabSkills.addEventListener('click', () => cambiaTab('skills'));
tabProjects.addEventListener('click', () => cambiaTab('projects'));
tabSettings.addEventListener('click', () => cambiaTab('settings'));

console.log('✅ Menu tab inizializzato!');

🎯 Conclusione: Sei un Navigation Master!

✅ Recap: Cosa Hai Imparato

✅ Sintassi switch completa (case, break, default)
✅ Fall-through voluto per case multipli
✅ Quando usare switch vs if/else
✅ Switch per navigazione menu
✅ Sistema tab completo e professionale!

🚀 Challenge: Vai Oltre!

Migliora il menu tab aggiungendo:

⌨️ Keyboard Nav: Frecce destra/sinistra per cambiare tab
🔗 URL Sync: Sincronizza tab con URL hash (#info)
💾 Salva Tab: Ricorda ultimo tab visitato
📊 Più Sezioni: Aggiungi tab Activity, Messages
🎨 Temi: Switch per cambiare tema profilo

🎉 Hai Completato il Modulo 2!

Complimenti! Hai padroneggiato Decisioni e Logica! Ora sai usare if/else, switch, validazioni e molto altro! 🎓

Prossimo modulo: Loop e Ripetizioni 🔄