Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

JS: Funzioni ed eventi

Funzioni

function saluta(nome) {
    return `Ciao, ${nome}!`;
}

let messaggio = saluta("Andrea");
console.log(messaggio); // "Ciao, Andrea!"

La sintassi ricorda Python (def diventa function, e serve la parola chiave return — identica in entrambi i linguaggi), con due differenze da notare:

function saluta(nome) {
    return `Ciao, ${nome}!`;
}
  • le graffe { } delimitano il corpo della funzione (niente indentazione obbligatoria come in Python — anche se restare indentati resta buona pratica per leggibilità)
  • i parametri non hanno un tipo dichiarato né un default “alla Python” con = diretto nella firma in tutti i casi semplici, ma JS supporta comunque valori di default:
function saluta(nome = "ospite") {
    return `Ciao, ${nome}!`;
}

console.log(saluta());        // "Ciao, ospite!"
console.log(saluta("Marco"));  // "Ciao, Marco!"

Funzioni anonime e arrow function

Oltre alla sintassi con function, JS offre una scrittura più compatta molto usata, specialmente per funzioni brevi passate come argomento ad altre funzioni:

// Sintassi "arrow function"
const somma = (a, b) => {
    return a + b;
};

// Se il corpo è una sola riga con return, si può abbreviare ancora:
const somma2 = (a, b) => a + b;

console.log(somma(2, 3));  // 5
console.log(somma2(2, 3)); // 5

Non è un tipo di funzione “diverso” concettualmente: è solo una sintassi più corta, molto comune quando la funzione è breve o viene passata come parametro (lo vedremo subito con gli eventi).

Eventi: far reagire la pagina

Finora il nostro JS eseguiva codice “una volta”, al caricamento della pagina. Gli eventi permettono di eseguire codice in risposta a un’azione dell’utente: un click, la pressione di un tasto, l’invio di un form.

<button id="mio-bottone">Clicca qui</button>

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

const bottone = document.getElementById("mio-bottone");

bottone.addEventListener("click", function() {
    console.log("Hai cliccato il bottone!");
});

Tre passaggi, sempre gli stessi:

  1. Trovare l’elemento HTML (document.getElementById(...) — lo approfondiamo nel capitolo sul DOM)
  2. Chiamare addEventListener(tipo_evento, funzione) su quell’elemento
  3. Scrivere la funzione che deve eseguirsi quando l’evento scatta (detta callback, cioè “funzione richiamata dopo”)

Con la sintassi arrow function, lo stesso codice si scrive spesso così:

bottone.addEventListener("click", () => {
    console.log("Hai cliccato il bottone!");
});

Note

addEventListener è analogo ai Bind di wxPython, con la possibilità ulteriore di poter definire al volo la funzione evento da eseguire in risposta.
Piccola differenza di nomenclatura: in Python le funzioni collegabili con Bind sono chiamate funzioni evento, in JS le funzioni abbinate ad addEventListener sono chiamate callback.

Altri eventi comuni

// Al passaggio del mouse
elemento.addEventListener("mouseover", () => {
    console.log("Mouse sopra l'elemento");
});

// Alla pressione di un tasto
document.addEventListener("keydown", (evento) => {
    console.log(`Hai premuto: ${evento.key}`);
});

// Quando la pagina ha finito di caricare
document.addEventListener("DOMContentLoaded", () => {
    console.log("Pagina pronta");
});

Nota (evento) nell’esempio di keydown: il browser passa automaticamente alla funzione callback un oggetto con informazioni sull’evento accaduto (quale tasto, quale elemento, eccetera). Lo useremo molto nel capitolo sulla validazione dei form.

DOMContentLoaded è un evento speciale, molto usato: garantisce che il codice al suo interno parta solo dopo che tutto l’HTML è stato caricato — un’alternativa a metter lo <script> in fondo al <body>, utile soprattutto se lo script è nell’<head>.

Esercizi

Esercizio w321

Scrivi una funzione raddoppia(numero) che ritorna il doppio del numero passato. Chiamala con un paio di valori diversi e stampa i risultati con console.log().

Esercizio w322

Riscrivi la funzione dell’esercizio precedente come arrow function in forma abbreviata (una sola riga, senza return esplicito).

Esercizio w323

Crea un bottone HTML con id="saluto". In JS, aggiungi un addEventListener sul click che stampi in console "Ciao dal bottone!".

Esercizio w324

Nel seguente codice l’evento non scatta mai: manca la chiamata a addEventListener, ed è stata scritta erroneamente la chiamata diretta alla funzione. Correggi il problema:

da_correggere.js
const bottone = document.getElementById("mio-bottone");

function mostraMessaggio() {
    console.log("Hai cliccato!");
}

bottone.mostraMessaggio();