JavaScript: la logica nel browser

08 - JavaScript: la logica nel browser

Struttura: fatta. Stile: fatto. Il modulo dei Guardiani della Notte è solido e ha pure un bel look scuro. C'è solo un problema: se lo compili e premi il bottone... non succede niente di interessante. La pagina è bella, ma è ferma.

È il momento del terzo pilastro: JavaScript, l'unico linguaggio di programmazione che il browser sa eseguire. Se l'HTML è lo scheletro e il CSS è il vestito, JavaScript è i muscoli e i riflessi: reagisce a quello che fa l'utente, prende decisioni, cambia la pagina in tempo reale.

🔌 Portare JavaScript nella pagina

Come per il CSS, il codice va collegato all'HTML. Il modo giusto è un file separato, caricato con il tag <script> dentro l'<head>:

HTML · コード

<script src="guardiani.js" defer></script>

Quel defer è importante: dice al browser "scarica pure il file, ma eseguilo solo dopo aver costruito il DOM". Ricordi l'albero del capitolo sul browser? Se il nostro codice cercasse un bottone prima che il browser lo abbia creato, troverebbe il nulla. Con defer, l'ordine è sempre quello giusto.

📦 Le variabili: dare un nome alle cose

Una variabile è una scatola con un'etichetta: ci metti dentro un valore e lo richiami per nome. In JavaScript moderno si dichiara in due modi:

JAVASCRIPT · コード

1const nomeGuardiano = 'Jon Snow'; // non cambierà mai più
2let reclute = 3;                  // può cambiare nel tempo
3
4reclute = reclute + 1; // ok: le reclute ora sono 4

La regola che ti risparmierà mille bug: usa const di default, e passa a let solo quando il valore deve davvero cambiare. Meno cose possono mutare, meno cose possono rompersi.

Dentro le variabili puoi mettere di tutto: testi (le stringhe), numeri, veri/falsi (i booleani), liste di valori (gli array) e strutture con più proprietà (gli oggetti):

JAVASCRIPT · コード

1const motto = 'La notte si raduna';        // stringa
2const annoFondazione = -8000;              // numero (circa)
3const accettaReclute = true;               // booleano
4const castelli = ['Castello Nero', 'Forte Orientale']; // array
5const guardiano = { nome: 'Jon', ruolo: 'Lord Comandante' }; // oggetto

Nei tutorial più vecchi troverai anche var: è il modo antico di dichiarare variabili, con qualche comportamento bizzarro che let e const hanno sistemato. Riconoscilo quando lo vedi, ma non usarlo nel codice nuovo.

⚙️ Le funzioni: azioni con un nome

Se la variabile è una scatola, la funzione è una ricetta: un blocco di istruzioni con un nome, pronto per essere eseguito quando serve, anche mille volte.

JAVASCRIPT · コード

1function saluta(nome) {
2  return `Benvenuto alla Barriera, ${nome}!`;
3}
4
5saluta('Jon');   // "Benvenuto alla Barriera, Jon!"
6saluta('Sam');   // "Benvenuto alla Barriera, Sam!"

