Giocare con i Numeri 🔢

📚 Benvenuto nella Lezione 3!

👀 Demo Interattiva: Playground Matematico

Prima di tutto, gioca con i numeri! Vedi cosa può fare JavaScript 👇

➕ Operatori Matematici Completi

Hai già visto gli operatori base. Ora vediamoli TUTTI in dettaglio!

10 + 5   // 15
-3 + 8   // 5

10 - 5   // 5
5 - 10   // -5

10 * 5   // 50
-2 * 3   // -6

10 / 5   // 2
10 / 3   // 3.333...

10 % 3   // 1
15 % 4   // 3

2 ** 3   // 8 (2³)
5 ** 2   // 25 (5²)

🎲 L'Oggetto Math: Superpotere Matematico

JavaScript ha un oggetto speciale chiamato Math pieno di metodi utili!

Math.random()  // 0.7392...

// Numero casuale da 1 a 100
Math.floor(Math.random() * 100) + 1

Math.floor(4.9)  // 4
Math.floor(-4.1) // -5

Math.ceil(4.1)   // 5
Math.ceil(-4.9)  // -4

Math.round(4.5)  // 5
Math.round(4.4)  // 4

Math.abs(-5)     // 5
Math.abs(5)      // 5

Math.pow(2, 3)   // 8
Math.pow(5, 2)   // 25

Math.sqrt(9)     // 3
Math.sqrt(16)    // 4

Math.max(5, 10, 3)  // 10
Math.min(5, 10, 3)  // 3

Math.PI  // 3.14159...

// Numero casuale da 1 a 6
const dado = Math.floor(Math.random() * 6) + 1;
console.log("Hai tirato:", dado);

const raggio = 5;
const area = Math.PI * Math.pow(raggio, 2);
// oppure: Math.PI * raggio ** 2
console.log("Area:", area.toFixed(2));

const prezzo = 19.999;
const prezzoArrotondato = Math.round(prezzo * 100) / 100;
console.log(prezzoArrotondato); // 20.00

🔄 Conversioni di Tipo: Da Stringa a Numero

Problema comune: l'input dell'utente è sempre una stringa, anche se sembra un numero!

const input = document.querySelector('input').value;
console.log(input);        // "10" (stringa!)
console.log(typeof input);  // "string"

// Problema: "10" + "5" = "105" (concatenazione!)
console.log(input + "5");   // "105" ❌

✅ Metodi di Conversione

Number("42")      // 42
Number("3.14")    // 3.14
Number("ciao")    // NaN

parseInt("42")     // 42
parseInt("3.14")   // 3 (tronca)
parseInt("42px")   // 42 (ignora resto)

parseFloat("3.14") // 3.14
parseFloat("3.14px") // 3.14

+"42"          // 42
+"3.14"        // 3.14

🔍 NaN: Not a Number

Number("ciao")     // NaN
10 / "abc"          // NaN

// Controllare se è NaN:
isNaN(NaN)          // true
isNaN(42)           // false
Number.isNaN(NaN)   // true (più affidabile)

📐 Arrotondamenti e Precisione

JavaScript usa numeri decimali "floating point" che a volte danno risultati strani!

// Problema famoso:
0.1 + 0.2  // 0.30000000000000004 😱

// Soluzione: Arrotondare!
(0.1 + 0.2).toFixed(1)  // "0.3"

🛠️ Metodi di Arrotondamento

const num = 3.14159;
num.toFixed(2)   // "3.14"
num.toFixed(0)   // "3"

// Per ottenere un numero:
Number(num.toFixed(2))  // 3.14

const num = 123.456;
num.toPrecision(4)  // "123.5"
num.toPrecision(2)  // "1.2e+2"

const num = 3.14159;

// Arrotonda a 2 decimali:
Math.round(num * 100) / 100  // 3.14

// Arrotonda a 3 decimali:
Math.round(num * 1000) / 1000  // 3.142

✍️ Esercizio Guidato: Mini-Calcolatrice

Mettiamo in pratica tutto! Creiamo una calcolatrice che fa le 4 operazioni base.

<!-- Input numeri -->
<input type="number" id="num1">
<input type="number" id="num2">

<!-- Display risultato -->
<div id="calcResult">0</div>

<!-- Bottoni operazioni -->
<button id="btnAdd">+</button>
<button id="btnSubtract">-</button>
<button id="btnMultiply">*</button>
<button id="btnDivide">/</button>

const input1 = document.querySelector('#num1');
const input2 = document.querySelector('#num2');
const display = document.querySelector('#calcResult');
const btnAdd = document.querySelector('#btnAdd');

// Dentro l'evento click:
const n1 = Number(input1.value);
const n2 = Number(input2.value);

btnAdd.addEventListener('click', function() {
    const n1 = Number(input1.value);
    const n2 = Number(input2.value);
    const risultato = n1 + n2;
    display.textContent = risultato;
});

💾 Esercizi Pratici da Scaricare

🎮 Progetto Finale: Calcolatrice Completa

🎯 Obiettivi del Progetto

• ✅ Input da tastiera (bottoni numerici)
• ✅ Gestione operatori (+, -, *, /)
• ✅ Calcolo al click di "="
• ✅ Clear e delete funzionanti
• ✅ Gestione errori (divisione per zero)
• ✅ Storico delle operazioni

<!-- Display -->
<div id="display">0</div>
<div id="history"></div>

<!-- Bottoni usano CLASSI (non ID!) -->
<button class="num" data-num="1">1</button>
<button class="operator" data-op="+">+</button>

<!-- Bottoni speciali -->
<button id="clear">C</button>
<button id="equals">=</button>
<button id="decimal">.</button>

📱 La Calcolatrice Live

<button class="num" data-num="7">7</button>
<button class="operator" data-op="+">+</button>

🎯 Conclusione: Sei un Math Wizard! 🧙‍♂️