Lezione 7: Confronti e Controlli 🔐

📚 Benvenuto nella Lezione 7!

Bentornato Validator! 🔐 Hai imparato le basi di if/else. Ora è il momento di diventare un MAESTRO dei confronti!

Gli operatori di confronto e le validazioni sono fondamentali per creare form sicuri, login protetti e app affidabili.

In questa lezione creerai un validatore password professionale con barra di sicurezza in tempo reale! 🔐

🎯 Cosa Imparerai

✅ Padroneggiare tutti gli operatori di confronto
✅ Combinare condizioni con && (AND) e || (OR)
✅ Validare email, username, password
✅ Controllare lunghezza stringhe
✅ Verificare presenza di caratteri speciali
✅ Progetto: Password Validator con strength meter

🎮 Perché Validazione è Cruciale?

La validazione protegge la tua app e i tuoi utenti:

🔐 Sicurezza: Password deboli = account hackerati
✉️ Email valide: Evita errori di iscrizione
💾 Dati puliti: Impedisci input invalidi nel database
😊 UX migliore: Feedback immediato all'utente
🛡️ Prevenzione: Blocca attacchi (SQL injection, XSS)

👀 Demo: Validazioni in Azione

Prova queste validazioni e vedi come funzionano!

📧 Validazione Email

👤 Validazione Username

Min 3 caratteri, max 15

🔢 Validazione Età

Deve essere 18-120

🤔 Come Funzionano?

Ogni validazione usa confronti e operatori logici:

// Email: deve contenere @ e .
if (email.includes('@') && email.includes('.')) { ... }

// Username: lunghezza tra 3 e 15
if (username.length >= 3 && username.length <= 15) { ... }

// Età: tra 18 e 120
if (età >= 18 && età <= 120) { ... }

⚖️ Operatori di Confronto Approfonditi

Gli operatori di confronto restituiscono sempre true o false.

Esempi Pratici con Risultati

10

>

5

true

3

<

7

true

"ciao"

===

"ciao"

true

5

!==

3

true

10

>=

10

true

8

<=

3

false

Confrontare Stringhe

JavaScript

// Confronto esatto (case-sensitive!)
"Mario" === "Mario"  // true
"Mario" === "mario"  // false (M maiuscola!)

// Confronto ignorando maiuscole
const nome1 = "Mario";
const nome2 = "mario";
nome1.toLowerCase() === nome2.toLowerCase(); // true

// Confronto lunghezza
"ciao".length === 4  // true
"password".length >= 8  // true

⚠️ Attenzione: === vs ==

Usa SEMPRE === (strict equality):

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

0 == false   // true ❌
0 === false  // false ✅

🔗 Operatori Logici: AND, OR, NOT

Gli operatori logici combinano più condizioni!

1. && (AND) - Entrambe devono essere vere

JavaScript

const età = 25;
const haPatente = true;

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

// Password sicura: min 8 caratteri E contiene numero
const password = "sicura123";
if (password.length >= 8 && /\d/.test(password)) {
    console.log('Password accettata!');
}

2. || (OR) - Almeno una deve essere vera

JavaScript

const giorno = "sabato";

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

// Username valido: almeno 3 caratteri O email valida
const input = "user@email.com";
if (input.length >= 3 || input.includes('@')) {
    console.log('Input valido');
}

3. ! (NOT) - Inverte il valore

JavaScript

const isLoggedIn = false;

// ! inverte: false diventa true
if (!isLoggedIn) {
    console.log('Devi fare login!');
}

// Equivalente a:
if (isLoggedIn === false) {
    console.log('Devi fare login!');
}

Tabella Verità

A	B	A && B	A \|\| B	!A
true	true	true	true	false
true	false	false	true	false
false	true	false	true	true
false	false	false	false	true

✅ Pattern di Validazione Comuni

Ecco i pattern più usati nella validazione:

1. Validare Email

JavaScript

function validaEmail(email) {
    // Base: deve contenere @ e .
    return email.includes('@') && email.includes('.');
}

// Più avanzata: @ prima del punto
function validaEmailAvanzata(email) {
    const posAt = email.indexOf('@');
    const posPunto = email.lastIndexOf('.');
    
    return posAt > 0 && posPunto > posAt + 1;
}

2. Validare Username

JavaScript

function validaUsername(username) {
    // Tra 3 e 15 caratteri
    return username.length >= 3 && username.length <= 15;
}

// Con controllo caratteri speciali
function validaUsernameAvanzato(username) {
    const valido = username.length >= 3 && username.length <= 15;
    const noSpazi = !username.includes(' ');
    
    return valido && noSpazi;
}

3. Validare Password

JavaScript

function validaPassword(password) {
    // Requisiti base
    const lunghezzaOk = password.length >= 8;
    const haMaiuscola = /[A-Z]/.test(password);
    const haNumero = /[0-9]/.test(password);
    
    // Tutte DEVONO essere vere
    return lunghezzaOk && haMaiuscola && haNumero;
}

✅ Best Practices Validazione

Validazione in tempo reale (evento 'input')
Feedback chiaro e immediato
Mostra requisiti prima che l'utente inizi
Usa colori (verde=ok, rosso=errore)
Valida sia lato client CHE lato server

✍️ Esercizio Guidato: Validatore Form Completo

Crea un validatore che controlla nome, email e età in tempo reale!

📋 Cosa Devi Fare

Seleziona i 3 input e i 3 div feedback
Aggiungi evento 'input' a ciascun campo
Valida nome: min 3 caratteri, max 30
Valida email: contiene @ e .
Valida età: tra 18 e 120
Aggiungi/rimuovi classi 'valid' o 'invalid'
Mostra feedback appropriato

📝 Struttura HTML da Usare

Ecco gli elementi HTML con cui lavorerai:

HTML - Elementi del Form

<!-- Input Nome -->
<input id="formName" type="text" placeholder="Nome">
<div id="nameFeedback"></div>

<!-- Input Email -->
<input id="formEmail" type="email" placeholder="Email">
<div id="emailValidFeedback"></div>

<!-- Input Età -->
<input id="formAge" type="number" placeholder="Età">
<div id="ageValidFeedback"></div>

📌 IDs da Usare nel JavaScript:

#formName → Input nome
#nameFeedback → Feedback nome
#formEmail → Input email
#emailValidFeedback → Feedback email
#formAge → Input età
#ageValidFeedback → Feedback età

✅ Validatore Form

Nome (3-30 caratteri):

Email (deve contenere @ e .):

Età (18-120):

Seleziona tutti gli elementi necessari:

const nameInput = document.querySelector('#formName');
const nameFeedback = document.querySelector('#nameFeedback');
const emailInput = document.querySelector('#formEmail');
const emailFeedback = document.querySelector('#emailValidFeedback');
const ageInput = document.querySelector('#formAge');
const ageFeedback = document.querySelector('#ageValidFeedback');

Usa && per controllare min E max:

nameInput.addEventListener('input', function() {
    const nome = nameInput.value.trim();
    
    if (nome.length >= 3 && nome.length <= 30) {
        nameInput.classList.add('valid');
        nameInput.classList.remove('invalid');
        nameFeedback.textContent = '✅ Nome valido';
        nameFeedback.className = 'validation-feedback valid';
    } else {
        nameInput.classList.add('invalid');
        nameInput.classList.remove('valid');
        nameFeedback.textContent = '❌ 3-30 caratteri richiesti';
        nameFeedback.className = 'validation-feedback invalid';
    }
});

Stesso pattern per email e età:

// Email: usa includes('@') && includes('.')
// Età: usa età >= 18 && età <= 120 (ricorda Number()!)

// Scrivi qui il tuo codice!

// 1. Seleziona tutti gli elementi


// 2. Valida NOME (3-30 caratteri)


// 3. Valida EMAIL (contiene @ e .)


// 4. Valida ETÀ (18-120, ricorda di convertire in numero!)

🎮 Progetto Finale: Password Validator Professionale

È il momento del progetto vero! 🔐

Creerai un validatore password professionale con:

✅ Barra di sicurezza che si riempie (debole/media/forte)
✅ 5 requisiti da soddisfare visualizzati
✅ Feedback in tempo reale
✅ Statistiche password (lunghezza, caratteri speciali...)
✅ Bottone mostra/nascondi password

🎯 Obiettivi del Progetto

✅ Controllo lunghezza minima (8 caratteri)
✅ Controllo maiuscola presente
✅ Controllo minuscola presente
✅ Controllo numero presente
✅ Controllo carattere speciale presente
✅ Calcolo forza password
✅ Visualizzazione requisiti soddisfatti

📝 Riferimento Elementi HTML

Prima di iniziare, ecco tutti gli ID che userai:

HTML - Mappa degli Elementi

<!-- Input Password -->
<input id="passwordInput" type="password">

<!-- Barra forza -->
<div id="strengthBar" class="strength-bar"></div>
<div id="strengthText"></div>

<!-- Requisiti (5 div) -->
<div id="reqLength" class="requirement-item">
    <span class="requirement-icon">⭕</span>
    <span>Minimo 8 caratteri</span>
</div>
<div id="reqUpper">Maiuscola</div>
<div id="reqLower">Minuscola</div>
<div id="reqNumber">Numero</div>
<div id="reqSpecial">Carattere speciale</div>

📌 Guida Rapida IDs:

#passwordInput → Input password
#strengthBar → Barra colorata
#strengthText → Testo "Debole/Media/Forte"
#reqLength → Requisito lunghezza
#reqUpper → Requisito maiuscola
#reqLower → Requisito minuscola
#reqNumber → Requisito numero
#reqSpecial → Requisito speciale

🔐 Il Validatore Live

🔐 Password Validator

Requisiti Password:

⭕ Minimo 8 caratteri

⭕ Almeno una MAIUSCOLA

⭕ Almeno una minuscola

⭕ Almeno un numero (0-9)

⭕ Carattere speciale (!@#$%)

💻 Completa il Codice del Validatore

Il codice base è pronto, tu devi completare i controlli!

// PROGETTO: Password Validator Professionale

// 1. SELEZIONA ELEMENTI
const passwordInput = document.querySelector('#passwordInput');
const strengthBar = document.querySelector('#strengthBar');
const strengthText = document.querySelector('#strengthText');
const reqLength = document.querySelector('#reqLength');
const reqUpper = document.querySelector('#reqUpper');
const reqLower = document.querySelector('#reqLower');
const reqNumber = document.querySelector('#reqNumber');
const reqSpecial = document.querySelector('#reqSpecial');

// 2. EVENTO INPUT (in tempo reale)
passwordInput.addEventListener('input', function() {
    const password = passwordInput.value;
    
    // 3. CONTROLLA REQUISITI
    // COMPLETA: Controlla se password.length >= 8
    const hasLength = // TUO CODICE QUI
    
    // COMPLETA: Controlla se contiene MAIUSCOLA (usa /[A-Z]/.test(password))
    const hasUpper = // TUO CODICE QUI
    
    // COMPLETA: Controlla se contiene minuscola
    const hasLower = /[a-z]/.test(password);
    
    // COMPLETA: Controlla se contiene numero
    const hasNumber = // TUO CODICE QUI
    
    // COMPLETA: Controlla se contiene carattere speciale
    const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);
    
    // 4. AGGIORNA VISUALIZZAZIONE REQUISITI
    updateRequirement(reqLength, hasLength);
    updateRequirement(reqUpper, hasUpper);
    updateRequirement(reqLower, hasLower);
    updateRequirement(reqNumber, hasNumber);
    updateRequirement(reqSpecial, hasSpecial);
    
    // 5. CALCOLA FORZA PASSWORD
    let strength = 0;
    if (hasLength) strength++;
    if (hasUpper) strength++;
    if (hasLower) strength++;
    if (hasNumber) strength++;
    if (hasSpecial) strength++;
    
    // 6. AGGIORNA BARRA E TESTO
    // COMPLETA: Usa if/else if per impostare la forza
    if (strength <= 2) {
        // Debole
        strengthBar.className = 'strength-bar weak';
        strengthText.textContent = '🔴 Debole';
        strengthText.className = 'strength-text weak';
    } else if (strength <= 4) {
        // Media
        strengthBar.className = // TUO CODICE QUI
        strengthText.textContent = '🟡 Media';
        strengthText.className = // TUO CODICE QUI
    } else {
        // Forte
        strengthBar.className = 'strength-bar strong';
        strengthText.textContent = '🟢 Forte';
        strengthText.className = 'strength-text strong';
    }
});

// 7. FUNZIONE HELPER PER AGGIORNARE REQUISITI
function updateRequirement(element, isMet) {
    if (isMet) {
        element.classList.add('met');
        element.querySelector('.requirement-icon').textContent = '✅';
    } else {
        element.classList.remove('met');
        element.querySelector('.requirement-icon').textContent = '⭕';
    }
}

// 8. TOGGLE PASSWORD VISIBILITY
function togglePasswordVisibility() {
    const input = document.querySelector('#passwordInput');
    if (input.type === 'password') {
        input.type = 'text';
    } else {
        input.type = 'password';
    }
}

🎯 Conclusione: Sei un Validation Master!

✅ Recap: Cosa Hai Imparato

✅ Operatori di confronto (===, !==, >, <, >=, <=)
✅ Operatori logici (&&, ||, !)
✅ Validazione email, username, età
✅ Pattern validazione comuni
✅ Regex base per password
✅ Password validator professionale completo!

🚀 Challenge: Vai Oltre!

Migliora il validatore aggiungendo:

🔄 Conferma Password: Campo per confermare password
📊 Password Meter: Mostra % forza password
🎲 Generatore: Genera password sicura automatica
💾 Salva: Salva password generate (sicure!)
📋 Copia: Bottone per copiare password

📚 Prossima Lezione

Nella Lezione 8 imparerai lo Switch e Menu! Navigazione tra tab, menu interattivi e molto altro! 🎯