Due cose da notare. La prima: nome è un parametro, un segnaposto che prende il valore passato alla chiamata. La seconda: quel testo tra backtick (`) è una template literal, che permette di inserire variabili nel testo con ${...}: molto più comodo che incollare stringhe con il +.

Esiste anche una sintassi più compatta, la arrow function, che incontrerai ovunque nel codice moderno:

JAVASCRIPT · コード

const saluta = (nome) => `Benvenuto alla Barriera, ${nome}!`;

Stessa sostanza, meno cerimonia.

👂 Gli eventi: reagire all'utente

Ed eccoci al punto di svolta. Il browser genera un evento per qualsiasi cosa accada (un click, un tasto premuto, un form inviato) e JavaScript può mettersi in ascolto con addEventListener:

JAVASCRIPT · コード

1const bottone = document.querySelector('.btn-invio');
2
3bottone.addEventListener('click', () => {
4  console.log('Qualcuno vuole arruolarsi!');
5});

Leggi la prima riga con calma, perché è metà del mestiere: document.querySelector('.btn-invio') cerca nel DOM il primo elemento che corrisponde a quel selettore CSS: sì, proprio i selettori del capitolo scorso, che qui si riciclano pari pari. La seconda parte dice: "quando su questo elemento avviene un click, esegui questa funzione".

E console.log? Scrive nella tab Console dei DevTools. Aprila (F12), clicca il bottone, e guarda i tuoi messaggi apparire: è il primo strumento di indagine di ogni sviluppatore.

🌳 Manipolare il DOM

Ascoltare non basta: vogliamo anche cambiare la pagina. Il DOM che il browser costruisce non è un disegno statico: JavaScript può leggerlo e modificarlo in tempo reale:

JAVASCRIPT · コード

1const titolo = document.querySelector('#titolo-pagina');
2
3titolo.textContent = 'La Guardia ti osserva'; // cambia il testo
4titolo.classList.add('evidenziato');          // aggiunge una classe CSS

I ferri del mestiere sono pochi e si imparano in fretta:

document.querySelector(...): trova un elemento (con un selettore CSS)
.textContent: legge o cambia il testo di un elemento
.classList.add / .remove / .toggle: gestisce le classi CSS
document.createElement(...): crea un elemento nuovo di zecca
.value: legge quello che l'utente ha scritto in un campo

🛡️ Il modulo prende vita

Mettiamo insieme tutto (variabili, funzioni, eventi, DOM) e completiamo la trilogia dei Guardiani. Crea guardiani.js nella cartella del progetto (il <script> con defer lo abbiamo già collegato):

JAVASCRIPT · コード

1// troviamo il form nella pagina
2const form = document.querySelector('.form-dark');
3
4form.addEventListener('submit', (event) => {
5  // blocca l'invio della pagina: gestiamo tutto noi
6  event.preventDefault();
7
8  // leggiamo il nome inserito dall'utente
9  const nome = document.querySelector('#name').value;
10
11  // creiamo il messaggio di benvenuto
12  const messaggio = document.createElement('p');
13  messaggio.classList.add('benvenuto');
14  messaggio.textContent = `Benvenuto nella Guardia, ${nome}. La tua veglia ha inizio.`;
15
16  // sostituiamo il form con il messaggio
17  form.replaceWith(messaggio);
18});

E una classe in più in guardiani.css, per vestire il messaggio:

CSS · コード

1.benvenuto {
2  max-width: 500px;
3  margin: 40px auto;
4  padding: 20px;
5  background-color: #2e2e2e;
6  border-radius: 8px;
7  color: #f2f2f2;
8  text-align: center;
9}

Ricarica, compila, premi "Entra nella Guardia": il form scompare e al suo posto compare il benvenuto, col tuo nome dentro. Nota event.preventDefault(): di default l'invio di un form ricarica la pagina; noi lo blocchiamo e decidiamo cosa succede. È lo stesso principio su cui si reggono le Single Page Application del capitolo 2, solo che lì lo fa un framework, qui l'hai fatto tu.

🚀 ES6+: il JavaScript moderno

Un'ultima cosa, che è quasi una rivelazione. Il JavaScript che hai scritto oggi (const, let, le arrow function, le template literal) non è sempre esistito: è arrivato nel 2015 con ES6 (ECMAScript 2015), l'aggiornamento che ha trasformato il linguaggio. Da allora esce una versione nuova ogni anno, ed è per questo che si parla di "ES6+".

Quindi congratulazioni: hai già usato ES6 per tutto il capitolo senza saperlo. Altre due chicche che incontrerai prestissimo:

JAVASCRIPT · コード

1// destrutturazione: estrai proprietà con un colpo solo
2const guardiano = { nome: 'Jon', casata: 'Stark' };
3const { nome, casata } = guardiano;
4
5// spread: copia ed espandi array e oggetti
6const veterani = ['Jeor', 'Aemon'];
7const guardia = [...veterani, 'Jon']; // ['Jeor', 'Aemon', 'Jon']

E poi i moduli (import/export, per dividere il codice in più file) e le Promise con async/await, per gestire le operazioni che richiedono tempo, tipo le richieste HTTP del capitolo 2. A quelle dedicheremo lo spazio che meritano più avanti.

✅ Conclusione

Guarda cosa hai in mano adesso: una pagina strutturata con l'HTML, vestita con il CSS e viva grazie a JavaScript. I tre pilastri del frontend, tutti e tre al lavoro nello stesso progetto. E nessuno dei tre, come promesso, vince da solo.

C'è un'ultima cosa da vedere prima di chiudere questa parte: il nostro form è di 15 righe di JavaScript, ma le app vere ne hanno centinaia di migliaia. Come si fa a non impazzire? Nel prossimo capitolo parliamo di framework e librerie (Angular, React, Vue) e di come domano la complessità.