JavaScript da zero: variabili, funzioni e DOM

In quarta, nel liceo scienze applicate (ma lo stesso vale in qualunque corso di informatica che faccia web), dopo HTML e CSS dell’autunno arriva JavaScript. Di solito parte tra fine ottobre e novembre, e la verifica pratica cade a dicembre-gennaio: da oggi mancano circa 8-12 settimane, quindi c’è tempo, ma non tanto da rimandare. Il calendario tipico è: HTML/CSS, JavaScript base, poi modello E-R e SQL. Questo post ti dà la base di JavaScript puro, senza librerie: se vuoi andare oltre, React è un altro discorso e ne parlo in Web development: React da zero. Qui invece serve capire bene le fondamenta, perché la verifica chiede quelle.

Se ti manca ancora la parte HTML/CSS, parti da HTML e CSS in quarta superiore: JavaScript si appoggia su quella struttura.

Cosa chiede la verifica

Di solito una prova al PC e qualche domanda teorica. Le richieste ricorrenti sono quattro: dichiarare variabili con il tipo giusto, scrivere una funzione che fa un calcolo, usare if e for su un array, e collegare tutto a una pagina HTML leggendo un campo e scrivendo un risultato. L’ultima è quella che fa perdere più punti, perché mette insieme tutto.

Variabili e tipi

Si dichiara con let (valore che può cambiare) e const (valore che non viene riassegnato):

const nome = "Giulia";   // stringa
let eta = 16;            // numero
let maggiorenne = false; // booleano
eta = eta + 1;           // ok, è let

I tipi che ti servono: number (interi e decimali sono lo stesso tipo), string, boolean, più undefined (variabile dichiarata senza valore) e null (assenza voluta). Con typeof eta ottieni "number".

Una stringa si concatena con +, oppure con i template literal con gli apici inversi:

const saluto = `Ciao ${nome}, hai ${eta} anni`;

Operatori: il caso di == e ===

Gli operatori aritmetici sono i soliti (+ - * / %, dove % è il resto). Per confrontare:

• === confronta valore e tipo;
• == converte i tipi prima di confrontare, e a volte dà risultati sorprendenti.

5 === "5"   // false: numero contro stringa
5 == "5"    // true: la stringa viene convertita
0 == false  // true
0 === false // false

Regola da verifica: usa sempre === e !==. Se il professore chiede “che differenza c’è”, la risposta è quella sopra, con un esempio.

Funzioni

Una funzione raggruppa istruzioni sotto un nome, riceve parametri e restituisce un valore con return:

function area(base, altezza) {
  return base * altezza / 2;
}

console.log(area(6, 4)); // 12

Esiste anche la forma con la freccia, equivalente per i casi semplici:

const doppio = (x) => x * 2;

Attenzione a distinguere return da console.log: console.log stampa nella console e basta; return restituisce il valore a chi ha chiamato la funzione. Una funzione senza return restituisce undefined.

if, for e array

const voti = [6, 8, 5, 9, 7];

let somma = 0;
for (let i = 0; i < voti.length; i++) {
  somma = somma + voti[i];
}
const media = somma / voti.length;

if (media >= 6) {
  console.log("Sufficiente: " + media);
} else {
  console.log("Insufficiente: " + media);
}

Con questi voti la somma è 35, la media 7. Gli indici partono da 0, quindi l’ultimo elemento è voti[voti.length - 1]. Altri metodi base: voti.push(10) aggiunge in coda, voti.length dà la lunghezza. Il for ... of è una forma più comoda quando non ti serve l’indice:

for (const v of voti) {
  console.log(v);
}

Il DOM: collegare JavaScript alla pagina

Il DOM è l’albero degli elementi della pagina, che JavaScript può leggere e modificare. Le funzioni da conoscere:

• document.getElementById("id") trova un elemento per id;
• document.querySelector(".classe") trova il primo elemento che corrisponde a un selettore CSS (gli stessi dell’HTML/CSS: #id, .classe, p);
• elemento.textContent = "..." cambia il testo;
• elemento.addEventListener("click", funzione) esegue la funzione quando l’utente clicca.

Per un campo di input si legge input.value.

Mini-progetto: lista della spesa

Un file index.html completo. Salvalo, aprilo nel browser: funziona senza server.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Lista della spesa</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Lista della spesa</h1>
  <input id="voce" type="text" placeholder="Cosa devi comprare?">
  <button id="aggiungi">Aggiungi</button>
  <p id="conteggio">Voci: 0</p>
  <ul id="lista"></ul>
</body>
</html>

E script.js nella stessa cartella:

const input = document.getElementById("voce");
const bottone = document.getElementById("aggiungi");
const lista = document.getElementById("lista");
const conteggio = document.getElementById("conteggio");

let totale = 0;

function aggiungiVoce() {
  const testo = input.value.trim();
  if (testo === "") {
    return; // niente voci vuote
  }
  const li = document.createElement("li");
  li.textContent = testo;
  lista.appendChild(li);

  totale = totale + 1;
  conteggio.textContent = "Voci: " + totale;

  input.value = "";
  input.focus();
}

bottone.addEventListener("click", aggiungiVoce);

Cosa succede: al click si legge il testo (trim() toglie gli spazi ai bordi), si scarta se vuoto, si crea un <li>, lo si aggiunge alla lista, si aggiorna il contatore e si svuota il campo. Se la verifica ti chiede un contatore semplice, è lo stesso schema: una variabile let, un listener sul bottone, un textContent aggiornato.

Nota che nel codice ho passato aggiungiVoce senza parentesi a addEventListener: la funzione viene eseguita al click, non subito.

Errori tipici

1. Usare var. Funziona, ma ha uno scope di funzione e non di blocco, e ti fa trovare variabili “vive” dove non te le aspetti. Nei programmi scolastici usa let e const.

2. == al posto di ===. Visto sopra.

3. Script caricato prima dell’elemento. Se metti <script src="script.js"> nell’<head> senza defer, il browser esegue il codice quando il <body> non esiste ancora: getElementById restituisce null e al primo uso ottieni un errore del tipo “Cannot read properties of null”. Soluzioni: l’attributo defer (come nell’esempio sopra), oppure lo script in fondo al <body>.

4. Stringhe al posto dei numeri con input.value. Il valore di un campo è sempre una stringa, anche se l’utente scrive 5. Quindi "5" + "3" dà "53", non 8. Si converte con Number(input.value) o parseFloat(input.value).

5. Parentesi sulla funzione nel listener. addEventListener("click", aggiungiVoce()) esegue la funzione subito e passa il suo risultato: non è quello che volevi.

6. Confondere return e console.log. Spiegato sopra.

Esercizi svolti

Esercizio 1. Cosa stampa ciascuna riga?

console.log(3 == "3");
console.log(3 === "3");
console.log("3" + 4);
console.log(3 + 4);
console.log("3" * 2);

Risposta: true, false, "34", 7, 6. Il + con una stringa concatena; il * invece converte la stringa in numero, quindi "3" * 2 dà 6. È una domanda classica perché mostra che + e * non si comportano allo stesso modo con le stringhe.

Esercizio 2. Scrivi una funzione sommaPari(arr) che restituisce la somma dei soli numeri pari di un array.

function sommaPari(arr) {
  let somma = 0;
  for (const n of arr) {
    if (n % 2 === 0) {
      somma = somma + n;
    }
  }
  return somma;
}

console.log(sommaPari([1, 2, 3, 4, 5, 6])); // 12

I pari sono 2, 4 e 6: somma 12. Lo schema è sempre lo stesso: accumulatore a 0, ciclo, condizione, return fuori dal ciclo. Se metti il return dentro il ciclo, la funzione esce alla prima iterazione.

Esercizio 3. Una pagina ha due campi numerici a e b, un bottone e un paragrafo risultato. Al click deve mostrare la somma.

<input id="a" type="number">
<input id="b" type="number">
<button id="somma">Somma</button>
<p id="risultato"></p>
<script defer src="somma.js"></script>

const campoA = document.getElementById("a");
const campoB = document.getElementById("b");
const risultato = document.getElementById("risultato");

document.getElementById("somma").addEventListener("click", () => {
  const somma = Number(campoA.value) + Number(campoB.value);
  risultato.textContent = "Somma: " + somma;
});

Con 2 e 3 compare “Somma: 5”. Senza Number(...) comparirebbe “Somma: 23”: è l’errore numero 4 in azione, ed è quello che vedo più spesso nelle prove.

Simulatore

Per l’informatica non c’è ancora un simulatore dedicato a questo argomento: puoi guardare cosa c’è nella pagina Informatica e, per esercitarti davvero, scrivere codice a mano e provarlo nel browser (la console degli strumenti per sviluppatori, tasto F12, è il tuo laboratorio).

Piano per le prossime settimane

1. Prime 2 settimane: variabili, tipi, operatori, if. Scrivi dieci mini-programmi nella console.
2. Settimane 3-4: funzioni, array, for. Rifai l’esercizio 2 con altre condizioni (somma dei multipli di 3, massimo di un array).
3. Settimane 5-6: DOM. Rifai il mini-progetto della lista senza guardare, poi aggiungi una funzione “svuota lista”.
4. Ultime settimane: riscrivi da zero una pagina con due campi e un risultato, a tempo, come in verifica.

Prima della prova controlla: dichiaro con let/const? Confronto con ===? Lo script ha defer? Converto input.value? I listener hanno la funzione senza parentesi?

Se vuoi una mano a mettere in ordine tutto questo, scrivimi da Contatti: la diagnosi è gratuita e partiamo dal punto in cui ti blocchi.