Sintassi Base e Variabili JavaScript

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

🎯 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.`);
🔍 Provalo Subito!

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}`);
🔍 Provalo Subito!

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.");
}
🔍 Provalo Subito!

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

Metodo Scopo Ritorna Quando Usarlo
console.log() Debug e sviluppo undefined Testare codice, vedere valori variabili
alert() Mostrare messaggi undefined Informazioni importanti all’utente
prompt() Chiedere input stringa o null Raccolta dati semplice dall’utente
confirm() Chiedere conferma boolean (true/false) Decisioni sì/no, conferme azioni
⚠️ 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

Caratteristica var let const
Scope Funzione Blocco Blocco
Ri-dichiarazione ✅ Sì ❌ No ❌ No
Riassegnazione ✅ Sì ✅ Sì ❌ No
Hoisting Sì (undefined) Sì (TDZ) Sì (TDZ)
Inizializzazione Opzionale Opzionale Obbligatoria
Quando usare 🚫 Mai (legacy) ✅ Variabili ✅ Costanti

🏷️ 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: nomeNome
  • 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


📝 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


📝 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


🔄 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

Lezione 2 del Corso JavaScript Completo

Torna in alto