Variabili che Vedi 👀

📚 Benvenuto nella Lezione 2!

🔗 Collegamento con la Lezione 1

// Lezione 1: cambia solo il testo
const display = document.querySelector('#noVarDisplay');
display.textContent = 'Cambiato!';

// Lezione 2: usa una variabile!
let contatore = 0;

bottone.addEventListener('click', function() {
    contatore++;  // Ricorda!
    display.textContent = 'Click: ' + contatore;
});

👀 Demo Interattiva: Variabili in Azione

Ora che capisci il problema, guarda la potenza delle variabili!

Questa demo usa una variabile contatore che memorizza i tuoi click 👇

// 1. VARIABILE: memorizza il valore
let contatore = 0;

// 2. SELEZIONA elementi (Lezione 1!)
const display = document.querySelector('#demoCounter');
const bottone = document.querySelector('.demo-btn');

// 3. EVENTO: quando clicchi (Lezione 1!)
bottone.addEventListener('click', function() {
    contatore++;  // Aumenta la variabile
    
    // 4. MOSTRA il nuovo valore (Lezione 1!)
    display.textContent = contatore;
});

💡 Cosa Sono le Variabili?

📝 Come Dichiarare le Variabili

In JavaScript ci sono 3 modi per creare variabili: let, const, e var

1. let - La Più Usata

// Dichiarazione con valore iniziale
let punteggio = 0;

// Dichiarazione senza valore (undefined)
let nomeGiocatore;

// Puoi cambiare il valore dopo
punteggio = 100;
nomeGiocatore = "Anna";

2. const - Per Valori Fissi

// Valore che NON cambia mai
const PI = 3.14159;
const MAX_GIOCATORI = 4;
const TITOLO_APP = "Il Mio Gioco";

// ❌ Questo darà errore!
PI = 3.14; // TypeError: Assignment to constant variable

3. var - Il Vecchio Modo (Da Evitare)

// Il vecchio modo (pre-2015)
var vecchiaVariabile = 42;

// Funziona, ma ha problemi di "scope"
// ⚠️ NON usare var nel 2025!

📋 Regole per Nominare le Variabili

<div class="user-card" id="userCard">
    <div id="displayName">Nome: ?</div>
    <div id="displayAge">Età: ?</div>
    <div id="displaySite">Sito: ?</div>
    <div id="displayStatus">Loggato: ?</div>
</div>

🎭 Tipi di Dati

Le variabili possono contenere diversi tipi di dati. Ogni tipo ha caratteristiche e operazioni specifiche!

let età = 25;
let prezzo = 19.99;
let negativo = -10;

let nome = "Mario";
let saluto = 'Ciao!';
let frase = `Ciao ${nome}`;

let isAttivo = true;
let haPerso = false;
let maggiorenne = età >= 18;

let risultato;
console.log(risultato); 
// undefined

let utente = null;
// "Nessun utente"

🔍 Verificare il Tipo con typeof

// Usa typeof per vedere il tipo
let numero = 42;
let testo = "ciao";
let veroFalso = true;

console.log(typeof numero);     // "number"
console.log(typeof testo);      // "string"
console.log(typeof veroFalso);  // "boolean"

<input id="typeInput" placeholder="Scrivi un valore">
<div id="typeResult">Il risultato apparirà qui</div>

➕ Operazioni con le Variabili

Le variabili diventano potenti quando ci fai operazioni! Vediamo come combinare valori e fare calcoli.

🔢 Operazioni Matematiche

let a = 10;
let b = 3;

// Operazioni base
let somma = a + b;        // 13
let differenza = a - b;  // 7
let prodotto = a * b;    // 30
let divisione = a / b;   // 3.333...
let resto = a % b;       // 1 (resto della divisione)
let potenza = a ** b;    // 1000 (10 alla terza)

📈 Incremento e Decremento

let punteggio = 0;

// Modi per aumentare di 1
punteggio = punteggio + 1;  // Modo lungo
punteggio += 1;            // Modo corto
punteggio++;                // Modo super corto!

// Modi per diminuire di 1
punteggio = punteggio - 1;
punteggio -= 1;
punteggio--;

// Aumenta di un valore specifico
punteggio += 10;  // Aumenta di 10
punteggio *= 2;   // Raddoppia

📝 Operazioni con Stringhe

let nome = "Mario";
let cognome = "Rossi";

// Concatenazione (unire stringhe)
let nomeCompleto = nome + " " + cognome;  // "Mario Rossi"

// Template Literals (modo moderno) ⭐
let saluto = `Ciao, mi chiamo ${nome} ${cognome}!`;
let età = 25;
let messaggio = `Ho ${età} anni`;  // "Ho 25 anni"

<input id="calcNum1" type="number">
<select id="calcOp">
    <option value="+">Somma</option>
    <!-- altre operazioni -->
</select>
<input id="calcNum2" type="number">
<div id="calcResult">Risultato qui</div>
<div id="calcProcess">Processo qui</div>

🔢 Esercizio: Contatore Interattivo

Ora mettiamo insieme tutto: variabili + eventi + operazioni + visualizzazione!

<!-- Display contatore -->
<div id="counterDisplay">0</div>

<!-- Statistiche -->
<div id="counterDouble">0</div>
<div id="counterSquare">0</div>

<!-- Controlli -->
<button id="btnIncrement">+1</button>
<button id="btnDecrement">-1</button>
<button id="btnReset">Reset</button>

✍️ Esercizio Guidato: Sistema di Punti

Creiamo un sistema dove l'utente può guadagnare punti e vedere il punteggio aggiornato in tempo reale!

<!-- Il display del punteggio -->
<div class="points-display">
    <div id="pointsValue">0</div>
</div>

<!-- I bottoni -->
<button id="btn5Points">+5 Punti</button>
<button id="btn10Points">+10 Punti</button>
<button id="btnResetPoints">Reset</button>

let punti = 0;
const display = document.querySelector('#pointsValue');
const btn5 = document.querySelector('#btn5Points');

btn5.addEventListener('click', function() {
    punti += 5;  // Aumenta di 5
    display.textContent = punti;  // Mostra
});

if (punti <= 20) {
    display.style.color = '#ff6b6b';
} else if (punti <= 50) {
    display.style.color = '#ffd93d';
} else {
    display.style.color = '#55efc4';
}

💾 Esercizi Pratici da Scaricare

🎮 Progetto Finale: Contatore Avanzato Multi-Funzione

🎯 Obiettivi del Progetto

• ✅ Contatore che aumenta e diminuisce
• ✅ Input per scegliere di quanto incrementare
• ✅ Mostra il doppio, il quadrato e la percentuale
• ✅ Salva il record massimo raggiunto
• ✅ Colori che cambiano in base al valore

<!-- Display principale -->
<div id="projectCounter">0</div>

<!-- Statistiche -->
<div id="projectDouble">0</div>
<div id="projectSquare">0</div>
<div id="projectPercent">0%</div>
<div id="projectRecord">0</div>

<!-- Controlli -->
<input id="projectIncrement" type="number">
<button id="projectBtnInc">Aumenta</button>
<button id="projectBtnDec">Diminuisci</button>
<button id="projectBtnReset">Reset</button>

📝 Il Progetto Live

🎯 Conclusione: Hai Padroneggiato le Variabili!