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!
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.
Ogni istruzione JavaScript può terminare con
; (opzionale ma consigliato).
// 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)
Usa sempre il punto e virgola alla fine delle istruzioni.
Rende il codice più chiaro e previene errori imprevisti.
JavaScript distingue maiuscole e minuscole!
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
Gli spazi, tab e a capo sono ignorati (usa per leggibilità).
// 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.
Usa
// per commenti brevi su una 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
Usa
/* */ per commenti lunghi o su più righe.
/*
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);
*/
- ✅ 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 1peri++
// ❌ 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!
Mostra un messaggio in una finestra modale. L’utente deve cliccare “OK” per continuare.
// 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.`);
Chiede all’utente di inserire un valore. Restituisce il testo inserito o null se clicca “Annulla”.
// 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}`);
Chiede una conferma all’utente. Restituisce true se clicca “OK”, false se clicca “Annulla”.
// 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.");
}
| 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 |
- 🔸 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!
Modo classico di dichiarare variabili, ma ha comportamenti strani.
// Dichiarazione var nome; // Dichiarazione + inizializzazione var età = 25; // Dichiarazioni multiple var x = 10, y = 20, z = 30; // Uso console.log(età); // 25
- 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
// 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"
Introdotto in ES6, risolve i problemi di var. Usa sempre let per variabili!
// 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
- 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+
Per valori che non devono cambiare. Non può essere riassegnata!
// 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
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
| 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
Queste regole DEVONO essere rispettate, altrimenti errore!
// ✅ 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
- 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.)
Regole non obbligatorie ma seguite da tutti gli sviluppatori.
// ✅ 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?
- Sii descrittivo:
ageUsermeglio dia - Usa inglese: Standard internazionale
- Evita nomi generici:
data,info,temp - Boolean con verbi:
isActive,hasPermission - Array al plurale:
students,products
🚀 Esempi Pratici
// 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);
// 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));
// 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à });
// 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
- Usa
prompt()per chiedere nome e media voti - Crea una costante
matricolacon numero fisso - Usa
confirm()per chiedere se è laureato - Mostra tutto con
alert()formattato - Bonus: Aggiungi
console.log()per debug
📝 Esercizio 2: Calcolo Area Rettangolo
Obiettivo: Calcola area e perimetro di un rettangolo CON INPUT UTENTE
- Usa
prompt()per chiedere base e altezza - Calcola l'area:
area = base * altezza - Calcola il perimetro:
perimetro = 2 * (base + altezza) - Mostra risultati con
alert()ben formattati
📝 Esercizio 3: Swap Variabili Interattivo
Obiettivo: Scambia i valori di due variabili CON INPUT UTENTE
- Chiedi due valori all'utente con
prompt() - Scambia i loro valori (a diventa b, b diventa a)
- Mostra i valori prima e dopo con
alert() - Suggerimento: Usa una variabile temporanea
🔄 Esercizio Bonus: Calcolatrice Interattiva
// 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!`);
}
- Punto e virgola (;)
- Case-sensitive
- Spazi ignorati
- Commenti // e /* */
- var (legacy, evita)
- let (variabili moderne)
- const (costanti)
- Block scope
alert()- messaggiprompt()- inputconfirm()- confermeconsole.log()- debug
- Usa let e const
- const di default
- Commenta il perché
- Nomi chiari