Quick JS Tour

1. Cos'è JavaScript

JavaScript nasce per il browser (manipolazione del DOM, eventi), ma gira anche lato server (Node.js). Tipizzazione dinamica, come Lua e PHP.

<script>
  console.log("ciao");
</script>

2. Sintassi di base

Istruzioni separate da ; (spesso omesso grazie all'ASI, ma è buona norma metterlo). Commenti con // e /* ... */.

// commento di riga
console.log("ciao mondo");

3. Variabili: let, const, var

let e const hanno scope di blocco (come variabili locali in Lua); var ha scope di funzione ed è ormai da evitare.

let nome = "Dario";
const pi = 3.14;   // non riassegnabile
var legacy = true; // evitare

4. Tipi

Primitivi: string, number, boolean, undefined, null, symbol, bigint. Tutto il resto è object (array e funzioni incluse).

typeof "ciao";    // "string"
typeof 42;        // "number"
typeof undefined; // "undefined"
typeof null;      // "object" (storica stranezza di JS)

5. Stringhe e template literal

I backtick abilitano l'interpolazione e le stringhe multilinea, analoghe all'interpolazione di Lua/PHP.

const nome = "Dario";
console.log(`Ciao ${nome}, oggi è ${new Date().getFullYear()}`);

6. Array

const colori = ["rosso", "verde", "blu"];
colori[0];          // "rosso"
colori.push("giallo");
colori.length;       // 4
colori.map(c => c.toUpperCase());

7. Oggetti

L'oggetto letterale è l'equivalente della tabella-mappa di Lua o dell'array associativo di PHP.

const persona = {
    nome: "Dario",
    città: "Palermo",
};
persona.nome;       // "Dario"
persona["città"];   // accesso alternativo

8. Operatori

Aritmetici: + - * / % **. Confronto: == === != !== (usare sempre ===). Logici: && || !. Più due operatori moderni utili:

let x = null;
x ?? "default";    // nullish coalescing: "default"
persona?.indirizzo; // optional chaining: undefined senza errore

9. Condizionali

if (eta >= 18) {
    console.log("maggiorenne");
} else if (eta > 0) {
    console.log("minorenne");
} else {
    console.log("non valido");
}

const esito = eta >= 18 ? "maggiorenne" : "minorenne"; // ternario

10. Switch

switch (colore) {
    case "rosso": console.log("stop"); break;
    case "verde": console.log("vai"); break;
    default: console.log("?");
}

11. Ciclo for / while

for (let i = 0; i < 5; i++) {
    console.log(i);
}

let i = 0;
while (i < 5) { console.log(i); i++; }

12. for...of e for...in

for...of itera i valori (array, stringhe, ecc.); for...in itera le chiavi di un oggetto.

for (const colore of colori) console.log(colore);

for (const chiave in persona) console.log(chiave, persona[chiave]);

13. Funzioni

function somma(a, b) {
    return a + b;
}

const somma2 = (a, b) => a + b;   // arrow function

14. Closure

Una funzione "ricorda" le variabili dello scope in cui è stata definita, anche dopo che quello scope è terminato.

function contatore() {
    let n = 0;
    return () => ++n;
}
const conta = contatore();
conta(); // 1
conta(); // 2

15. this e contesto

Il valore di this dipende da come una funzione viene chiamata. Le arrow function non hanno un proprio this: ereditano quello dello scope esterno.

const obj = {
    nome: "Dario",
    saluta() { console.log(this.nome); }   // this = obj
};

16. Classi

class Persona {
    constructor(nome) { this.nome = nome; }
    saluta() { return `Ciao, sono ${this.nome}`; }
}
const p = new Persona("Dario");
p.saluta();

17. DOM: selezionare e manipolare

const el = document.querySelector("#titolo");
el.textContent = "Nuovo titolo";
el.classList.add("evidenziato");

const tutti = document.querySelectorAll("a[href]"); // NodeList

18. Eventi

document.addEventListener("DOMContentLoaded", () => {
    console.log("pagina pronta");
});

bottone.addEventListener("click", (event) => {
    console.log("cliccato", event.currentTarget);
});

19. fetch e async/await

async function caricaDati() {
    const risposta = await fetch("/api/dati");
    const dati = await risposta.json();
    console.log(dati);
}

20. Per chiudere

Con questo giro hai visto: sintassi, variabili, tipi, array/oggetti, controllo di flusso, funzioni, closure, classi, DOM, eventi e fetch — la spina dorsale del JavaScript "DHTML5", senza framework.

Prossimo passo naturale: vedere questi pezzi usati insieme in un'app vera (vedi il tour "JS Applicato").