I parametri delle funzioni



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.

Ultimi articoli JavaScript

PhantomJS, headless browser per test con Javascript

Il tool ideale per realizzare, da terminale, operazioni in remoto su...

Creare e leggere QR Code in JavaScript

Applicazioni 'QR Code enabled' per il Web e per il mobile,...

Jquery UI Map: web-mapping con Google Maps e jQuery

Un plugin di jQuery UI per intefacciare applicaizoni Web/mobile con...

Scrollorama e Scrolldeck, slideshow d'effetto con jQuery

Plugin jQuery per ottenere Slideshow con diversi effetti di scrolling

jCanvas, un primo semplice grafico

Alla scoperta della libreria jCanvas, per semplificare il disegno e...

Altri articoli

Guide JavaScript

Guida Node.js

Il framework che permette di per usare V8, l'interprete JavaScript...

Canvas, guida ai framework

Canvas, tra gli elementi di HTML5 è forse quello di maggior impatto....

Guida Javascript: tecniche avanzate

Una guida dal taglio pratico per approfondire la programmazione a...

Altre guide

Newsletter @JavaScript

Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso JQuery e Ajax per Webmaster

03 Luglio 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti