JavaScript: variabili, tipi, operatori

Con HTML e CSS abbiamo definito struttura e aspetto di una pagina. Manca il comportamento: reagire a un click, validare un form, modificare la pagina senza ricaricarla. Questo è il compito di JavaScript.

Dove va il codice JS

<body>
    <h1>La mia pagina</h1>

    <script src="script.js"></script>
</body>

Come per il CSS, il codice JS va tenuto in un file separato (script.js), collegato con <script src="...">. Va messo alla fine del <body>, appena prima della chiusura: così, quando lo script viene eseguito, tutta la pagina HTML sopra di lui è già stata caricata dal browser!!

Tip

Anche in JavaScript è possibile inserire codice “inline” (<button onclick="...">) o dentro un tag <script> inserito nella sezione head. Evitiamo di farlo per motivi di semplicità, rilettura e semplicità di riutilizzo.

Variabili: `let` e `const`

let eta = 17;
let nome = "Andrea";

const PI = 3.14159;

let per variabili che possono cambiare valore
const per valori che non cambiano mai dopo l’assegnazione iniziale

let punteggio = 0;
punteggio = punteggio + 10; // ok, "let" lo permette

const MAX_TENTATIVI = 3;
MAX_TENTATIVI = 5; // ERRORE: non si può riassegnare una const

A differenza di Python, qui la dichiarazione (let/const) è obbligatoria: non puoi scrivere semplicemente eta = 17!!!
Se lo fai, JavaScript potrebbe “funzionare” comunque in alcuni casi particolarmente banali, ma si andrebbe a creare una variabile globale, invece di una locale alla tua pagina.
Non è una buona pratica, soprattutto da quando si naviga spesso con molte schede aperte! Evitiamolo!!!

Note

Nelle vecchie versioni di JavaScript (prima di let/const), la dichiarazione delle variabili era facoltativa e andava fatta con la clausola var, non distinguendo tra variabili locali e globali, come tra variabili e costanti.
La clausola var è ancora supportata per motivi di compatibilità ma non va usata!!!
Vi ho detto della sua esistenza perchè capiterà di leggere codice online datato che la usa…

Tipi di dato principali

let intero = 42;
let decimale = 3.14;
let testo = "Ciao";
let vero_falso = true;
let niente = null;
let non_definito;

Alcune differenze rispetto a Python:

Python	JavaScript
`int`, `float`	un solo tipo `number` per entrambi
`str`	`string`
`bool` (`True`/`False`)	`boolean` (`true`/`false`, minuscolo)
`None`	`null` (assenza di valore voluta) `undefined` (variabile non ancora assegnata) due concetti distinti

Per sapere il tipo di una variabile:

console.log(typeof intero);      // "number"
console.log(typeof testo);       // "string"
console.log(typeof vero_falso);  // "boolean"

Tip

console.log() è l’equivalente di print() in Python: stampa nella console del browser (si apre con F12, scheda Console) — non nella pagina.

Stringhe e template literals

let nome = "Andrea";
let eta = 30;

// Concatenazione classica
let messaggio1 = "Ciao " + nome + ", hai " + eta + " anni";

// Template literal: più leggibile, con backtick e ${}
let messaggio2 = `Ciao ${nome}, hai ${eta} anni`;

I template literal (tra backtick `, non virgolette) permettono di inserire variabili direttamente nel testo con ${...}. E’ la stessa idea delle f-string di Python (f"Ciao {nome}"), sintassi diversa.

Operatori

// Aritmetici: identici a Python
let somma = 5 + 3;
let resto = 10 % 3;

// Confronto: attenzione a == vs ===
console.log(5 == "5");   // true  — confronta i valori, converte i tipi
console.log(5 === "5");  // false — confronta anche il tipo, nessuna conversione

// Logici
let a = true && false; // AND
let b = true || false; // OR
let c = !true;          // NOT

La differenza == vs === non ha un vero equivalente in Python (dove 5 == "5" è semplicemente False, senza ambiguità). Regola pratica: usa sempre === e !==, mai ==/!=. Evita completamente le conversioni automatiche di tipo che possono creare bug difficili da individuare.

Gli operatori logici &&, ||, ! corrispondono esattamente ad and, or, not in Python — cambia solo il simbolo.

Array

Un array è una collezione ordinata di valori, identificata da un unico nome — l’equivalente delle liste Python:

const frutti = ["mela", "pera", "banana"];

console.log(frutti[0]);      // "mela" — si accede per indice partendo da 0, come in Python
console.log(frutti.length);  // 3 — equivalente a len(frutti) in Python

Alcune operazioni comuni:

const numeri = [10, 20, 30];

numeri.push(40);        // aggiunge in fondo: [10, 20, 30, 40]
numeri[0] = 99;          // modifica un elemento: [99, 20, 30, 40]
console.log(numeri[1]);  // 20

push() è l’equivalente di .append() in Python. Un array può contenere qualunque tipo di dato, anche misto:

const misto = ["testo", 42, true];

Nel prossimo capitolo vedremo come scorrere un array elemento per elemento senza dover scrivere frutti[0], frutti[1], frutti[2] a mano.

Esercizi

Esercizio w301

Dichiara tre variabili con let: il tuo nome (stringa), la tua età (numero), se sei studente o no (booleano). Stampale tutte con console.log().

Esercizio w302

Usando un template literal, crea un messaggio che dica "[nome] ha [età] anni" usando le variabili dell’esercizio precedente.

Esercizio w303

Scrivi il risultato (senza eseguire il codice, solo ragionando) di ciascuna riga, poi verifica con console.log():

console.log(3 === "3");
console.log(3 == "3");
console.log(true && false);
console.log(!false);

Esercizio w304

Nel seguente codice c’è un errore: si tenta di riassegnare una const. Correggilo scegliendo tra let e const in modo appropriato per ciascuna variabile:

da_correggere.js

const nome = "Marco";
const punteggio = 0;

punteggio = punteggio + 5;
console.log(`${nome} ha ${punteggio} punti`);

Esercizio w305

Crea un array colori con almeno 4 stringhe. Stampa il primo elemento, l’ultimo elemento (usando colori.length), e la lunghezza totale dell’array.

Keyboard shortcuts

Laboratorio di Reti