sei sul sito di Giovanni Fraterno
( 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 )
Le funzioni sono
un comodo contenitore in cui racchiudere un gruppo di istruzioni JavaScript.
Un comodo contenitore
che sostanzialmente evita di mischiare fra loro codice HTML e linguaggio
JavaScript.
Per fare tutto
ciò è sufficiente inserire le linee di codice JavaScript in una funzione e
richiamare la funzione stessa quando occorre.
La sintassi
necessaria per creare una funzione è:
function
nomeFunzione() {
.............
}
La sintassi
necessaria per richiamare invece una funzione è:
nomeFunzione();
L’ordine
all'interno del documento HTML viene mantenuto inserendo tutte le funzioni
create all'interno della HEAD del documento, per poi richiamarle o nella stessa
HEAD o nel BODY del documento.
Di seguito è
riportato un semplice esempio:
<SCRIPT
type="text/javascript">
function
saluta() {
alert ("ciao");
}
saluta();
</SCRIPT>
Di seguito è
invece riportato un esempio in cui è rielaborato quanto riportato in
precedenza, ed ovviamente inserendo le funzioni, e nello specifico 3 funzioni, e
dove due delle quali vengono richiamate attraverso l'utilizzo di eventi, mentre
la terza viene richiamata all'interno della pagina:
<html>
<head>
<title>esempio</title>
<SCRIPT type="text/javascript">
function saluta() {
alert("ciao");
}
function apriFinestra() {
larghFinestra=300;
altezFinestra=200;
sinistra=screen.width-larghFinestra;
alto=(screen.height-larghFinestra)/2;
window.open("fines.htm","",
"left="+sinistra+",top="+alto+",width="+larghFinestra+",
height="+altezFinestra+",menubar=no,toolbar=no,resizable=no,fullscreen=no,location=no,
scrollbars=no,status=no");
}
function
scriviRisoluzione(){
document.write("Stai
navigando a una risoluzione di "+screen.width+" x
"+screen.height);
}
</SCRIPT>
</head>
<body onLoad="apriFinestra();">
<A
HREF="#" onClick="saluta();">clicca qui per ricevere un
saluto</A> <BR><BR>
<SCRIPT type="text/javascript">
scriviRisoluzione();
</SCRIPT>
</body>
</html>
Normalmente i
linguaggi di programmazione fanno distinzione fra variabili create all'interno del programma (programma che nel nostro caso è il
documento HTML) e fra variabili create all'interno delle funzioni.
Le prime
prendono il nome di variabili
globali e sono valide in
tutto il programma, le seconde prendono il nome variabili locali e sono valide soltanto all'interno della funzione.
Si chiama invece
ambito delle variabili il contesto entro cui una variabile è
valida.
In JavaScript, per
semplificare la vita al programmatore, la distinzione variabili
globali e variabili locali è valida solo se viene espressamente richiesta dal programmatore stesso.
Nel successivo esempio
così, una variabile viene creata e inizializzata al di fuori della funzione ed
è poi richiamata all'interno della funzione stessa:
<SCRIPT
type="text/javascript">
scritta="ciao";
function
saluta() {
alert(scritta);
}
saluta();
</SCRIPT>
Nel successivo esempio
invece, due variabili vengono create all'interno della funzione e poi
richiamate dall'esterno:
<html>
<head>
<title>esempio</title>
<SCRIPT
type="text/javascript">
function
saluta() {
scritta2="ciao";
scritta3="prova
scrittura"
}
saluta();
alert(scritta2);
</SCRIPT>
</head>
<body>
<SCRIPT TYPE="text/javascript">
document.write(scritta3);
</SCRIPT>
</body>
</html>
Se viceversa
vogliamo distinguere fra variabili globali e variabili locali
basta impiegare var.
A tal fine si
veda il successivo esempio:
<SCRIPT
type="text/javascript">
scritta="ciao
globale";
function
saluta() {
var scritta="ciao
locale";
}
saluta();
alert(scritta);
</SCRIPT>
Esempio,
quest’ultimo, nel quale appunto la spunta unicamente la variabile globale.
Insomma, se
utilizziamo variabili globali e variabili locali, le funzioni diventano una sorta
di cofanetto ermeticamente
chiuso.
Cofanetto dal
cui interno non si vede
nulla di quanto accade al di
fuori, per cui occorre utilizzare dei particolari strumenti per passare i valori alla funzione.
Cofanetto dal
cui interno non arriva
nulla di quanto accade al di
dentro, per cui occorre utilizzare uno strumento particolare per estrarre quello che la funzione stessa ha
elaborato.
Gli strumenti
particolari per passare i valori alla funzione sono e si
chiamano argomenti.
Gli argomenti vanno espressi nella dichiarazione della funzione mediante
la sintassi:
function
nomeFunzione(argomento1, argomento2, argomento3, argomento4)
Argomenti che
vanno poi esplicitati nella chiamata della funzione stessa, e per esempio
mediante la sintassi:
nomeFunzione("finestra",400,390,"www.libero.it")
A tal fine si
veda il successivo esempio:
<html>
<head>
<title>esempio</title>
<SCRIPT type="text/javascript">
function saluta(nome) {
alert("ciao "+nome);
}
</SCRIPT>
</head>
<body>
<A HREF="#"
onClick="saluta('Anna')">saluta Anna</A><BR>
<A
HREF="#" onClick="saluta('Giovanni')">saluta
Giovanni</A><BR>
<A HREF="#"
onClick="saluta('Paolo')">saluta Paolo</A><BR>
</body>
</html>
Esempio,
quest’ultimo, dal quale si evince che una medesima funzione viene usata in modo diversificato per ben 3 volte, e ciò senza bisogno di
scrivere tre differenti funzioni, ma semplicemente usando ogni volta soltanto
un argomento diverso.
Consideriamo
anche il seguente esempio, vogliamo cioè aprire all’interno di una pagina web
tre differenti finestre personalizzabili ognuna con le seguenti dimensioni:
- la prima di dimensioni
300x290 con il link a fines1.htm
- la seconda di dimensioni
400x390 con il link ad fines2.htm
- la terza di dimensioni
500x490 con il link a fines3.htm
In tal caso le
linee di codice che occorre scrivere sono:
<html>
<head>
<title>esempio</title>
<SCRIPT
type="text/javascript">
function
apriFinestra(nomeFinestra,larghezza,altezza,collegamento) {
larghFinestra=larghezza;
altezFinestra=altezza;
sinistra=screen.width-larghFinestra;
alto=(screen.height-larghFinestra)/2;
window.open(collegamento,nomeFinestra,"left="+sinistra+",top="+alto+",width="
+larghFinestra+",height="+altezFinestra+",menubar=no,toolbar=no,resizable=no,fullscreen=no,location=no,scrollbars=no,status=no");
}
</SCRIPT>
</head>
<body>
<A
HREF="#" onClick="apriFinestra('f1',300,290,'fines1.htm')"> fines1</A><BR>
<A HREF="#" onClick="apriFinestra('f2',400,390,'fines2.htm')">fines2</A><BR>
<A HREF="#" onClick="apriFinestra('f3',500,490,'
fines3.htm')">fines3</A><BR>
</body>
</html>
Si è già detto
che se utilizziamo variabili globali e variabili locali, le funzioni diventano
una sorta di cofanetto
ermeticamente chiuso,
cofanetto dal cui interno non
arriva nulla di quanto
accade al di dentro, per cui occorre utilizzare uno strumento particolare per estrarre quello che la funzione stessa ha
elaborato.
Ebbene, lo
strumento particolare per
estrarre quello che la
funzione stessa ha elaborato è l'istruzione return,
difatti consentendo che una funzione comunichi con l'esterno.
A tal fine basta
catturare tutta quanta la funzione con lo scopo di sistemarla all’interno di una
variabile, e ciò mediante ad esempio la sintassi:
miaVariabile =
miaFunzione();
quindi nello
scrivere l’istruzione:
return miaVariabile
istruzione che
restituendo il valore della variabile miaVariabile
finisce alla fine per restituire anche ciò che la funzione miaFunzione ha elaborato.
Si veda il
successivo esempio:
<html>
<head>
<title> esempio</title>
<SCRIPT TYPE="text/javascript">
function
chiediNome() {
var
nomeUtente=prompt("Scrivi il tuo nome","il tuo nome");
return
nomeUtente;
}
</SCRIPT>
</head>
<body>
<SCRIPT TYPE="text/javascript">
valoreCatturato=chiediNome();
document.write("Benvenuto
");
document.write(valoreCatturato);
</SCRIPT>
</body>
</html>
Si noti che
l’istruzione return da sola fa terminare una porzione di
codice.
A tal fine si
veda il successivo esempio:
<SCRIPT TYPE="text/javascript">
function saluta() {
alert("primo ciao");
return;
alert("secondo
ciao");
}
saluta();
</SCRIPT>
con il secondo
alert che infatti non viene eseguito perché posto dopo il return.
utenti in questo momento connessi alla rete di siti web di Giovanni Fraterno: