Abbiamo già utilizzato il concetto di funzione (function) in JS come contenitore di codice che deve essere eseguito in risposta a un evento.
In realtà le funzioni hanno usi e scopi ben più vasti all'interno dei linguaggi di programmazione. Le funzioni (dette talvolta anche subroutine o sottoprogrammi) sono in sostanza porzioni di codice (piccoli programmi) dotate di un nome. Disponendo di una funzione per svolgere un determinato compito è possibile, ogni volta che è richiesta quella azione, semplicemente richiamare la funzione, senza dover riscrivere daccapo tutto il codice.
Consideriamo per esempio il seguente programma in cui, facendo click sul pulsante SFONDO viene cambiato il colore dello sfondo della pagina:
<head> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> <title> Funzione che cambia lo sfondo del body</title> <script type="text/JavaScript"> var ind=1; function cambia() { if (ind%2) { document.getElementById("corpo").style.backgroundColor= "beige" ; } else { document.getElementById("corpo").style.backgroundColor= "white"; } ind= ind + 1; } </script> </head> <body id="corpo">
<h1> SEMPLICE ESEMPIO DI PULSANTE CHE CAMBIA IL COLORE DELLO SFONDO </h1>
<form action=""> <p> <input type="button" value="CAMBIA" onClick="cambia()"> </p> </form> </body>
Il lettore può verificare da solo il funzionamento del codice precedente cliccando sul bottone qui sotto:
In realtà le funzioni consentono di fare molto di più, poiché una funzione può essere usata non solo all'interno di un gestore di eventi (come onclick o onmouseover, come negli esempi precedenti), ma anche dentro il codice di un'altra funzione (o all'interno di qualsiasi script presente nella pagina).
Facciamo un altro semplice esempio. Supponiamo di voler cambiare il colore dello sfondo anche durante il fine settimana (sabato e domenica). A tale scopo aggiungiamo alla nostra pagina una nuova funzione settimana(), chiamata dall'evento onLoad sull'elemento body, come mostrato qui sotto:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title> Funzione che cambia lo sfondo del body</title>
<script type="text/JavaScript">
var ind=1; function cambia() { if (ind%2) { document.getElementById("corpo").style.backgroundColor= "beige" ; } else { document.getElementById("corpo").style.backgroundColor= "white"; } ind= ind + 1; }
function settimana() { var giorno = new Date;
if (giorno.getDay()==0 || giorno.getDay()==6) cambia();
} </script> </head>
<body id="corpo" onload="settimana()"> <h1 onmouseover="cambia()"> SEMPLICE ESEMPIO DI PULSANTE CHE CAMBIA IL COLORE DELLO SFONDO </h1> <form action=""> <p> <input type="button" value="CAMBIA" onClick="cambia()"> </p> </form>
</body>
Non ci si preoccupi al momento dei dettagli del funzionamento. Il valore di giorno.getDay() è 0 per la domenica, 1 per il lunedì e così via fino a 6 per il sabato (secondo la numerazione anglosassone dei giorni della settimana).
Ciò che interessa qui osservare è che la funzione cambia() viene usata anche all'interno della funzione settimana(), per evitare di dover riscrivere il codice del cambiamento di colore. Tutto questo è particolarmente comodo quando si vuole riutilizzare codice scritto da altri, ma per vedere tutto questo dobbiamo affrontare prima l'argomento parametri e valore di ritorno di una funzione.
Notiamo di passaggio che per i nomi delle funzioni valgono le stesse regole viste a suo tempo per i nomi delle variabili.
Sito realizzato in base al template offerto da
http://www.graphixmania.it