InnoMarts logo
InnoMarts
Fast websites
← Back to course

Variabili e Tipi di Dati

Variabili e Tipi di Dati

Bentornato.

Nella lezione precedente hai collegato JavaScript a HTML.

Hai scritto console.log().

Hai cambiato testo nella pagina.

Hai fatto reagire un pulsante a un click.

Molto bene.

Il browser non ti sta più ignorando completamente.

Oggi impariamo una delle idee più importanti in JavaScript:

le variabili.

Le variabili permettono a JavaScript di ricordare informazioni.

Senza variabili, JavaScript sarebbe come un cameriere molto confuso che dimentica il tuo ordine prima di arrivare in cucina.

Con le variabili, JavaScript può salvare valori e usarli più tardi.

Nomi.

Numeri.

Messaggi.

Scelte dell’utente.

Prezzi.

Booleani.

Piccole memorie digitali.

Molto utile.

A volte molto pericoloso se dai nomi brutti.

Ma sopravviveremo.

Cosa Imparerai

In questa lezione imparerai:

Alla fine di questa lezione saprai salvare valori in JavaScript e capire con che tipo di dati stai lavorando.

Sembra semplice.

È semplice.

Finché incontri undefined.

Poi JavaScript sorride educatamente e ti consegna un piccolo enigma.

Cos’è una Variabile?

Una variabile è un contenitore con un nome per un valore.

Esempio:

const name = "Viktor";

Qui:

Puoi usare la variabile più tardi:

console.log(name);

La console mostrerà:

Viktor

Pensa a una variabile come a una scatola con etichetta.

L’etichetta dice cosa c’è dentro.

Il valore è quello che metti nella scatola.

I buoni nomi delle variabili sono importanti.

Nome brutto:

const x = "Viktor";

Nome migliore:

const userName = "Viktor";

JavaScript capirà entrambi.

Gli umani no.

E gli umani di solito sono il problema.

Soprattutto il te stesso del futuro.

Il te stesso del futuro aprirà il codice e chiederà:

“Chi ha scritto questo?”

Poi capirà.

Eri tu.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir javascript-lesson2
cd javascript-lesson2
touch index.html
touch script.js

Il progetto dovrebbe essere così:

javascript-lesson2/
  index.html
  script.js

Apri la cartella nel tuo editor.

Useremo la console del browser per la maggior parte degli esempi.

Nessun setup complicato.

Solo JavaScript che impara a ricordare le cose.

Come un piccolo elefante con la sintassi.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variabili e Tipi di Dati</title>
</head>
<body>
  <h1>Variabili e Tipi di Dati</h1>
  <p>Apri la console del browser per vedere l’output di JavaScript.</p>

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

Apri il file nel browser.

Poi apri la console:

Ora siamo pronti.

La console aspetta.

Con aria giudicante, ma aspetta.

Usare const

Apri script.js e aggiungi:

const firstName = "Viktor";
const age = 33;

console.log(firstName);
console.log(age);

Aggiorna il browser.

Dovresti vedere:

Viktor
33

const crea una variabile che non può essere riassegnata.

Questo va bene:

const city = "Vigevano";

console.log(city);

Questo invece no:

const city = "Vigevano";

city = "Milano";

JavaScript lancerà un errore.

Perché?

Perché const significa che il collegamento della variabile non può essere cambiato.

Hai detto a JavaScript:

“Questo valore deve restare qui.”

Poi hai provato a sostituirlo.

JavaScript ha detto:

“No.”

Energia da burocrazia italiana.

Ma utile.

Usare let

A volte ti serve un valore che può cambiare.

Per questo usa let.

Esempio:

let score = 0;

console.log(score);

score = 10;

console.log(score);

La console mostrerà:

0
10

Funziona perché let permette la riassegnazione.

Usa let quando il valore deve cambiare.

Esempi:

let counter = 0;
let userInput = "";
let isMenuOpen = false;

Questi valori possono cambiare più tardi.

Un counter aumenta.

L’input dell’utente cambia.

Un menu si apre e si chiude.

La vita succede.

JavaScript si adatta.

const o let?

Usa questa regola semplice:

Usa const di default.

Usa let solo quando il valore deve cambiare.

Buono:

const userName = "Anna";
const country = "Italy";

let points = 0;
points = points + 10;

Perché preferire const?

Perché rende il codice più sicuro.

Se un valore non deve cambiare, const lo protegge.

È come mettere una piccola recinzione intorno alla variabile.

Non una recinzione altissima.

Ma abbastanza per fermare il caos da principiante.

Non Usare var per Ora

Potresti vedere vecchio codice JavaScript con var.

Esempio:

var name = "Old JavaScript";

Per questo corso, evita var.

Usa:

var ha comportamenti più vecchi che possono confondere i principianti.

Non ci serve quel dramma oggi.

JavaScript ha già abbastanza personalità.

Stringhe

Una stringa è testo.

