Sintassi di base e variabili

Impara la sintassi fondamentale, i commenti, le variabili e le interazioni con l'utente.

🎮 Mettilo in pratica: nel corso JavaScript interattivo – progetti c'è la lezione Lezione 2 – Variabili che vedi.

Cosa Imparerai in Questa Lezione

Ogni linguaggio di programmazione ha le sue regole sintattiche. In questa lezione scoprirai come scrivere codice JavaScript correttamente, come commentarlo per renderlo leggibile, e come dichiarare variabili per memorizzare dati nei tuoi programmi. Inoltre, imparerai a interagire con gli utenti!

💡 Perché le Variabili Sono Fondamentali?

Le variabili sono come scatole dove conservi informazioni: nomi, numeri, risultati di calcoli. Senza variabili, non potresti memorizzare né manipolare dati. Sono la base di qualsiasi programma!

Sintassi Base di JavaScript

JavaScript ha una sintassi relativamente semplice e flessibile. Vediamo le regole fondamentali.

1. Istruzioni e Punto e Virgola Ogni istruzione JavaScript può terminare con ; (opzionale ma consigliato).

Istruzioni JavaScript

// Con punto e virgola (consigliato)
let nome = "Mario";
let età = 25;
console.log(nome);

// Senza punto e virgola (funziona ma non consigliato)
let nome = "Mario"
let età = 25
console.log(nome)

✅ Best Practice

Usa sempre il punto e virgola alla fine delle istruzioni. Rende il codice più chiaro e previene errori imprevisti.

2. Case Sensitivity JavaScript distingue maiuscole e minuscole!

Case Sensitivity

let nome = "Mario";
let Nome = "Luigi";
let NOME = "Peach";

console.log(nome);  // "Mario"
console.log(Nome);  // "Luigi" (diverso!)
console.log(NOME);  // "Peach" (diverso!)

// ❌ Errore comune
let myVariable = 10;
console.log(myvariable);  // ❌ ReferenceError: myvariable is not defined

3. Spazi Bianchi Gli spazi, tab e a capo sono ignorati (usa per leggibilità).

Spazi e Formattazione

// Senza spazi (difficile da leggere)
let x=5+3*2;

// Con spazi (leggibile)
let x = 5 + 3 * 2;

// Spazi multipli (stesso risultato)
let    y    =    10    +    20;  // y = 30

Commenti nel Codice

I commenti sono testo ignorato da JavaScript, usati per spiegare il codice o disabilitare temporaneamente istruzioni.

1. Commenti su Singola Riga Usa // per commenti brevi su una riga.

