Lezione 3 – JavaScript

Operatori ed Espressioni JavaScript

Scopri gli operatori aritmetici, di confronto, logici e le espressioni per manipolare dati

🎯 Cosa Imparerai in Questa Lezione

Gli operatori sono simboli che eseguono operazioni sui dati:
somme, confronti, decisioni logiche. Le espressioni sono combinazioni
di valori, variabili e operatori che producono un risultato. Sono gli strumenti
fondamentali per scrivere logica nei tuoi programmi!

💡 Cos’è un’Espressione?

Un’espressione è qualsiasi codice che produce un valore. Ad esempio: 

5 + 3          // Espressione → produce 8
x * 2          // Espressione → produce il doppio di x  
età >= 18      // Espressione → produce true o false
nome + " " + cognome  // Espressione → produce stringa concatenata

🎯 Prova Subito JavaScript

Clicca sui pulsanti per vedere JavaScript in azione! Questa è la dimostrazione pratica di come interagire con l’utente.



➕ Operatori Aritmetici

Gli operatori aritmetici eseguono operazioni matematiche su numeri.

Operatore Nome Descrizione Esempio Risultato
+ Addizione Somma due numeri 10 + 3 13
- Sottrazione Sottrae il secondo dal primo 10 - 3 7
* Moltiplicazione Moltiplica due numeri 10 * 3 30
/ Divisione Divide il primo per il secondo 10 / 3 3.333…
% Modulo Resto della divisione 10 % 3 1
** Esponente Eleva alla potenza (ES6) 10 ** 3 1000
Esempi Operatori Aritmetici
let a = 10;
let b = 3;

// Operazioni base
console.log(a + b);   // 13 (addizione)
console.log(a - b);   // 7  (sottrazione)
console.log(a * b);   // 30 (moltiplicazione)
console.log(a / b);   // 3.3333... (divisione)

// Modulo (resto)
console.log(10 % 3);  // 1 (10 diviso 3 = 3 con resto 1)
console.log(17 % 5);  // 2 (17 diviso 5 = 3 con resto 2)
console.log(8 % 2);   // 0 (8 diviso 2 = 4 con resto 0, pari!)

// Esponente
console.log(2 ** 3);  // 8  (2 alla terza = 2*2*2)
console.log(5 ** 2);  // 25 (5 al quadrado)
console.log(10 ** 3); // 1000 (10 al cubo)

🧮 Prova a Calcolare (Visualmente!)

Guarda cosa succede quando clicchi i pulsanti – i risultati appaiono sullo schermo!




💡 Cosa stai vedendo?

I risultati appaiono come popup visivi (non solo in console!).
Questo dimostra come JavaScript può modificare la pagina web in tempo reale!

🧮 Calcolatrice Visiva Completa

Prova una calcolatrice interattiva che appare direttamente nella pagina!

Nota: La calcolatrice è un overlay interattivo creato con JavaScript.
Dimostra come si possono costruire interfacce utente complete!

Incremento e Decremento

1
Post-incremento/decremento (x++ / x–)

Prima usa il valore, poi incrementa/decrementa.

Post-incremento
let x = 5;

console.log(x++);  // 5 (mostra il valore, POI incrementa)
console.log(x);    // 6 (ora è incrementato)

let y = 10;
console.log(y--);  // 10 (mostra il valore, POI decrementa)
console.log(y);    // 9 (ora è decrementato)

2
Pre-incremento/decremento (++x / –x)

Prima incrementa/decrementa, poi usa il valore.

Pre-incremento
let x = 5;

console.log(++x);  // 6 (PRIMA incrementa, poi mostra)
console.log(x);    // 6

let y = 10;
console.log(--y);  // 9 (PRIMA decrementa, poi mostra)
console.log(y);    // 9

⚡ Confronto Diretto

let a = 5;
let b = 5;

console.log(a++);  // 5 (usa POI incrementa)
console.log(++b);  // 6 (incrementa POI usa)

console.log(a);    // 6
console.log(b);    // 6  (stessa fine, ma comportamento diverso!)

📝 Operatori di Assegnazione

Gli operatori di assegnazione assegnano valori alle variabili, spesso combinando
un’operazione aritmetica.

Operatore Esempio Equivalente a Descrizione
= x = 5 – Assegnazione semplice
+= x += 3 x = x + 3 Somma e assegna
-= x -= 3 x = x - 3 Sottrae e assegna
*= x *= 3 x = x * 3 Moltiplica e assegna
/= x /= 3 x = x / 3 Divide e assegna
%= x %= 3 x = x % 3 Modulo e assegna
**= x **= 3 x = x ** 3 Esponente e assegna
Esempi Operatori di Assegnazione
let x = 10;