Crei stringhe con le virgolette:

const language = "JavaScript";
const message = "Hello, world!";
const country = 'Italy';

Funzionano sia le doppie virgolette sia le singole.

Scegli uno stile e resta coerente.

Puoi stampare stringhe:

const message = "JavaScript è divertente.";

console.log(message);

Puoi combinare stringhe:

const firstName = "Viktor";
const greeting = "Ciao, " + firstName;

console.log(greeting);

La console mostra:

Ciao, Viktor

Questo si chiama concatenazione di stringhe.

Funziona.

Ma c’è un modo più pulito.

Template Literals

I template literals usano i backticks:

const firstName = "Viktor";
const age = 33;

const message = `Mi chiamo ${firstName} e ho ${age} anni.`;

console.log(message);

La console mostra:

Mi chiamo Viktor e ho 33 anni.

Questo è molto utile.

Dentro ${}, puoi inserire variabili.

I template literals sono di solito più facili da leggere della concatenazione.

Confronta questo:

const message = "Mi chiamo " + firstName + " e ho " + age + " anni.";

con questo:

const message = `Mi chiamo ${firstName} e ho ${age} anni.`;

Il secondo è più pulito.

Meno zuppa di punteggiatura.

Più dignità.

Numeri

I numeri servono per la matematica.

Esempio:

const price = 100;
const quantity = 3;
const total = price * quantity;

console.log(total);

La console mostra:

300

JavaScript può fare matematica base:

const a = 10;
const b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Output:

13
7
30
3.3333333333333335

L’ultimo numero è molto JavaScript.

Non sbagliato.

Solo inutilmente onesto.

I computer fanno matematica decimale in modi che a volte sembrano strani.

Per il livello beginner, niente panico.

Sappi solo che i decimali possono essere strani.

Come le persone prima del caffè.

Booleani

Un booleano è true oppure false.

Esempio:

const isLoggedIn = true;
const isAdmin = false;

console.log(isLoggedIn);
console.log(isAdmin);

I booleani servono per prendere decisioni.

Esempio:

const isLoggedIn = true;

if (isLoggedIn) {
  console.log("Bentornato!");
}

La console mostra:

Bentornato!

I booleani sono molto importanti nella programmazione.

Rispondono a domande sì-o-no.

L’utente è loggato?

Il menu è aperto?

La password è valida?

JavaScript si comporta bene oggi?

Di solito false.

Scherzo.

Più o meno.

undefined

Una variabile è undefined quando esiste ma non ha ancora un valore.

Esempio:

let userName;

console.log(userName);

La console mostra:

undefined

Questo significa:

“La variabile esiste, ma non le è stato assegnato nulla.”

È come una scatola vuota con etichetta.

La scatola esiste.

Ma dentro?

Niente.

Una piccola crisi esistenziale.

null

null significa valore intenzionalmente vuoto.

Esempio:

const selectedUser = null;

console.log(selectedUser);

null di solito significa:

“Non c’è un valore qui, e l’ho fatto apposta.”

Differenza:

let userName;
const selectedUser = null;

userName è undefined perché non è stato assegnato nessun valore.

selectedUser è null perché abbiamo impostato intenzionalmente un valore vuoto.

Pensala così:

Molto filosofico.

Molto utile.

typeof

L’operatore typeof ti dice il tipo di un valore.

Esempio:

const name = "Viktor";
const age = 33;
const isStudent = false;

console.log(typeof name);
console.log(typeof age);
console.log(typeof isStudent);

Output:

string
number
boolean

Prova anche questo:

let city;
const selectedItem = null;

console.log(typeof city);
console.log(typeof selectedItem);

Output:

undefined
object

Sì.

typeof null restituisce "object".

È una vecchia stranezza di JavaScript.

Non provare a correggerla.

Molti sviluppatori coraggiosi l’hanno fissata negli occhi.

È ancora lì.

Come uno strano monumento.

Regole per Nomi di Variabili

I nomi delle variabili possono contenere:

Ma non possono iniziare con un numero.

Buono:

const userName = "Anna";
const userAge = 25;
const totalPrice = 300;

Sbagliato:

const 1user = "Anna";

Inoltre, i nomi delle variabili sono case-sensitive:

const userName = "Anna";
const username = "Marco";

Sono due variabili diverse.

JavaScript le vede diverse.

Gli umani le vedono e iniziano a soffrire.

Usa nomi chiari.

Buono:

const productPrice = 49;
const userEmail = "hello@example.com";
const isMenuOpen = true;

Sbagliato:

const p = 49;
const x = "hello@example.com";
const thing = true;

Al computer non importa.

Al tuo cervello sì.

Rispetta il tuo cervello.

Ha già troppe tab aperte.

Costruisci un Piccolo Esempio

Sostituisci script.js con questo:

const productName = "JavaScript Course";
const price = 49;
const discount = 10;
const isAvailable = true;

const finalPrice = price - discount;

console.log(`Prodotto: ${productName}`);
console.log(`Prezzo originale: €${price}`);
console.log(`Sconto: €${discount}`);
console.log(`Prezzo finale: €${finalPrice}`);
console.log(`Disponibile: ${isAvailable}`);

Aggiorna il browser.

Dovresti vedere:

Prodotto: JavaScript Course
Prezzo originale: €49
Sconto: €10
Prezzo finale: €39
Disponibile: true

Questo esempio usa:

Piccolo esempio.

Tante idee importanti.

JavaScript sta già facendo lavoro utile.

Niente fuochi d’artificio.

Ma sicuramente una piccola scintilla.

Mostra Dati nella Pagina

Ora mostriamo i dati in HTML.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variabili e Tipi di Dati</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border-radius: 18px;
      border: 2px solid #e5e7eb;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Variabili e Tipi di Dati</h1>

  <div class="card">
    <h2 id="productName"></h2>
    <p id="productPrice"></p>
    <p id="productStatus"></p>
  </div>

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

Ora aggiorna script.js:

const productName = "JavaScript Course";
const price = 49;
const discount = 10;
const isAvailable = true;

const finalPrice = price - discount;

const productNameElement = document.getElementById("productName");
const productPriceElement = document.getElementById("productPrice");
const productStatusElement = document.getElementById("productStatus");

productNameElement.textContent = productName;
productPriceElement.textContent = `Prezzo finale: €${finalPrice}`;
productStatusElement.textContent = `Disponibile: ${isAvailable}`;

Aggiorna il browser.

Ora JavaScript salva dati nelle variabili e scrive quei dati nella pagina.

Questo è importante.

Non stai più solo stampando cose nella console.

Stai usando JavaScript per controllare il contenuto della pagina.

La pagina sta diventando dinamica.

Molto bene.

Probabilmente HTML ora si sente importante.

Errori Comuni

Dimenticare le Virgolette nelle Stringhe

Sbagliato:

const name = Viktor;

Corretto:

const name = "Viktor";

Senza virgolette, JavaScript pensa che Viktor sia il nome di una variabile.

Poi cerca quella variabile.

Poi non la trova.

Poi si lamenta.

Classico JavaScript.

Riassegnare const

Sbagliato:

const score = 0;
score = 10;

Corretto:

let score = 0;
score = 10;

Usa let se il valore cambia.

Usa const se non cambia.

Regola semplice.

Risultato forte.

Confondere Stringhe e Numeri

Questo è un numero:

const age = 33;

Questa è una stringa:

const age = "33";

Sembrano simili.

Ma non sono la stessa cosa.

I numeri servono per la matematica.

Le stringhe sono testo.

JavaScript a volte converte valori automaticamente.

Può essere utile.

Può anche creare caos con una bella giacca.

Fai attenzione.

Nomi di Variabili Brutti

Male:

const data = "Anna";
const thing = 25;
const value = true;

Meglio:

const userName = "Anna";
const userAge = 25;
const isLoggedIn = true;

I buoni nomi rendono il codice più facile da capire.

Il codice viene letto più spesso di quanto venga scritto.

Scrivi per gli umani.

Il computer capisce già il nonsense.

Pratica

Crea variabili per un profilo utente:

Poi stampa una frase usando un template literal.

Esempio output:

Viktor Holovin ha 33 anni e vive in Italy. Online: true

Usa:

const firstName = "Viktor";
const lastName = "Holovin";
const age = 33;
const country = "Italy";
const isOnline = true;

const profile = `${firstName} ${lastName} ha ${age} anni e vive in ${country}. Online: ${isOnline}`;

console.log(profile);

Poi cambia i valori e crea il tuo profilo.

Non solo copiare.

Modifica.

Rompi.

Sistema.

È lì che si nasconde l’apprendimento.

Mini Sfida

Crea una piccola product card.

Variabili:

Mostra il risultato nella pagina del browser, non solo nella console.

Usa:

Bonus:

Se il prodotto è disponibile, mostra:

Questo prodotto è disponibile.

Se non lo è, mostra:

Questo prodotto non è disponibile.

Ti servirà un if.

Studieremo le condizioni bene nella prossima lezione, ma puoi già provare.

Un po’ di fatica è salutare.

Come palestra per il cervello.

Senza asciugamano sudato.

Riassunto

Oggi hai imparato che:

Questo è un grande passo.

Le variabili sono ovunque in JavaScript.

Se JavaScript fosse una cucina, le variabili sarebbero le ciotole dove metti gli ingredienti.

Senza ciotole, stai solo tenendo uova in mano e sperando per il meglio.

Strategia pessima.

Prossima Lezione

Nella prossima lezione impareremo operatori e condizioni.

Insegnerai a JavaScript a prendere decisioni.

Se succede questo, fai quello.

Se no, fai qualcos’altro.

In pratica, JavaScript inizierà a giudicare le situazioni.

Educatamente.

Più o meno.