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:
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.
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... |
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... |
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
|
|
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 |