PROGRAMMIAMO
JS - A cosa servono le funzioni
Uso delle funzioni e "riciclaggio" del codice

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:

Si osservi l'uso della variabile ind (che all'inizio vale 1) e della condizione ind%2, che verifica se il resto della divisione per due è diverso da zero, cioè in pratica verifica se ind è dispari (avremmo potuto scrivere anche ind%2==1 oppure ind%2!=0: abbiamo qui usato la notazione abbreviata per cui qualsiasi valore diverso da zero in JS viene interpretato come true). In sostanza se ind è dispari il colore dello sfondo diventa beige, se ind è pari diventa bianco (white). Siccome cliccando sul bottone ogni volta viene incrementato il valore di ind, di conseguenza il colore di sfondo cambia ad ogni click alternativamente da bianco a beige.

Supponiamo ora di voler cambiare il colore dello sfondo anche quando il mouse passa sopra l'intestazione h1. Ovviamente non abbiamo bisogno di scrivere un'altra funzione, ma basta semplicemente aggiungere un nuovo evento onmouseover sul tag h1 usando sempre la funzione cambia():

<h1 onmouseover="cambia()"> SEMPLICE ESEMPIO DI PULSANTE CHE CAMBIA IL COLORE DELLO SFONDO </h1>

Questo semplicissimo esempio illustra lo scopo principale delle funzioni nella scrittura di programmi: esse consentono di evitare di riscrivere più volte lo stesso codice, permettendoci, in sostanza, di "riciclare" il codice già scritto. Questo è particolarmente importante in programmi lunghi e complessi.

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.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it