// Operatori composti
x += 5;   // x = x + 5  → 15
x -= 3;   // x = x - 3  → 12
x *= 2;   // x = x * 2  → 24
x /= 4;   // x = x / 4  → 6
x %=  5;  // x = x % 5  → 1

// Esempio pratico: accumulo punteggio
let punteggio = 0;

punteggio += 10;  // Livello completato: +10
punteggio += 5;   // Bonus raccolto: +5
punteggio *= 2;   // Moltiplicatore 2x: punteggio raddoppia

console.log("Punteggio finale:", punteggio);  // 30

💡 Prova Operatori di Assegnazione

Vedi come cambia una variabile passo dopo passo con operatori composti:

Nota: Una demo visiva apparirà nella pagina mostrando come x cambia valore ad ogni operazione.

⚖️ Operatori di Confronto

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

Operatore Nome Esempio Risultato
== Uguale (valore) 5 == "5" true
=== Strettamente uguale (valore e tipo) 5 === "5" false
!= Diverso (valore) 5 != "5" false
!== Strettamente diverso 5 !== "5" true
> Maggiore 5 > 3 true
< Minore 5 < 3 false
>= Maggiore o uguale 5 >= 5 true
<= Minore o uguale 5 <= 3 false
Esempi Operatori di Confronto
let x = 5;
let y = "5";

// Confronti numerici
console.log(10 > 5);   // true
console.log(10 < 5);   // false
console.log(10 >= 10); // true
console.log(10 <= 9);  // false

// Uguaglianza semplice (==) vs stretta (===)
console.log(x == y);   // true  (converte "5" a numero)
console.log(x === y);  // false (tipi diversi: number vs string)

console.log(5 == "5");   // true  (confronta solo valore)
console.log(5 === "5");  // false (confronta valore E tipo)

// Diversità
console.log(5 != "5");   // false (valori uguali dopo conversione)
console.log(5 !== "5");  // true  (tipi diversi)

🔍 Prova i Confronti (Visivamente!)

Scopri la differenza tra == e === con risultati visivi:




💡 Nota: I risultati appaiono direttamente nella pagina,
non solo in console! Questo mostra come JavaScript può modificare il contenuto HTML dinamicamente.

⚠️ IMPORTANTE: Usa Sempre === e !==

Preferisci === e !== (strict equality) invece di
== e !=. Prevengono bug causati da conversioni implicite! 

// ❌ Comportamenti strani con ==
console.log(0 == false);      // true  (WTF?)
console.log("" == false);     // true  (WTF?)
console.log(null == undefined); // true (WTF?)

// ✅ Comportamento prevedibile con ===
console.log(0 === false);     // false (ok)
console.log("" === false);    // false (ok)
console.log(null === undefined); // false (ok)

🧠 Operatori Logici

Gli operatori logici combinano condizioni booleane e restituiscono true o false.

1
AND Logico (&&)

Restituisce true solo se ENTRAMBE le condizioni sono vere.

Operatore AND (&&)
let età = 25;
let haPatente = true;

// Entrambe devono essere vere
console.log(età >= 18 && haPatente);  // true (entrambe vere)
console.log(età >= 18 && !haPatente); // false (una è falsa)

// Esempio pratico
if (età >= 18 && haPatente) {
    console.log("Può guidare!");  // Questo viene eseguito
}

// Tabella verità AND
console.log(true  && true);   // true
console.log(true  && false);  // false
console.log(false && true);   // false
console.log(false && false);  // false

2
OR Logico (||)

Restituisce true se ALMENO UNA delle condizioni è vera.

Operatore OR (||)
let èWeekend = true;
let èFestivo = false;

// Basta che una sia vera
console.log(èWeekend || èFestivo);  // true (almeno una vera)

// Esempio pratico
if (èWeekend || èFestivo) {
    console.log("Non si lavora!");  // Questo viene eseguito
}

// Tabella verità OR
console.log(true  || true);   // true
console.log(true  || false);  // true
console.log(false || true);   // true
console.log(false || false);  // false

3
NOT Logico (!)

Inverte il valore booleano: true diventa false e viceversa.

Operatore NOT (!)
let èLoggato = true;

console.log(!èLoggato);  // false (inverte true → false)

// Doppia negazione
console.log(!!èLoggato); // true (inverte due volte)

// Esempi
console.log(!true);   // false
console.log(!false);  // true

// Uso pratico
if (!èLoggato) {
    console.log("Devi fare login");
} else {
    console.log("Benvenuto!");  // Questo viene eseguito
}

🔍 Verifica Accesso Interattiva

Prova la logica AND/OR con questo esempio pratico:

Condizioni per l'accesso:


Formula: (Età ≥ 18 && Ha documento) || È iscritto

💡 Cosa stai vedendo?

Questo è un esempio pratico di operatori logici che modifica la pagina in tempo reale.
Dimostra come JavaScript può prendere decisioni e mostrare risultati direttamente nell'interfaccia utente.

🌟 Operatori Speciali

1
Operatore Ternario (? :)

If-else in una sola riga! Sintassi: condizione ? valoreSeVero : valoreSeFalso

Operatore Ternario
let età = 20;

// Sintassi: condizione ? valoreSeVero : valoreSeFalso
let stato = età >= 18 ? "adulto" : "minorenne";
console.log(stato);  // "adulto"

// Equivale a:
let stato2;
if (età >= 18) {
    stato2 = "adulto";
} else {
    stato2 = "minorenne";
}

// Altri esempi
let prezzo = 100;
let scontato = prezzo > 50 ? prezzo * 0.9 : prezzo;

let punti = 150;
let livello = punti >= 100 ? "Gold" : punti >= 50 ? "Silver" : "Bronze";

🎯 Prova l'Operatore Ternario

Inserisci la tua età e vedi cosa dice JavaScript:

💪 Esercizi Pratici (Interattivi!)

🎯 Ora tocca a te!

Prova questi esercizi che usano tutti gli operatori che hai imparato.
Ogni esercizio mostra risultati visivi nella pagina, non solo in console!

📝 Esercizio 1: Calcolatore Sconto

Obiettivo: Calcola il prezzo finale con sconto usando input utente.

Provalo Interattivamente: Inserisci prezzo e sconto quando richiesto!

👆 Clicca il pulsante per eseguire l'esercizio

🎯 Cosa imparerai:

  • Usare prompt() per input utente
  • Operatori aritmetici (*, /)
  • Operatore ternario per messaggi condizionali
  • Mostrare risultati visivi nella pagina
Codice di Base
let prezzo = parseFloat(prompt("Prezzo originale:"));
let scontoPercentuale = parseFloat(prompt("Percentuale sconto:"));

let importoSconto = prezzo * (scontoPercentuale / 100);
let prezzoFinale = prezzo - importoSconto;

let messaggio = scontoPercentuale > 30 ? "Ottimo affare!" : "Buon acquisto!";

// Mostra risultato nella pagina
document.getElementById('risultato').innerHTML = `
    <div>Prezzo: €${prezzo}</div>
    <div>Sconto: €${importoSconto}</div>
    <div><strong>Finale: €${prezzoFinale}</strong></div>
`;

📝 Esercizio 2: Verifica Accesso

Obiettivo: Verifica se una persona può entrare usando operatori logici.

Provalo Interattivamente: Rispondi alle domande quando richiesto!

👆 Clicca il pulsante per eseguire l'esercizio

🎯 Cosa imparerai:

  • Operatori logici (&&, ||)
  • Usare confirm() per scelte sì/no
  • Espressioni booleane complesse
  • Interfaccia utente dinamica e reattiva
Codice di Base
let età = parseInt(prompt("Età:"));
let haDocumento = confirm("Ha documento?");
let èInListaVIP = confirm("È in lista VIP?");

// Logica: (età >= 18 E documento) OPPURE lista VIP
let puòEntrare = (età >= 18 && haDocumento) || èInListaVIP;

// Mostra risultato nella pagina
document.getElementById('risultato').innerHTML = `
    <div style="color: ${puòEntrare ? 'green' : 'red'}">
        ${puòEntrare ? '✅ Accesso consentito' : '❌ Accesso negato'}
    </div>
`;

🚀 Bonus Avanzato

Hai già provato la Calcolatrice Visiva all'inizio della lezione?
È un esempio completo di come combinare tutti gli operatori in un'applicazione reale!

🎯 Riepilogo Lezione

Aritmetici:

  • + - * / % **
  • ++ -- (pre/post)
  • += -= *= /=
Confronto:

  • == vs ===
  • != vs !==
  • < > <= >=
  • Usa sempre ===
Logici:

  • && (AND)
  • || (OR)
  • ! (NOT)
  • Short-circuit
Speciali:

  • ? : (ternario)
  • ?? (nullish)
  • typeof
  • Precedenza

💡 Ricorda:

JavaScript non è solo console.log()! Puoi:

  • ✅ Modificare contenuti HTML in tempo reale
  • ✅ Cambiare stili CSS dinamicamente
  • ✅ Rispondere alle azioni utente (click, input)
  • ✅ Creare interfacce interattive complete

Lezione 3 del Corso JavaScript Completo

Torna in alto