Fino a questo articolo abbiamo visto degli esempi che di fatto non sono riutilizzabili poiché legati al caricamento della pagina. Infatti questo viene eseguito “dall’alto verso il basso” e terminata la sua esecuzione fintanto ché non viene ricaricata la pagina. Per ovviare a questa grossa limitazione ci si può avvalere delle Funzioni. In Javascript sono dei piccoli pacchetti di codice che attendono di essere richiamati. Una prima funzione in realtà l’abbiamo già vista in molti esempi ed è la funzione [textmarker color=”CFCFCF”]alert(“questo è un messaggio”)[/textmarker] che scatena una finestra in pop-up con un messaggio quando è caricata una pagina. Una evoluzione la potremo fare dichiarando alert appunto in una nostra funzione, che poi però potremo richiamare in altro modo, ad esempio con un pulsante.
function nuovaPopup() {
window.alert ("questo è un messaggio");
}In questo caso la parola riservata function permette di dichiarare una nuova funzione chiamata nuovaPopup, il cui codice racchiuso nelle parentesi graffe è il classico alert. La parte di azione del pulsante la vedremo più avanti nel capitolo degli eventi. Per attivare quindi questo codice sarà sufficiente richiamare nel codice HTML [textmarker color=”CFCFCF”]nuovaPopup();[/textmarker] per vedersi attivare la box a comando e non al caricamento della pagina. Se fate caso le parentesi tonde servono per comprendere che quella che stiamo richiamando è una funzione, ma all’interno delle parentesi potremo dichiarare argomenti o parametri.
Se in fase di creazione di una funzione indichiamo argomenti all’interno delle parentesi tonde, queste divveranno automaticamente delle variabili, anche se non dichiarate in precedenza. Ovviamente senza nessun valore. Infatti questo verrà fissato al momento di richiamare la funzione stessa. Vediamo un esempio pratico che chiarisce le cose.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Test di Tosolini.info</title>
<meta name="" content="">
<script type="text/javascript">
function animali(cane, gatto) {
window.alert( "il mio cane si chiama " + cane + " mentre il gatto si chiama " + gatto);
}
</script>
</head>
<body>
<script type="text/javascript">
animali("Lola", "Sissi");
</script>
</body>
</html>Per comprendere meglio la situazione abbiamo incluso il codice dell’intero file HTML. Si vede chiaramente come le variabili cane e gatto siano state date i valori Bau e Miao in fase di richiamo della funzione stessa.
Capirete che questo sistema apre decisamente il ventaglio delle opzioni, poiché abbiamo creato due variabili senza saperne i valori, e solo in seguito questi sono stati dichiarati.
Array Arguments
Quanto visto sopra può essere in qualche modo evoluto, nella gestione delle variabili – valori, attraverso un array generato in automatico tramite la parola riservata arguments.
function animali () {
var cane = arguments[0];
var gatto = arguments[1];
}Anche se non dichiariamo nessun argomento nella funzione, le parentesi come vedete sono vuote, nel momento che andremo a richiamare la funzione gli argomenti saranno comunque utilizzabili attraverso l’Array. Lo scopo di questo sistema è utile quando si stanno scrivendo funzioni con un numero indefinito di argomenti.
Conclusioni
La funzione permette di creare parti di codice e richiamarle all’occorrenza, in seguiti vedremo meglio come. Il prossimo articolo verte sull’istruzione Return.
