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é.
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |