Le funzioni sono un comodo contenitore in cui racchiudere il codice. Anziché "sporcare la pagina" mischiando codice HTML e linguaggio JavaScript, è sufficiente inserire il codice in una funzione e richiamare la funzione quando occorre.
La sintassi necessaria per creare una funzione è questa:
function nomeFunzione() {
// qui il nostro codice
}
Insomma tutto il codice da noi elaborato deve essere contenuto all'interno delle parentesi graffe, che delimitano l'inizio e la chiusura della funzione (Con Windows per digitare le parentesi graffe comporre la combinazione di tasti: AltGr+Shift+parentesi quadre. Lo "Shift" è il tasto con la freccia necessario per scrivere le maiuscole, da non confondere con il "Caps Lock").
La funzione che abbiamo appena creato si richiama poi con:
nomeFunzione();
da inserire nell'elemento <script>, all'interno dell'head, nel corpo della pagina, oppure all'interno di un elemento, da richiamare tramite un evento. Con questo codice non facciamo che richiamare il gruppo di istruzioni contenuti all'interno della funzione.
Per mantenere poi ordine all'interno della pagina, dobbiamo inserire tutte le nostre funzioni all'interno della HEAD del documento, e richiamarle nella stessa HEAD o nel BODY (come detto - facendovi riferimento tramite un evento oppure inserendole nel punto esatto in cui ci serve richiamarle).
Vediamo un semplice esempio, per afferrare subito il concetto. Da inserire nel tag <script>:
function saluta() {
alert ("ciao");
}
saluta();
C'è una particolarità da notare che finora non abbiamo ancora espresso con chiarezza, ma che dovrebbe essere emersa dai numerosi esempi presentati: ogni istruzione JavaScript deve essere conclusa con un punto e virgola.
Se rielaboriamo alcuni degli esempi, esaminati nelle pagine precedenti, tramite l'utilizzo delle funzioni otteniamo una sintassi molto più "pulita":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Corso JavaScript ad esempi</title> <script type="text/javascript"> /* prima funzione */ function saluta() { alert("ciao"); } /* seconda funzione */ function apriFinestra() { /* creo una variabile contenente la larghezza della finestra */ larghFinestra=500; /* creo una variabile contenente l'altezza della finestra */ altezFinestra=500; /* creo una variabile e mi ricavo il valore della * posizione della finestra a sinistra dello schermo */ sinistra=screen.width-larghFinestra+20; /* creo una variabile e mi ricavo il valore della * posizione della finestra dall'alto dello schermo */ alto=(screen.height-larghFinestra)/2; window.open("http://www.html.it","", "left="+sinistra+",top="+alto+", width="+larghFinestra+", height="+altezFinestra+", menubar, toolbar"); } /* terza funzione */ 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 per ricevere un saluto</a> <br/><br/> <script type="text/javascript"> scriviRisoluzione(); </script> </body> </html>
Nell'esempio che abbiamo esaminato or ora sono presenti tre funzioni, due delle quali vengono richiamate attraverso l'utilizzo di eventi, mentre la terza viene richiamata all'interno della pagina.
Da notare inoltre che l'evento "onLoad" viene eseguito subito dopo il completamento della pagina, dunque una funzione richiamata all'interno del BODY della pagina verrà "lanciata" prima della funzione richiamata dall'evento onLoad. Nel nostro esempio la funzione "scriviRisoluzione()" viene lanciata prima della funzione "aprifinestra()".
È evidente che tramite un utilizzo oculato di funzioni ed eventi è possibile creare delle pagine molto ordinate, con il codice JavaScript suddiviso in molteplici parti, "azionato" soltanto quando richiamato.
Nota a margine
In realtà è possibile specificare che la funzione deve essere richiamata da un determinato evento direttamente dal codice JavaScript.
Il codice è questo (da inserire nell' <head>):
<script type="text/javascript">
function saluta() {
alert("ciao");
}
// assegnamo il gestore saluta all'evento onload
document.onload = saluta();
// la funzione viene lanciata non appena il documento è caricato
// notare che "onload" è scritto tutto minuscolo
</script>
Come si vede nell'esempio il collegamento tra l'evento "onload" e la funzione "saluta" viene creato dalla stessa sintassi JavaScript, anziché essere specificato nel codice HTML.