Commenti Singola Riga (//)

// Questo è un commento - viene ignorato

let nome = "Mario";  // Variabile per il nome utente

// console.log("Questo NON viene eseguito");
console.log("Questo viene eseguito");  // Output: Questo viene eseguito

2. Commenti Multi-Riga Usa /* */ per commenti lunghi o su più righe.

Commenti Multi-Riga (/* */)

/*
  Questo è un commento
  su più righe.
  Utile per spiegazioni lunghe.
*/

let x = 10;

/*
  Questo blocco di codice calcola l'area di un rettangolo.
  Prima definiamo base e altezza,
  poi moltiplichiamo i due valori.
*/
let base = 5;
let altezza = 3;
let area = base * altezza;
console.log("Area del rettangolo:", area);

/*
  Puoi anche usare i commenti multi-riga
  per disabilitare temporaneamente
  più righe di codice durante i test:

let test1 = 100;
let test2 = 200;
console.log(test1 + test2);
*/

🎯 Quando Usare i Commenti

• ✅ Spiega il "perché", non il "cosa" (il codice dovrebbe essere auto-esplicativo)
• ✅ Documenta funzioni complesse
• ✅ Lascia note per te stesso o altri sviluppatori
• ✅ Disabilita temporaneamente codice per debug
• ❌ Non commentare cose ovvie: // Incrementa i di 1 per i++

Esempi di Buoni e Cattivi Commenti

// ❌ CATTIVO COMMENTO (ovvio)
let x = 5;  // Assegna 5 a x

// ✅ BUON COMMENTO (spiega il perché)
let maxTentativi = 3;  // Limitiamo a 3 per prevenire brute force

// ❌ CATTIVO
i++;  // Incrementa i

// ✅ BUON COMMENTO
i++;  // Passa al prossimo elemento dell'array

Output Interattivo (Alert, Prompt, Confirm)

Oltre a console.log()

Finora abbiamo visto solo console.log() per visualizzare dati nella console del browser (F12). Ma JavaScript può interagire direttamente con l'utente tramite finestre di dialogo!

1. alert() - Messaggi all'Utente

Mostra un messaggio in una finestra modale. L'utente deve cliccare "OK" per continuare.

alert() - Esempio Base

// Mostra un semplice messaggio
alert("Benvenuto nel corso di JavaScript!");

// Con variabili
let nome = "Mario";
let eta = 25;
alert("Ciao " + nome + "! Hai " + eta + " anni.");

// Con template literal (ES6)
alert(`Ciao ${nome}! Hai ${eta} anni.`);

2. prompt() - Input dall'Utente

Chiede all'utente di inserire un valore. Restituisce il testo inserito o null se clicca "Annulla".

prompt() - Esempi

// Chiedi il nome
let nomeUtente = prompt("Come ti chiami?");
console.log("L'utente ha inserito:", nomeUtente);

// Con valore predefinito
let eta = prompt("Quanti anni hai?", "18");
alert(`Hai ${eta} anni`);

// Uso pratico: calcolatrice semplice
let numero1 = prompt("Inserisci il primo numero:");
let numero2 = prompt("Inserisci il secondo numero:");
let somma = Number(numero1) + Number(numero2);
alert(`La somma è: ${somma}`);

3. confirm() - Conferme Sì/No

Chiede una conferma all'utente. Restituisce true se clicca "OK", false se clicca "Annulla".

confirm() - Esempi

// Chiedi conferma
let conferma = confirm("Sei maggiorenne?");
console.log("Risposta:", conferma); // true o false

// Uso in condizioni
if (confirm("Vuoi continuare?")) {
    alert("Procediamo! 🚀");
    // Esegui azione...
} else {
    alert("Operazione annullata.");
    // Non fare nulla o annulla...
}

// Esempio pratico: eliminazione
let vuoiEliminare = confirm("Sei sicuro di voler eliminare questo file?");
if (vuoiEliminare) {
    alert("File eliminato!");
    // Codice per eliminare il file...
} else {
    alert("Operazione annullata. Il file è al sicuro.");
}

📊 Confronto: console.log vs alert vs prompt vs confirm

⚠️ Limitazioni delle Finestre di Dialogo

• 🔸 Bloccano l'interfaccia fino alla risposta
• 🔸 Non sono personalizzabili (stile browser)
• 🔸 alert() può essere irritante se usato troppo
• 🔸 Per UX avanzata, useremo HTML/CSS in futuro

Variabili e Costanti

Le variabili sono contenitori per memorizzare dati. JavaScript offre tre modi per dichiararle: var, let e const.

Cosa Sono le Variabili?

Immagina le variabili come etichette su scatole. Ogni scatola contiene un valore (numero, testo, ecc.) e l'etichetta è il nome che usi per accedervi. Puoi cambiare il contenuto della scatola in qualsiasi momento!

1. var - Il Metodo Tradizionale (Evita se Possibile) Modo classico di dichiarare variabili, ma ha comportamenti strani.

var - Sintassi

// Dichiarazione
var nome;

// Dichiarazione + inizializzazione
var età = 25;

// Dichiarazioni multiple
var x = 10, y = 20, z = 30;

// Uso
console.log(età);  // 25

⚠️ Problemi di var

• Scope a livello di funzione (non blocco)
• Può essere ri-dichiarata senza errore
• Hoisting (viene "sollevata" in cima allo scope)
• Comportamento confuso in loop e blocchi if

Esempio Problema var

// Problema: var ignora il blocco
if (true) {
    var x = 10;
}
console.log(x);  // 10 (accessibile fuori dal blocco!)

// Problema: ri-dichiarazione
var nome = "Mario";
var nome = "Luigi";  // Nessun errore, sovrascrive
console.log(nome);  // "Luigi"

2. let - Variabili Moderne (Consigliato) Introdotto in ES6, risolve i problemi di var. Usa sempre let per variabili!

let - Sintassi e Vantaggi

// Dichiarazione
let nome;

// Dichiarazione + inizializzazione
let età = 25;

// Riassegnazione
età = 26;  // ✅ OK

// Scope di blocco
if (true) {
    let x = 10;
    console.log(x);  // 10
}
// console.log(x);  // ❌ ReferenceError: x is not defined

// Non può essere ri-dichiarata
let nome = "Mario";
// let nome = "Luigi";  // ❌ SyntaxError: Identifier 'nome' has already been declared

✅ Vantaggi di let

• Block scope: Esiste solo nel blocco dove è dichiarata
• No ri-dichiarazione: Previene errori accidentali
• Comportamento prevedibile nei loop
• Standard moderno: Usata in tutto il codice ES6+

3. const - Costanti (Valore Immutabile) Per valori che non devono cambiare. Non può essere riassegnata!

const - Sintassi

// DEVE essere inizializzata subito
const PI = 3.14159;
const GIORNI_SETTIMANA = 7;
const NOME_SITO = "Academy PC";

// Uso
console.log(PI);  // 3.14159

// ❌ NON può essere riassegnata
// PI = 3.14;  // TypeError: Assignment to constant variable

// ❌ DEVE essere inizializzata
// const x;  // SyntaxError: Missing initializer in const declaration

⚠️ ATTENZIONE: const con Oggetti e Array

const impedisce la riassegnazione, ma non rende l'oggetto immutabile!

// Array const
const numeri = [1, 2, 3];

// ✅ Puoi modificare il contenuto
numeri.push(4);  // OK
numeri[0] = 10;  // OK
console.log(numeri);  // [10, 2, 3, 4]

// ❌ Non puoi riassegnare
// numeri = [5, 6];  // TypeError

// Oggetto const
const persona = { nome: "Mario" };

// ✅ Puoi modificare proprietà
persona.nome = "Luigi";  // OK
persona.età = 30;  // OK

// ❌ Non puoi riassegnare
// persona = { nome: "Peach" };  // TypeError

📊 var vs let vs const - Riepilogo

Regole per Nominare le Variabili

1. Regole Obbligatorie Queste regole DEVONO essere rispettate, altrimenti errore!

Regole Sintattiche

// ✅ VALIDO
let nome;
let _privato;
let $jquery;
let nome2;
let camelCase;

// ❌ INVALIDO
// let 2nome;        // Non può iniziare con numero
// let nome-utente;  // No trattini
// let let;          // No parole riservate (let, if, for, etc.)
// let nome utente;  // No spazi

📌 Regole Sintattiche JavaScript

• Deve iniziare con lettera, _ o $
• Può contenere lettere, numeri, _ e $
• Case-sensitive: nome ≠ Nome
• Non può essere una parola riservata (let, if, for, class, ecc.)

2. Convenzioni e Best Practices Regole non obbligatorie ma seguite da tutti gli sviluppatori.

Naming Conventions

// ✅ BUONE PRATICHE

// camelCase per variabili e funzioni
let nomeUtente = "Mario";
let primoNumero = 10;
let calcolaAreaRettangolo = function() {};

// PascalCase per classi (vedremo dopo)
class PersonaUtente { }

// UPPER_SNAKE_CASE per costanti
const MAX_TENTATIVI = 3;
const API_URL = "https://api.example.com";
const PI_GRECO = 3.14159;

// Nomi descrittivi
let emailUtente = "mario@example.com";  // ✅ Chiaro
let e = "mario@example.com";            // ❌ Poco chiaro

// Evita abbreviazioni oscure
let numeroStudenti = 50;  // ✅ Chiaro
let ns = 50;              // ❌ Cosa significa ns?

💡 Suggerimenti per Nomi Efficaci

• Sii descrittivo: ageUser meglio di a
• Usa inglese: Standard internazionale
• Evita nomi generici: data, info, temp
• Boolean con verbi: isActive, hasPermission
• Array al plurale: students, products

Esempi Pratici

Esempio 1: Informazioni Utente

// Dati utente
let nomeUtente = "Mario Rossi";
let età = 28;
const dataNascita = "1996-03-15";  // Non cambia
let isAttivo = true;

// Modifica dati
età = 29;  // Compleanno!
isAttivo = false;  // Utente si è disconnesso

// Stampa
console.log("Nome:", nomeUtente);
console.log("Età:", età);
console.log("Data nascita:", dataNascita);
console.log("Attivo:", isAttivo);

Esempio 2: Carrello E-commerce

// Configurazione negozio
const NOME_NEGOZIO = "Tech Store";
const IVA = 0.22;  // 22%

// Prodotto
let nomeProdotto = "Laptop";
let prezzoProdotto = 999.99;
let quantità = 1;

// Calcoli
let subtotale = prezzoProdotto * quantità;
let importoIVA = subtotale * IVA;
let totale = subtotale + importoIVA;

// Output
console.log("=== " + NOME_NEGOZIO + " ===");
console.log("Prodotto:", nomeProdotto);
console.log("Quantità:", quantità);
console.log("Subtotale: €" + subtotale);
console.log("IVA (22%): €" + importoIVA.toFixed(2));
console.log("TOTALE: €" + totale.toFixed(2));

Esempio 3: Interazione con l'Utente

// Chiedi informazioni all'utente
let nome = prompt("Come ti chiami?");
let eta = prompt("Quanti anni hai?");
let città = prompt("Di quale città sei?");

// Mostra conferma
let conferma = confirm(`Confermi i dati?\n\nNome: ${nome}\nEtà: ${eta}\nCittà: ${città}`);

if (conferma) {
    alert(`Benvenuto ${nome}! 🎉\nHai ${eta} anni e vieni da ${città}.`);

    // Calcolo anno di nascita
    const annoCorrente = new Date().getFullYear();
    let annoNascita = annoCorrente - Number(eta);

    alert(`Sei nato nel ${annoNascita} (circa)`);
} else {
    alert("Dati non salvati. Puoi ricominciare.");
}

console.log("Dati inseriti:", { nome, eta, città });

Esempio 4: Scope di Blocco

// Scope globale
let globalVar = "Sono globale";

if (true) {
    // Scope di blocco
    let blockVar = "Sono nel blocco if";
    const BLOCK_CONST = "Costante del blocco";

    console.log(globalVar);   // ✅ Accessibile
    console.log(blockVar);    // ✅ Accessibile
}

console.log(globalVar);  // ✅ Accessibile
// console.log(blockVar);  // ❌ ReferenceError: blockVar is not defined

// Loop con let (scope isolato)
for (let i = 0; i < 3; i++) {
    console.log(i);  // 0, 1, 2
}
// console.log(i);  // ❌ ReferenceError: i is not defined

Esercizi Pratici

Esercizio 1: Profilo Studente Interattivo

Obiettivo: Crea variabili per descrivere uno studente CON INPUT UTENTE

1. Usa prompt() per chiedere nome e media voti
2. Crea una costante matricola con numero fisso
3. Usa confirm() per chiedere se è laureato
4. Mostra tutto con alert() formattato
5. Bonus: Aggiungi console.log() per debug

Soluzione Esercizio 1 Interattivo

// Chiedi dati all'utente
let nomeStudente = prompt("Inserisci il nome dello studente:");
let media = prompt("Inserisci la media voti (es. 27.5):");
let isLaureato = confirm("Lo studente è già laureato?");

// Costanti
const matricola = 12345;
const ANNO_CORRENTE = new Date().getFullYear();

// Converti media a numero
media = Number(media);

// Mostra risultati con alert
alert(`=== PROFILO STUDENTE ===\n\n` +
      `Nome: ${nomeStudente}\n` +
      `Matricola: ${matricola}\n` +
      `Media voti: ${media}\n` +
      `Laureato: ${isLaureato ? "Sì" : "No"}\n\n` +
      `Anno corrente: ${ANNO_CORRENTE}`);

// Per debug in console
console.log("=== DEBUG CONSOLE ===");
console.log("Tipo di nomeStudente:", typeof nomeStudente);
console.log("Tipo di media:", typeof media);
console.log("Valore isLaureato:", isLaureato);

// Bonus: Calcola se può laurearsi
if (media >= 18 && !isLaureato) {
    alert("🎓 Lo studente può laurearsi!");
} else if (media < 18) {
    alert("📚 Lo studente deve migliorare la media.");
}

Esercizio 2: Calcolo Area Rettangolo

Obiettivo: Calcola area e perimetro di un rettangolo CON INPUT UTENTE

1. Usa prompt() per chiedere base e altezza
2. Calcola l'area: area = base * altezza
3. Calcola il perimetro: perimetro = 2 * (base + altezza)
4. Mostra risultati con alert() ben formattati

Soluzione Esercizio 2 Interattivo

// Chiedi dimensioni all'utente
let base = Number(prompt("Inserisci la base del rettangolo (cm):"));
let altezza = Number(prompt("Inserisci l'altezza del rettangolo (cm):"));

// Verifica input validi
if (isNaN(base) || isNaN(altezza)) {
    alert("❌ Errore: Devi inserire numeri validi!");
} else {
    // Calcoli
    let area = base * altezza;
    let perimetro = 2 * (base + altezza);

    // Mostra risultati
    alert(`📐 RISULTATI RETTANGOLO\n\n` +
          `Base: ${base} cm\n` +
          `Altezza: ${altezza} cm\n\n` +
          `📊 AREA: ${area} cm²\n` +
          `📏 PERIMETRO: ${perimetro} cm\n\n` +
          `🔢 Dettaglio calcoli:\n` +
          `Area = ${base} × ${altezza} = ${area}\n` +
          `Perimetro = 2 × (${base} + ${altezza}) = ${perimetro}`);

    // Console per debug
    console.log("Base:", base, "cm");
    console.log("Altezza:", altezza, "cm");
    console.log("Area:", area, "cm²");
    console.log("Perimetro:", perimetro, "cm");
}

Esercizio 3: Swap Variabili Interattivo

Obiettivo: Scambia i valori di due variabili CON INPUT UTENTE

1. Chiedi due valori all'utente con prompt()
2. Scambia i loro valori (a diventa b, b diventa a)
3. Mostra i valori prima e dopo con alert()
4. Suggerimento: Usa una variabile temporanea

Soluzione Esercizio 3 Interattivo

// Chiedi valori all'utente
let a = prompt("Inserisci il primo valore:", "Ciao");
let b = prompt("Inserisci il secondo valore:", "Mondo");

// Salva i valori originali per mostrare dopo
let aOriginale = a;
let bOriginale = b;

// Mostra valori iniziali
alert(`🎯 VALORI INIZIALI:\n\n` +
      `a = "${a}"\n` +
      `b = "${b}"`);

// Swap con variabile temporanea
let temp = a;
a = b;
b = temp;

// Mostra valori finali
alert(`🔄 VALORI DOPO LO SWAP:\n\n` +
      `a = "${a}" (prima era "${aOriginale}")\n` +
      `b = "${b}" (prima era "${bOriginale}")\n\n` +
      `💡 Metodo utilizzato:\n` +
      `1. temp = a\n` +
      `2. a = b\n` +
      `3. b = temp`);

// Console per debug
console.log("Swap completato!");
console.log("a:", a);
console.log("b:", b);

Esercizio Bonus: Calcolatrice Interattiva

Crea una calcolatrice completa!

// CALCOLATRICE INTERATTIVA - Sfida Completa
alert("Benvenuto nella Calcolatrice JavaScript! 🧮");

// Chiedi due numeri
let num1 = Number(prompt("Inserisci il primo numero:"));
let num2 = Number(prompt("Inserisci il secondo numero:"));

// Verifica che siano numeri validi
if (isNaN(num1) || isNaN(num2)) {
    alert("❌ Errore: Devi inserire numeri validi!");
} else {
    // Chiedi l'operazione
    let operazione = prompt("Scegli l'operazione:\n\n" +
                          "+ per Addizione\n" +
                          "- per Sottrazione\n" +
                          "* per Moltiplicazione\n" +
                          "/ per Divisione\n" +
                          "% per Resto");

    let risultato;
    let operazioneNome;

    // Calcola in base all'operazione scelta
    switch (operazione) {
        case "+":
            risultato = num1 + num2;
            operazioneNome = "Addizione";
            break;
        case "-":
            risultato = num1 - num2;
            operazioneNome = "Sottrazione";
            break;
        case "*":
            risultato = num1 * num2;
            operazioneNome = "Moltiplicazione";
            break;
        case "/":
            if (num2 === 0) {
                alert("❌ Impossibile dividere per zero!");
                risultato = "Non definito";
            } else {
                risultato = num1 / num2;
            }
            operazioneNome = "Divisione";
            break;
        case "%":
            risultato = num1 % num2;
            operazioneNome = "Resto della divisione";
            break;
        default:
            alert("❌ Operazione non valida!");
            risultato = "Non calcolato";
            operazioneNome = "Sconosciuta";
    }

    // Mostra il risultato
    alert(`📊 RISULTATO\n\n` +
          `${operazioneNome}: ${num1} ${operazione || "?"} ${num2}\n` +
          `= ${risultato}\n\n` +
          `Grazie per aver usato la calcolatrice!`);
}

🎯 Riepilogo Lezione

Sintassi Base:

• Punto e virgola (;)
• Case-sensitive
• Spazi ignorati
• Commenti // e /* */

Variabili:

• var (legacy, evita)
• let (variabili moderne)
• const (costanti)
• Block scope

Interazioni:

• alert() - messaggi
• prompt() - input
• confirm() - conferme
• console.log() - debug

Best Practices:

• Usa let e const
• const di default
• Commenta il perché
• Nomi chiari