Abbiamo visto che se utilizziamo un approccio rigoroso con variabili globali e locali (quelle create con var) le funzioni diventano una scatola chiusa, e tutto quello che succede all'interno di una funzione non ha nessuna validità al di fuori. Ma come fare per comunicare con l'esterno?
Se dobbiamo introdurre dei valori all'interno della funzione possiamo utilizzare gli argomenti, ma finora non abbiamo visto ancora nulla che ci permetta di restituire all'esterno dei valori.
Vediamo un esempio.
Per comodità decidiamo di inserire in una funzione il prompt con la richiesta di nome (che abbiamo esaminato in una precedente lezione) e decidiamo di utilizzare la dichiarazione di variabili locali.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Corso JavaScript ad esempi</title>
<script type="text/javascript">
function chiediNome() {
var nomeUtente=prompt("Scrivi il tuo nome","il tuo nome");
//ATTENZIONE!
//la variabile è definita come "locale"
//se non mettessimo "var" funzionerebbe tutto
}
</script>
</head>
<body>
<script type="text/javascript">
chiediNome(); // lancio la funzione
document.write("Benvenuto ");
document.write(nomeUtente);
</script>
</body>
</html>
Come si vede lo script che abbiamo composto dà errore, semplicemente perché la variabile è preceduta da var e quindi definita come locale: il browser (o più esattamente il motore di scripting del browser) si scorda della variabile appena fuori dalla funzione.
Per risolvere questo problema dobbiamo utilizzare l'istruzione return, che serve per restituire i valori e fa sì che una funzione comunichi con l'esterno. Il return va messo sempre alla fine della porzione di codice che ci interessa, e si utilizza in due modi:
|
Basta poi catturare tutta quanta la funzione in una variabile, per aver catturato il valore restituito dalla funzione stessa. Così:
miaVariabile = miaFunzione();
Vediamo l'esempio precedente adattato con l'uso di return.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Corso JavaScript ad esempi</title>
<script type="text/javascript">
function chiediNome() {
var nomeUtente=prompt("Scrivi il tuo nome","il tuo nome");
return nomeUtente; //la funzione restituisce ora il nome dell'utente
}
</script>
</head>
<body>
<script type="text/javascript">
valoreCatturato=chiediNome(); // lancio la funzione
document.write("Benvenuto ");
document.write(valoreCatturato);
</script>
</body>
</html>
In JavaScript per lo più utilizzerete un approccio "soft" alle variabili, e spesso non distinguerete tra variabili globali e locali, quindi non vi capiterà spesso di usare return. Infatti per avere a disposizione nel resto della pagina un valore creato all'interno di una funzione, basta crearlo senza usare var. Tutto funziona alla perfezione se scriviamo:
function chiediNome() {
nomeUtente=prompt("Scrivi il tuo nome","il tuo nome");
}
chiediNome();
alert(nomeUtente);
Come abbiamo visto però, il return serve anche per bloccare l'esecuzione del codice e ci sono particolari contesti in cui può tornare particolarmente utile: lo vedremo nelle prossime lezioni.
Vediamo comunque un esempio per afferrare subito il concetto:
function saluta() {
alert("primo ciao");
return;
alert("secondo ciao");
}
saluta();
come si vede il secondo alert non viene eseguito, perché posto dopo il return.
Nota Bene
A scanso di equivoci, è opportuno specificare che né gli argomenti, né il return sono obbligatori: in molti casi avremo funzioni che non hanno bisogno di nessun argomento, e che non restituiscono alcunché.