In molti casi può essere utile passare dei "valori variabili" a una funzione, in modo da poterla utilizzare in molti contesti. In questo modo non siamo costretti a scrivere una funzione ogni volta che dobbiamo cambiare qualcosa: basta scrivere il codice una sola volta e individuare delle porzioni variabili.
Facciamo un esempio concreto. C'è una pagina in cui vogliamo aprire tre differenti finestre di diverse dimensioni:
- la prima di 300x290 e deve contenere un link a www.html.it
- la seconda di 400x390 e deve contenere un link ad freeasp.html.it
- la terza di 500x490 e deve contenere un link a free.php.html.it
In questo caso non è necessario scrivere tre differenti funzioni: basta scrivere la funzione una volta sola, specificando che ci sono delle parti della funzione che variano. Queste parti variabili si chiamano argomenti o parametri e vanno espresse nella dichiarazione della funzione.
Così:
function nomeFunzione(arg1, arg2, arg3, arg4) {
//codice
}
I parametri vengono indicati all'interno del codice nel punto che ci occorre, e svolgono a tutti gli effetti il ruolo di variabili.
Nella chiamata alla funzione dovremo poi indicare il valore che i parametri assumono nel caso specifico. Ad esempio:
nomeFunzione("finestraFreeAsp",1 , 400, 390, "http://freeasp.html.it");
Gli argomenti sono quindi una specie di "ponte" tra l'interno e l'esterno della funzione.
Vediamo un esempio semplice che ci permetta di afferrare subito il concetto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Esempio</title>
<script type="text/javascript">
function saluta(nome) { //nome è l'argomento
alert("ciao "+nome);
}
</script>
</head>
<body>
<a href="#" onClick="saluta('Saibal')">Saluta Saibal</a><br/>
<a href="#" onClick="saluta('Phantom')">Saluta Phantom</a><br/>
<a href="#" onClick="saluta('Berenicebis')">Saluta Berenicebis</a><br/>
</body>
</html>
Come si vede nell'esempio la funzione è sempre la stessa, ma c'è un "punto" che cambia: quel "punto variabile" è l'argomento che viene indicato nella dichiarazione della funzione, cioè qui:
function saluta(nome)
per poi essere applicato all'interno del codice al momento giusto. Cioè qui:
alert("ciao "+nome);
Torniamo all'esempio delle finestre, e riprendiamo quanto visto in una lezione precedente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Esempio</title>
<script type="text/javascript">
/* nella funzione sottostante passiamo 4 argomenti:
il nome della finestra è necessario per aprire
differenti finestre e non sempre la stessa */
function apriFinestra(nomeFinestra,larghezza,altezza,collegamento) {
/*assegno alla variabile il valore dell'argomento*/
larghFinestra=larghezza;
/* assegno alla variabile il valore dell'argomento*/
altezFinestra=altezza;
sinistra=screen.width-larghFinestra+20;
alto=(screen.height-larghFinestra)/2;
/*gli ultimi due argomenti sono nella stringa sottostante */
window.open(collegamento,nomeFinestra,"left="+sinistra+",top="+alto+",width=" +larghFinestra+",height="+altezFinestra+",menubar,toolbar,resizable");
//NB la riga precedente non va a capo
}
</SCRIPT>
</head>
<body>
<a href="#" onClick="apriFinestra('finestraHTML',300,290,'http://www.html.it')">HTML.it</a><br/>
<a href="#" onClick="apriFinestra('finestraASP',400,390,'http://freeasp.html.it')">FREEASP</a><br/>
<a href="#" onClick="apriFinestra('finestraPHP',500,490,'http://freephp.html.it')">FREEPHP</a><br/>
</body>
</html>
come si vede la funzione che apre la finestra è sempre la medesima, cambiano invece le dimensioni, il nome della finestra e il link: tutto questo viene passato alla funzione come argomento.
