Lezione 6: Se Allora (If/Else) 🤔

📚 Benvenuto nella Lezione 6!

Bentornato Decision Maker! 🤔 Finora il tuo codice faceva sempre le stesse cose. Ora imparerai a fargli prendere DECISIONI!

Le condizioni (if/else) sono uno dei concetti più importanti della programmazione. Permettono al tuo codice di fare cose diverse in base alla situazione!

In questa lezione creerai un quiz interattivo che reagisce alle risposte dell'utente! 🎮

🎯 Cosa Imparerai

✅ If base: eseguire codice solo se una condizione è vera
✅ If/Else: scegliere tra due opzioni
✅ If/Else If/Else: gestire più condizioni
✅ Operatori di confronto (>, <, ===, !==)
✅ Operatori logici (&&, ||, !)
✅ Progetto: Quiz a risposta multipla completo

🎮 Perché le Condizioni Sono Importanti?

Le condizioni sono usate OVUNQUE:

🔐 Login: Se password corretta → entra, altrimenti → errore
🛒 E-commerce: Se carrello vuoto → mostra messaggio
🎮 Giochi: Se vita = 0 → game over
📧 Form: Se email valida → invia, altrimenti → errore
💳 Pagamenti: Se saldo sufficiente → paga

👀 Demo: Controllo Età

Guarda come le condizioni cambiano il risultato! Inserisci un'età e vedi cosa succede:

🎂 Controllo Età

Inserisci la tua età:

🤔 Come Funziona?

Il codice usa if/else if/else per decidere:

const età = Number(input.value);

if (età < 18) {
    // Minorenne
    risultato = 'Sei minorenne! 👶';
} else if (età < 65) {
    // Adulto
    risultato = 'Sei un adulto! 👨';
} else {
    // Senior
    risultato = 'Sei un senior! 👴';
}

🎯 If Base: La Condizione Semplice

L'if esegue codice SOLO se la condizione è vera (true).

Sintassi

JavaScript

if (condizione) {
    // Esegui questo codice se condizione è TRUE
}

Esempio Pratico

JavaScript

const età = 16;

if (età < 18) {
    console.log('Sei minorenne!');
}

// Questo viene eseguito perché 16 < 18 è TRUE

📌 Quando Usare If Base

Quando vuoi fare qualcosa SOLO in un caso specifico
Esempio: Mostra banner sconto solo se è il compleanno
Esempio: Aggiungi classe CSS solo se menu è aperto

↔️ If/Else: Scegli tra Due Opzioni

if/else ti permette di fare una cosa SE vero, ALTRIMENTI un'altra.

Sintassi

JavaScript

if (condizione) {
    // Esegui se TRUE
} else {
    // Esegui se FALSE
}

Esempio Pratico

JavaScript

const password = 'secret123';
const inputPassword = 'secret123';

if (password === inputPassword) {
    console.log('✅ Accesso consentito!');
} else {
    console.log('❌ Password errata!');
}

✅ Regola d'Oro

Se hai due possibilità (sì/no, vero/falso, successo/errore), usa if/else!

🔀 If/Else If/Else: Più Condizioni

Per gestire più di due casi, usa else if!

Sintassi

JavaScript

if (condizione1) {
    // Caso 1
} else if (condizione2) {
    // Caso 2
} else if (condizione3) {
    // Caso 3
} else {
    // Tutti gli altri casi
}

Esempio: Voti Scolastici

JavaScript

const voto = 85;

if (voto >= 90) {
    console.log('🏆 Ottimo!');
} else if (voto >= 75) {
    console.log('👍 Buono!');
} else if (voto >= 60) {
    console.log('✅ Sufficiente');
} else {
    console.log('❌ Insufficiente');
}

⚠️ Ordine Importante!

Le condizioni vengono controllate dall'alto verso il basso. Quando una è TRUE, le altre vengono saltate!

⚖️ Operatori di Confronto

Per creare condizioni, usi gli operatori di confronto:

===

Uguale

5 === 5 → true

!==

Diverso

5 !== 3 → true

>

Maggiore

10 > 5 → true

<

Minore

3 < 7 → true

>=

Maggiore o Uguale

5 >= 5 → true

<=

Minore o Uguale

4 <= 8 → true

📌 Usa === non ==

In JavaScript, usa SEMPRE === (tre uguali) invece di == (due uguali). È più sicuro e preciso!

5 == '5'   // true (converte tipi) ❌
5 === '5'  // false (controlla anche tipo) ✅

Operatori Logici

Per combinare più condizioni:

JavaScript

// && (AND) - Entrambe devono essere vere
if (età >= 18 && haPatente === true) {
    console.log('Puoi guidare!');
}

// || (OR) - Almeno una deve essere vera
if (giorno === 'sabato' || giorno === 'domenica') {
    console.log('È weekend!');
}

// ! (NOT) - Inverte il valore
if (!isLoggedIn) {
    console.log('Devi fare login');
}

✍️ Esercizio Guidato: Semaforo Intelligente

Crea un semaforo che cambia colore e messaggio in base al colore selezionato!

📋 Cosa Devi Fare

Seleziona il select #trafficColor
Seleziona il bottone #btnCheckTraffic
Seleziona i 3 bulbi del semaforo (#redBulb, #yellowBulb, #greenBulb)
Seleziona il messaggio #trafficMessage
Aggiungi evento click al bottone
Usa if/else if/else per controllare il colore selezionato
Accendi il bulbo corretto (aggiungi classe 'red', 'yellow', 'green')
Mostra il messaggio appropriato

📝 Struttura HTML da Usare

Ecco gli elementi HTML con cui lavorerai:

HTML - Elementi del Semaforo

<!-- Select colore -->
<select id="trafficColor">
    <option value="red">Rosso</option>
    <option value="yellow">Giallo</option>
    <option value="green">Verde</option>
</select>

<!-- Bottone -->
<button id="btnCheckTraffic">Cambia Semaforo</button>

<!-- Bulbi semaforo -->
<div id="redBulb" class="traffic-light-bulb"></div>
<div id="yellowBulb" class="traffic-light-bulb"></div>
<div id="greenBulb" class="traffic-light-bulb"></div>

<!-- Messaggio -->
<div id="trafficMessage"></div>

📌 IDs da Usare nel JavaScript:

#trafficColor → Select colore (valori: "red", "yellow", "green")
#btnCheckTraffic → Bottone
#redBulb → Bulbo rosso
#yellowBulb → Bulbo giallo
#greenBulb → Bulbo verde
#trafficMessage → Messaggio

💡 Hint: Usa classList.add() e classList.remove() per le classi!

🚦 Semaforo Intelligente

Seleziona colore:

Seleziona tutti gli elementi necessari:

const colorSelect = document.querySelector('#trafficColor');
const button = document.querySelector('#btnCheckTraffic');
const redBulb = document.querySelector('#redBulb');
const yellowBulb = document.querySelector('#yellowBulb');
const greenBulb = document.querySelector('#greenBulb');
const message = document.querySelector('#trafficMessage');

Prima di accendere un bulbo, spegni tutti:

// Spegni tutti i bulbi
redBulb.classList.remove('red');
yellowBulb.classList.remove('yellow');
greenBulb.classList.remove('green');

Usa if/else if per ogni colore:

if (color === 'red') {
    redBulb.classList.add('red');
    message.textContent = '🛑 STOP - Non passare!';
    message.className = 'traffic-message red';
} else if (color === 'yellow') {
    yellowBulb.classList.add('yellow');
    message.textContent = '⚠️ ATTENZIONE - Rallenta!';
    message.className = 'traffic-message yellow';
} else if (color === 'green') {
    greenBulb.classList.add('green');
    message.textContent = '✅ VAI - Passa pure!';
    message.className = 'traffic-message green';
}

// Scrivi qui il tuo codice!

// 1. Seleziona tutti gli elementi


// 2. Aggiungi evento click al bottone


// 3. Dentro l'evento:
//    - Prendi il colore selezionato
//    - Spegni tutti i bulbi (rimuovi classi)
//    - Usa if/else if per accendere il bulbo corretto
//    - Mostra il messaggio appropriato

🎮 Progetto Finale: Quiz Interattivo

È il momento del progetto vero! 🚀

Creerai un quiz completo con:

✅ 5 domande a risposta multipla
✅ Feedback immediato (giusto/sbagliato)
✅ Punteggio totale alla fine
✅ Colori che cambiano in base alla risposta
✅ Navigazione tra le domande

🎯 Obiettivi del Progetto

✅ Array di domande con risposte
✅ Variabile per tracciare domanda corrente
✅ If/else per controllare risposta
✅ Incrementare punteggio se corretto
✅ Mostrare risultato finale

📝 Riferimento Elementi HTML

Prima di iniziare, ecco tutti gli ID che userai:

HTML - Mappa degli Elementi

<!-- Info Quiz -->
<div id="quizQuestionNum">Domanda 1/5</div>
<div id="quizScore">Punteggio: 0</div>

<!-- Domanda -->
<div id="quizQuestion">Domanda qui...</div>

<!-- Opzioni (4 bottoni) -->
<button id="quizOption0" class="quiz-option">Opzione A</button>
<button id="quizOption1" class="quiz-option">Opzione B</button>
<button id="quizOption2" class="quiz-option">Opzione C</button>
<button id="quizOption3" class="quiz-option">Opzione D</button>

<!-- Feedback -->
<div id="quizFeedback"></div>

<!-- Bottone prossima domanda -->
<button id="btnNextQuestion">Prossima Domanda</button>

📌 Guida Rapida IDs:

Display:

#quizQuestionNum
#quizScore
#quizQuestion
#quizFeedback

Opzioni:

#quizOption0
#quizOption1
#quizOption2
#quizOption3
#btnNextQuestion

🎮 Il Quiz Live

🎮 Quiz JavaScript

Testa le tue conoscenze!

Domanda 1/5

Punteggio: 0/5

Quale operatore confronta valore E tipo?

💻 Completa il Codice del Quiz

Segui i commenti e completa le parti mancanti:

// PROGETTO: Quiz Interattivo Completo

// 1. ARRAY DELLE DOMANDE (già pronto)
const domande = [
    {
        domanda: 'Quale operatore confronta valore E tipo?',
        opzioni: ['==', '===', '=', '!=='],
        corretta: 1  // Indice della risposta corretta (0-3)
    },
    {
        domanda: 'Cosa stampa: console.log(5 > 3)?',
        opzioni: ['5', '3', 'true', 'false'],
        corretta: 2
    },
    {
        domanda: 'Come si scrive "se età è maggiore di 18"?',
        opzioni: ['if età > 18', 'if (età > 18)', 'if [età > 18]', 'età > 18 if'],
        corretta: 1
    },
    {
        domanda: 'Cosa fa l\'operatore &&?',
        opzioni: ['OR logico', 'NOT logico', 'AND logico', 'Assegnazione'],
        corretta: 2
    },
    {
        domanda: 'Quale NON è un operatore di confronto?',
        opzioni: ['===', '!==', '>=', '++'],
        corretta: 3
    }
];

// 2. VARIABILI
let domandaCorrente = 0;
let punteggio = 0;

// 3. SELEZIONA ELEMENTI
const questionText = document.querySelector('#quizQuestion');
const option0 = document.querySelector('#quizOption0');
const option1 = document.querySelector('#quizOption1');
const option2 = document.querySelector('#quizOption2');
const option3 = document.querySelector('#quizOption3');
const feedback = document.querySelector('#quizFeedback');
const btnNext = document.querySelector('#btnNextQuestion');
const questionNum = document.querySelector('#quizQuestionNum');
const scoreDisplay = document.querySelector('#quizScore');

// 4. FUNZIONE PER MOSTRARE DOMANDA
function mostraDomanda() {
    const domanda = domande[domandaCorrente];
    
    // Mostra numero domanda
    questionNum.textContent = `Domanda ${domandaCorrente + 1}/5`;
    
    // Mostra domanda
    questionText.textContent = domanda.domanda;
    
    // Mostra opzioni
    option0.textContent = 'A) ' + domanda.opzioni[0];
    option1.textContent = 'B) ' + domanda.opzioni[1];
    option2.textContent = 'C) ' + domanda.opzioni[2];
    option3.textContent = 'D) ' + domanda.opzioni[3];
    
    // Reset stili
    option0.className = 'quiz-option';
    option1.className = 'quiz-option';
    option2.className = 'quiz-option';
    option3.className = 'quiz-option';
    
    // Nascondi feedback e bottone next
    feedback.style.display = 'none';
    btnNext.style.display = 'none';
}

// 5. FUNZIONE PER CONTROLLARE RISPOSTA
function controllaRisposta(indiceRisposta) {
    const domanda = domande[domandaCorrente];
    
    // COMPLETA: Usa if/else per controllare se la risposta è corretta
    if (indiceRisposta === domanda.corretta) {
        // Risposta CORRETTA
        punteggio++; // Aumenta punteggio
        
        // Colora opzione di verde
        document.querySelector('#quizOption' + indiceRisposta).className = 'quiz-option correct';
        
        // Mostra feedback positivo
        feedback.textContent = '✅ Corretto! Ben fatto!';
        feedback.className = 'quiz-feedback correct';
        feedback.style.display = 'block';
    } else {
        // Risposta SBAGLIATA
        
        // Colora opzione scelta di rosso
        document.querySelector('#quizOption' + indiceRisposta).className = 'quiz-option wrong';
        
        // Colora opzione corretta di verde
        document.querySelector('#quizOption' + domanda.corretta).className = 'quiz-option correct';
        
        // Mostra feedback negativo
        feedback.textContent = '❌ Sbagliato! La risposta corretta era ' + domanda.opzioni[domanda.corretta];
        feedback.className = 'quiz-feedback wrong';
        feedback.style.display = 'block';
    }
    
    // Aggiorna punteggio
    scoreDisplay.textContent = `Punteggio: ${punteggio}/5`;
    
    // Mostra bottone prossima domanda
    btnNext.style.display = 'block';
    
    // Disabilita tutte le opzioni
    option0.disabled = true;
    option1.disabled = true;
    option2.disabled = true;
    option3.disabled = true;
}

// 6. EVENT LISTENERS OPZIONI
option0.addEventListener('click', () => controllaRisposta(0));
option1.addEventListener('click', () => controllaRisposta(1));
option2.addEventListener('click', () => controllaRisposta(2));
option3.addEventListener('click', () => controllaRisposta(3));

// 7. PROSSIMA DOMANDA
btnNext.addEventListener('click', function() {
    domandaCorrente++;
    
    // COMPLETA: Controlla se ci sono altre domande
    if (domandaCorrente < domande.length) {
        // Ci sono altre domande
        mostraDomanda();
        
        // Riabilita opzioni
        option0.disabled = false;
        option1.disabled = false;
        option2.disabled = false;
        option3.disabled = false;
    } else {
        // Quiz finito! Mostra risultato
        mostraRisultatoFinale();
    }
});

// 8. RISULTATO FINALE
function mostraRisultatoFinale() {
    questionText.textContent = '🎉 Quiz Completato!';
    
    // Nascondi opzioni
    document.querySelector('.quiz-options').style.display = 'none';
    
    // Mostra punteggio finale
    let messaggio;
    if (punteggio === 5) {
        messaggio = '🏆 PERFETTO! Hai risposto a tutte correttamente!';
    } else if (punteggio >= 3) {
        messaggio = '👍 Bravo! Buon risultato!';
    } else {
        messaggio = '📚 Continua a studiare!';
    }
    
    feedback.innerHTML = `
        <div style="font-size: 3rem; margin: 2rem 0;">${punteggio}/5</div>
        <div>${messaggio}</div>
    `;
    feedback.className = 'quiz-feedback correct';
    feedback.style.display = 'block';
    
    btnNext.style.display = 'none';
}

// 9. INIZIALIZZA IL QUIZ
mostraDomanda();

🎯 Conclusione: Sei un Logic Master!

✅ Recap: Cosa Hai Imparato

✅ If base per una condizione
✅ If/Else per due opzioni
✅ If/Else If/Else per più condizioni
✅ Operatori di confronto (===, !==, >, <, >=, <=)
✅ Operatori logici (&&, ||, !)
✅ Quiz interattivo completo con feedback!

🚀 Challenge: Vai Oltre!

Migliora il quiz aggiungendo:

⏱️ Timer: Aggiungi countdown per ogni domanda
🏆 Classifica: Salva i migliori punteggi
🎲 Ordine Casuale: Mescola le domande
💯 Percentuale: Mostra % risposte corrette
🎨 Categorie: Quiz divisi per argomento

📚 Prossima Lezione

Nella Lezione 7 imparerai i Confronti e Controlli Avanzati! Validazione form, password strength e molto altro! 🔐