Argomenti trattati: la sintassi delle funzioni, parametri e argomenti nel codice JavaScript.
Le funzioni, a differenza dei costrutti sintattici visti finora, facenti parte della dotazione del linguaggio, sono costrutti definibili dal programmatore e sono in grado di facilitare notevolmente il compito di scrivere del codice sintetico e riutilizzabile. Per riutilizzabilità del codice si intende la possibilità di includere lo stesso in un file esterno avendo modo di caricarlo, grazie a una semplice istruzione - che nel caso di JavaScript è l'attributo di un tag dell'HTML - in piú script separati. Di questo argomento ci occuperemo piú avanti, una volta terminata la trattazione delle funzioni. In JavaScript ed in molti altri linguaggi, una funzione è una porzione di codice che può essere richiamata in qualsiasi parte del programma grazie ad un nome di identificazione. In JavaScript una funzione viene sempre dichiarata con la parola chiave function, a cui segue il nome di identificazione della funzione. Tale nome è sempre seguito da una coppia di parentesi tonde; l'àmbito della funzione - ovvero tutto il codice che ne fa parte - è delimitato, invece, da una coppia di parentesi graffe. Per maggiore chiarezza si osservi attentamente l'esempio seguente:
<html>
<title>Esempio di Funzione in JavaScript</title>
<head>
<script language="JavaScript">
<!--
function mia_Funzione() //Dichiarazione della funzione
{ //Parentesi graffa di apertura; delimita il blocco di codice
alert('Esempio di funzione in JavaScript');
} //Chiude il blocco di codice
-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
mia_Funzione(); //Richiama il blocco di codice delimitato dalle parentesi graffe
-->
</script>
</body>
</html>
// Quando la pagina viene caricata, viene letta in maniera sequenziale; la funzione mia_Funzione() viene letta al momento della dichiarazione ma il codice contenuto all'interno delle parentesi graffe non viene eseguito subito. L'esecuzione del codice avviene solo quando la funzione viene chiamata all'interno del tag <body>. Come è facile intuire, in tal modo si evita di dover riscrivere lo stesso codice nel caso che sia necessario eseguirlo piú volte; è sufficiente richiamare la funzione con il solo nome di identificazione seguito dalle parentesi tonde e dal punto e virgola. Il codice dell'esempio visualizza un semplice messaggio all'utente. Come avremo modo di vedere piú avanti, le parentesi tonde che seguono il nome della funzione possono anche contenere degli argomenti detti parametri; questo è un argomento che tratteremo tra poco.
Ora che abbiamo introdotto il concetto di funzione è possibile chiarire la differenza tra variabili globali e variabili locali che era stato solo accennato nel capitolo sulle variabili. Una variabile globale viene definita al di fuori di qualsiasi funzione e il suo valore può essere letto da tutte le funzioni dello script, mentre una variabile locale viene definita all'interno di una funzione e al suo valore può accedere solo quella stessa funzione. Poniamo il caso che in uno script ci siano due funzioni, ognuna con una propria variabile locale; ciascuna funzione non potrà accedere alla variabile dell'altra. Se però, fuori dell'area di validità di ciascuna funzione, definiamo una terza variabile, si potrà constatare come a entrambe le funzioni sia possibile accedere al suo valore. L'esempio seguente illustra tale caso:
<html>
<title>Area di Validità di una Variabile</title>
<head>
<script language="JavaScript">
<!--
var mia_Globale=1; //dichiarazione ed inizializzazione della variabile globale
function f1() //Dichiarazione della prima funzione
{ //Parentesi graffa di apertura; delimita il blocco di codice
var mia_Locale=2; //dichiarazione ed inizializzazione della variabile locale
alert('La variabile locale di f1() vale ' + mia_Locale); //Mostra il valore della variabile locale
alert('La variabile globale vale ' + mia_Globale); //Mostra il valore della variabile globale
} //Chiude il blocco di codice
function f2() //Dichiarazione della seconda funzione
{ //Parentesi graffa di apertura; delimita il blocco di codice
var mia_Locale=3; //dichiarazione ed inizializzazione della variabile locale
alert('La variabile locale di f2() vale ' + mia_Locale); //Mostra il valore della variabile locale
alert('La variabile globale vale ' + mia_Globale); //Mostra il valore della variabile globale
} //Chiude il blocco di codice
-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
f1(); //Richiama la prima funzione
f2(); //Richiama la seconda funzione
-->
</script>
</body>
</html>
// Anche se potrebbe inizialmente ingenerare confusione, nell'esempio è stato volutamente assegnato lo stesso nome alle due variabili locali proprio per mettere maggiormente in evidenza come esse, pur essendo omonime, siano considerate a tutti gli effetti due variabili distinte. Se infatti l'identificatore di nome mia_Locale viene utilizzato nella prima funzione, il valore restituito sarà 2, cioè quello della prima variabile locale; analogamente, lo stesso identificatore utilizzato nella funzione f2() restituirà il valore 3. Invece, entrambe le funzioni possono accedere al valore della variabile chiamata mia_Globale, in quanto essa è stata definita al di fuori di qualsiasi funzione. È importante ricordare che una variabile locale viene creata solo al momento dell'utilizzo della funzione in cui essa è definita e viene eliminata dalla memoria nel momento in cui la stessa funzione termina. Per comprendere maggiormente quanto esposto finora si provi ad eseguire quest'esempio premendo il pulsante qui sotto e magari a copiarlo e modificarlo a piacimento.
Gran parte dell'indubbia versatilità che le funzioni possiedono deriva dal fatto che sono capaci di accettare dei parametri, detti anche argomenti, al momento della loro chiamata - o per usare un termine tecnico dal sapore vagamente "mistico" - della loro "invocazione". I parametri non sono altro che delle variabili che vengono create in memoria nel momento stesso della chiamata alla funzione. Per meglio chiarire questo concetto si osservi l'esempio seguente:
<html>
<title>Esempio di Funzione con argomenti</title>
<head>
<script language="JavaScript">
<!--
function mia_Funzione(arg1)
{
alert('L'argomento di questa funzione è: ' + arg1);
}
-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
mia_Funzione('argomento di prova');
-->
</script>
</body>
</html>
// È necessario soffermarci su questo esempio data l'importanza dell'argomento. La corretta comprensione delle funzioni è infatti basilare per poter programmare. Come si può vedere nel listato d'esempio viene definita una funzione chiamata mia_Funzione che accetta, al momento della chiamata, un argomento come parametro. Scopo della funzione dimostrativa è quello di visualizzare tramite un'istruzione alert l'argomento con cui è stata chiamata. Piú avanti nel listato si può vedere che la funzione viene chiamata con una stringa come argomento; la stringa è: "argomento di prova" e sarà proprio quello che la funzione visualizzerà una volta "invocata". Ciò è possibile perché l'argomento con cui la funzione è stata dichiarata, cioè arg1 è una variabile di tipo variant come tutte quelle di JavaScript se non viene specificato altrimenti, che, al momento della chiamata prende il valore dell'argomento ricevuto. Se al posto di una stringa mia_Funzione fosse stata chiamata con un numero, la variabile arg1 avrebbe preso il valore di quel numero che sarebbe stato ugualmente visualizzato dall'istruzione alert.
Cliccando sul pulsante sottostante si avrà la dimostrazione pratica di quanto detto.
Naturalmente è possibile chiamare una funzione con piú di un argomento. Ciò è possibile, come in altri casi in JavaScript, usando la virgola come separatore. Il listato successivo mostra un esempio della dichiarazione e della chiamata di una funzione con tre argomenti di tipo diverso.
<html>
<title>Esempio di Funzione con piú argomenti</title>
<head>
<script language="JavaScript">
<!--
function mia_Funzione(arg1, arg2, arg3)
{
alert('Gli argomenti di questa funzione sono:\n' + arg1 + '\n' + arg2 + '\n' + arg3);
}
-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
mia_Funzione('primo argomento', 10, true);
-->
</script>
</body>
</html>
// In questo esempio i tre argomenti che vengono passati alla funzione mia_Funzione al momento della chiamata appartengono a tre sottotipi diversi: il primo è un argomento stringa come quello precedente mentre il secondo è di tipo numerico e il terzo è booleano. Tutti e tre verranno visualizzati dalla funzione cosí come sono stati scritti per chiamarla.
Finora abbiamo visto come chiamare una funzione con argomenti scritti direttamente "cosí come sono". In realtà questo è un caso non frequentissimo; è assai piú frequente che capiti di dover passare a una funzione degli argomenti sotto forma di variabili. Per il programmatore, tuttavia, non cambia molto. È però importante comprendere come avviene tale passaggio e cosa succede in memoria durante il passaggio di variabili a una funzione. Si osservi il seguente listato d'esempio:
<html>
<title>Esempio di Funzione chiamata con variabili</title>
<head>
<script language="JavaScript">
<!--
function mia_Funzione(arg1, arg2, arg3)
{
alert('Gli argomenti di questa funzione sono:\n' + arg1 + '\n' + arg2 + '\n' + arg3);
}
-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
var stringa='primo argomento', numero=10, bool=true;
mia_Funzione(stringa, numero, bool);
-->
</script>
</body>
</html>
// L'esempio mostrato è una variante di quello precedente; l'output prodotto dalla funzione è identico, diversa è però la chiamata alla funzione stessa. A differenza di quanto visto prima, infatti, nell'area di "invocazione" della funzione, vengono definite tre variabili che contengono gli stessi dati dell'esempio precedente. La chiamata alla funzione avviene, anziché scrivendo direttamente i tre argomenti, tramite l'utilizzo delle tre variabili. Come risulta chiaro dal listato, l'area della dichiarazione della funzione rimane inalterata: le variabili che andranno a contenere gli argomenti sono sempre le stesse tre di prima e identica è anche l'istruzione alert. Ciò che cambia è il modo in cui la funzione viene chiamata.
Come detto prima, però, piú che il modo in cui utilizzare le variabili per chiamare una funzione parametrizzata, che in fondo non si discosta da quello che si è visto finora sulle variabili, quello su cui ci si vuole soffermare è ciò che accade in memoria quando una funzione viene chiamata con delle variabili come argomenti. Come detto prima, gli argomenti con cui una funzione viene dichiarata non sono altro che variabili che assumono il valore dell'argomento al momento stesso della chiamata. Nel caso in cui gli argomenti siano variabili accade la stessa cosa: in memoria viene creata una copia del valore della variabile che funge da argomento ed è su questa copia che la funzione compirà le sue operazioni. Quando la funzione termina la propria esecuzione la copia in memoria della variabile originale viene cancellata. Questo modo di effettuare il passaggio di argomenti viene detto passaggio per valore. Una funzione può, ad esempio, modificare il valore della variabile "locale" che viene costruita in memoria ma tali modifiche non andranno a incidere sull'originale, cioè sulla variabile che le è stata passata come argomento. Il valore di quest'ultima rimarrà invariato. L'esempio che segue illustra un caso del genere.
<html>
<title>Esempio di Funzione con variabili</title>
<head>
<script language="JavaScript">
<!--
function mia_Funzione(arg1, arg2, arg3)
{
alert('Gli argomenti di questa funzione sono:\n' + arg1 + '\n' + arg2 + '\n' + arg3);
arg1+=' modificato';
arg2*=10;
arg3=false;
alert('Ora i valori delle variabili della funzione sono\n: ' + arg1 + '\n' + arg2 + '\n' + arg3);
}
-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
var stringa='primo argomento', numero=10, bool=true;
mia_Funzione(stringa, numero, bool);
alert('I valori delle variabili originali sono\n:' + stringa + '\n' + numero + '\n' + bool);
-->
</script>
</body>
</html>
// L'esempio mostra come le modifiche a cui vanno incontro le variabili copia di una funzione non incidano sulle variabili originali. Una funzione viene chiamata con i soliti tre argomenti ma questa volta il codice della stessa provvede a modificare i valori degli argomenti ricevuti. La variabile stringa arg1 viene modificata aggiungendo alla stringa primo argomento la parola modificato; quella numerica arg2 viene moltiplicata per 10 e diventa cosí uguale a 100; quella booleana, infine, viene portata da true a false. Successivamente la funzione visualizza i valori delle tre variabili locali cosí modificate e termina la sua esecuzione. Il controllo torna dunque all'altra parte dello script che ha chiamato la funzione, che mostra come i valori delle tre variabili originali non abbiano subíto mutazioni di sorta.
È importante fare pratica con le funzioni, perché, come detto precedentemente, esse sono di fondamentale importanza per poter scrivere del codice sintetico ed efficiente. Perciò si consiglia di approfondire bene quanto visto finora, studiando gli esempi e inventandosi esercizi per proprio conto, allo scopo di acquisire una certa familiarità con questo importante strumento di programmazione. Successivamente si potrà passare alla trattazione della seconda parte delle funzioni.