Operatori e Condizioni

Bentornato.

Nella lezione precedente hai imparato variabili e tipi di dati.

JavaScript ora può ricordare le cose.

Molto impressionante.

Oggi insegniamo a JavaScript a prendere decisioni.

Qui il codice diventa più interessante.

Finora JavaScript poteva dire:

“Conosco il prezzo.”

Oggi JavaScript può dire:

“Se il prezzo è troppo alto, mostra un avviso.”

Questo è un grande passo.

I programmi sono pieni di decisioni:

se l’utente è loggato, mostra la dashboard;
se la password è troppo corta, mostra un errore;
se il prodotto è disponibile, mostra il pulsante di acquisto;
se l’utente clicca 47 volte, forse respira profondamente.

JavaScript usa operatori e condizioni per decidere cosa deve succedere.

In pratica, oggi JavaScript inizia a giudicare le situazioni.

Educatamente.

Più o meno.

Cosa Imparerai

In questa lezione imparerai:

operatori aritmetici;
operatori di assegnazione;
operatori di confronto;
la differenza tra = e ===;
come usare if;
come usare else;
come usare else if;
come usare operatori logici;
come combinare condizioni;
come mostrare messaggi diversi nella pagina.

Alla fine di questa lezione, JavaScript sarà capace di prendere decisioni di base.

Decisioni piccole.

Decisioni utili.

Non decisioni di vita.

Per favore, non lasciare ancora che JavaScript scelga il tuo taglio di capelli.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir javascript-lesson3
cd javascript-lesson3
touch index.html
touch script.js

Il progetto dovrebbe essere così:

javascript-lesson3/
  index.html
  script.js

Apri la cartella nel tuo editor.

Useremo prima la console.

Poi mostreremo i risultati nella pagina.

Passo dopo passo.

Niente sprint nel caos.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Operatori e Condizioni</title>
</head>
<body>
  <h1>Operatori e Condizioni</h1>
  <p>Apri la console del browser per vedere l’output di JavaScript.</p>

  <script src="script.js"></script>
</body>
</html>

Apri il file nel browser.

Apri la console:

fai click destro sulla pagina;
scegli Ispeziona;
apri la tab Console.

Ora JavaScript è pronto a calcolare e giudicare.

Una combinazione pericolosa.

Operatori Aritmetici

Gli operatori aritmetici servono per la matematica.

Esempio:

const a = 10;
const b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Output:

13
7
30
3.3333333333333335

Operatori aritmetici comuni:

+   addizione
-   sottrazione
*   moltiplicazione
/   divisione
%   resto
**  elevamento a potenza

Esempio:

const number = 10;

console.log(number % 3);
console.log(2 ** 3);

Output:

1
8

10 % 3 restituisce 1, perché 10 diviso 3 lascia resto 1.

2 ** 3 significa 2 elevato alla potenza di 3.

Quindi:

2 * 2 * 2 = 8

JavaScript può fare matematica.

A volte in modo troppo onesto.

Ma può farla.

Operatori di Assegnazione

Conosci già questo:

let score = 10;

Il simbolo = assegna un valore.

Non significa “uguale” come nella lezione di matematica.

Significa:

“Metti questo valore in questa variabile.”

Esempio:

let score = 10;

score = 20;

console.log(score);

Output:

Puoi anche aggiornare valori usando operatori scorciatoia:

let points = 10;

points += 5;
console.log(points);

points -= 3;
console.log(points);

points *= 2;
console.log(points);

points /= 4;
console.log(points);

Output:

Sono scorciatoie.

points += 5;

significa:

points = points + 5;

Utile.

Breve.

Meno digitazione.

Le dita approvano.

Operatori di Confronto

Gli operatori di confronto confrontano valori e restituiscono true o false.

Esempio:

const age = 18;

console.log(age >= 18);
console.log(age < 18);

Output:

true
false

Operatori di confronto comuni:

>    maggiore di
<    minore di
>=   maggiore o uguale a
<=   minore o uguale a
===  stesso valore e stesso tipo
!==  valore o tipo diverso

Esempio:

const price = 100;

console.log(price > 50);
console.log(price < 50);
console.log(price === 100);
console.log(price !== 200);

Output:

true
false
true
true

Gli operatori di confronto sono la base delle condizioni.

Aiutano JavaScript a decidere.

Se la risposta è true, fai qualcosa.

Se la risposta è false, fai qualcos’altro.

Molto utile.

Molto giudicante.

Differenza tra = e ===

Questo è importante.

Molto importante.

Non saltarlo.

= assegna un valore.

const age = 33;

=== confronta un valore.

console.log(age === 33);

Esempio:

const age = 33;

console.log(age === 33);
console.log(age === 40);

Output:

true
false

Non scrivere questo dentro una condizione:

if (age = 33) {
  console.log("Age is 33");
}

Quella è assegnazione, non confronto.

Usa questo:

if (age === 33) {
  console.log("Age is 33");
}

Un = significa:

“Salva questo.”

Tre === significano:

“Confronta questo.”

Questo errore è comune.

JavaScript non sempre ti salva.

A volte JavaScript ti guarda cadere e dice:

“Interessante.”

Evita == per Ora

JavaScript ha anche ==.

Esempio:

console.log(5 == "5");

Questo restituisce:

true

Perché?

Perché == prova a convertire i valori prima di confrontarli.

Questo può creare confusione.

Usa === invece.

Meglio:

console.log(5 === "5");

Output:

false

Perché?

Perché un valore è un numero e l’altro è una stringa.

Per principianti, regola semplice:

Usa ===.

Usa !==.

Evita ==.

Le tue future sessioni di debug saranno più corte.

E il caffè resterà più caldo.

if Statement

Un if statement esegue codice solo quando una condizione è vera.

Esempio:

const age = 20;

if (age >= 18) {
  console.log("Sei maggiorenne.");
}

Output:

Sei maggiorenne.

Struttura:

if (condition) {
  // il codice parte se la condizione è true
}

Esempio:

const isLoggedIn = true;

if (isLoggedIn) {
  console.log("Bentornato!");
}

La condizione è true, quindi il messaggio appare.

Se la condizione è false, il codice dentro il blocco non parte.

JavaScript è severo.

Niente true?

Niente azione.

else Statement

else parte quando la condizione dell’if è false.

Esempio:

const age = 16;

if (age >= 18) {
  console.log("Puoi entrare.");
} else {
  console.log("Sei troppo giovane.");
}

Output:

Sei troppo giovane.

Questo significa:

Se age è maggiore o uguale a 18, mostra il primo messaggio.

Altrimenti, mostra il secondo messaggio.

JavaScript ora è diventato un piccolo buttafuori digitale.

Con parentesi graffe.

else if Statement

Usa else if quando hai più di due possibilità.

Esempio:

const score = 75;

if (score >= 90) {
  console.log("Eccellente!");
} else if (score >= 60) {
  console.log("Buon lavoro!");
} else {
  console.log("Continua a praticare.");
}

Output:

Buon lavoro!

JavaScript controlla dall’alto verso il basso.

Prima condizione:

score >= 90

False.

Seconda condizione:

score >= 60

True.

Quindi JavaScript esegue quel blocco e si ferma.

Non continua a controllare dopo aver trovato una condizione vera.

Efficiente.

Quasi sospettosamente efficiente.

Operatori Logici

Gli operatori logici combinano condizioni.

Operatori logici comuni:

&&   and
||   or
!    not

&& significa AND

Entrambe le condizioni devono essere vere.

const age = 25;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Puoi entrare.");
}

Questo significa:

L’età deve essere almeno 18.

E l’utente deve avere un biglietto.

Entrambe.

Niente biglietto?

Niente ingresso.

Anche se l’utente fa gli occhi tristi a JavaScript.

|| significa OR

Almeno una condizione deve essere vera.

const isAdmin = false;
const isEditor = true;

if (isAdmin || isEditor) {
  console.log("Puoi modificare questa pagina.");
}

Questo significa:

Se l’utente è admin O editor, può modificare.

Una condizione vera basta.

JavaScript dice:

“Abbastanza. Entra.”

! significa NOT

! inverte un boolean.

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Per favore, fai login.");
}

!isLoggedIn significa:

“non loggato.”

Dato che isLoggedIn è false, !isLoggedIn diventa true.

All’inizio può sembrare strano.

Ma è molto utile.

È il modo di JavaScript per dire:

“In realtà, il contrario.”

Costruisci un Esempio Login

Sostituisci script.js con questo:

const userName = "Viktor";
const isLoggedIn = true;
const isAdmin = false;

if (isLoggedIn && isAdmin) {
  console.log(`Benvenuto admin ${userName}.`);
} else if (isLoggedIn) {
  console.log(`Benvenuto ${userName}.`);
} else {
  console.log("Per favore, fai login.");
}

Output:

Benvenuto Viktor.

Perché?

isLoggedIn è true;
isAdmin è false;
la prima condizione richiede entrambe true;
la seconda condizione richiede solo isLoggedIn.

Quindi JavaScript mostra il messaggio normale di benvenuto.

Bene.

L’utente entra.

Ma senza poteri admin.

Niente corona digitale oggi.

Mostra Condizioni nella Pagina

Ora facciamo un piccolo esempio di disponibilità prodotto.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Operatori e Condizioni</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    .success {
      color: #15803d;
      font-weight: 700;
    }

    .warning {
      color: #b45309;
      font-weight: 700;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Operatori e Condizioni</h1>

  <div class="card">
    <h2 id="productName"></h2>
    <p id="productPrice"></p>
    <p id="productStatus"></p>
  </div>

  <script src="script.js"></script>
</body>
</html>

Ora aggiorna script.js:

const productName = "JavaScript Course";
const price = 49;
const budget = 60;
const isAvailable = true;

const productNameElement = document.getElementById("productName");
const productPriceElement = document.getElementById("productPrice");
const productStatusElement = document.getElementById("productStatus");

productNameElement.textContent = productName;
productPriceElement.textContent = `Prezzo: €${price}`;

if (isAvailable && price <= budget) {
  productStatusElement.textContent = "Buone notizie! Questo prodotto è disponibile e rientra nel tuo budget.";
  productStatusElement.className = "success";
} else if (isAvailable && price > budget) {
  productStatusElement.textContent = "Il prodotto è disponibile, ma supera il tuo budget.";
  productStatusElement.className = "warning";
} else {
  productStatusElement.textContent = "Spiacente, questo prodotto non è disponibile.";
  productStatusElement.className = "warning";
}

Aggiorna il browser.

Dovresti vedere le informazioni del prodotto e un messaggio di stato.

Prova a cambiare:

const budget = 30;

Poi aggiorna.

Prova a cambiare:

const isAvailable = false;

Aggiorna di nuovo.

Ora JavaScript mostra messaggi diversi in base ai dati.

Questa è vera logica condizionale.

La pagina non sta più solo mostrando informazioni.

Sta decidendo cosa mostrare.

Tiny brain unlocked.

Errori Comuni

Usare = al Posto di ===

Sbagliato:

if (age = 18) {
  console.log("Adult");
}

Corretto:

if (age === 18) {
  console.log("Adult");
}

Un = assegna.

Tre === confrontano.

Tatuatelo nell’anima da developer.

O semplicemente ricordalo.

Fa meno male.

Dimenticare le Parentesi Graffe

Sbagliato:

if (isAvailable)
  console.log("Available");
  console.log("Buy now");

Questo può creare confusione.

Usa le parentesi graffe:

if (isAvailable) {
  console.log("Available");
  console.log("Buy now");
}

Le parentesi graffe rendono il blocco chiaro.

Sono piccole.

Sono graffe.

Sono importanti.

Condizioni nell’Ordine Sbagliato

Esempio:

const score = 95;

if (score >= 60) {
  console.log("Good");
} else if (score >= 90) {
  console.log("Excellent");
}

Questo stampa:

Good

Perché?

Perché score >= 60 è true, quindi JavaScript si ferma lì.

Meglio:

if (score >= 90) {
  console.log("Excellent");
} else if (score >= 60) {
  console.log("Good");
}

Controlla prima le condizioni più specifiche.

JavaScript legge dall’alto verso il basso.

Come una persona molto letterale.

Pratica

Crea variabili:

nome utente;
età;
ha biglietto;
è VIP.

Regole:

se l’utente è VIP, mostra: Welcome VIP;
altrimenti, se ha almeno 18 anni e ha un biglietto, mostra: You can enter;
altrimenti, se ha meno di 18 anni, mostra: You are too young;
altrimenti mostra: You need a ticket.

Esempio:

const userName = "Anna";
const age = 22;
const hasTicket = true;
const isVip = false;

if (isVip) {
  console.log(`Welcome VIP, ${userName}.`);
} else if (age >= 18 && hasTicket) {
  console.log(`${userName}, you can enter.`);
} else if (age < 18) {
  console.log(`${userName}, you are too young.`);
} else {
  console.log(`${userName}, you need a ticket.`);
}

Cambia i valori e testa tutti i risultati possibili.

Non leggerlo soltanto.

Eseguilo.

Rompilo.

Sistemalo.

JavaScript rispetta l’azione.

Più o meno.

Mini Sfida

Crea un calcolatore di sconto.

Variabili:

nome prodotto;
prezzo;
budget utente;
codice sconto attivo oppure no.

Regole:

se il codice sconto è attivo, riduci il prezzo di 20;
se il prezzo finale è minore o uguale al budget, mostra: You can buy this product;
altrimenti mostra: This product is too expensive.

Mostra il risultato nella pagina.

Usa:

variabili;
operatori aritmetici;
operatori di confronto;
if;
else;
template literals;
document.getElementById;
textContent.

Bonus:

Aggiungi classi CSS diverse per messaggi success e warning.

Questo è un pattern reale.

Prezzi.

Budget.

Messaggi.

Condizioni.

Il web è praticamente questo, ma con più riunioni.

Riassunto

Oggi hai imparato che:

gli operatori aritmetici fanno matematica;
gli operatori di assegnazione aggiornano valori;
gli operatori di confronto restituiscono true o false;
= assegna un valore;
=== confronta valore e tipo;
!== controlla che i valori non siano uguali;
if esegue codice quando una condizione è vera;
else esegue codice quando la condizione è falsa;
else if gestisce più casi;
&& significa AND;
|| significa OR;
! significa NOT;
l’ordine delle condizioni conta;
JavaScript può mostrare contenuti diversi in base ai dati.

Questo è un passo importante.

Ora il tuo codice può scegliere.

Non perfettamente.

Non sempre saggiamente.

Ma può scegliere.

Ed è così che iniziano le applicazioni interattive.

Prossima Lezione

Nella prossima lezione impareremo le funzioni.

Le funzioni aiutano a riusare codice ed evitare ripetizioni.

Perché se copi lo stesso codice dieci volte, JavaScript magari lo esegue.

Ma il tuo futuro io piangerà in silenzio.