Funzioni JavaScript

La pratica di dividere un programma in sottoprogrammi ciascuno dei quali con un compito specifico, viene applicata anche nel linguaggio JavaScript. Finora si è visto che uno scritto JS può essere inserito in qualsiasi punto della parte <body> di una pagina HTML in modo che in browser esegua le sue istruzioni nel momento stesso in cui le legge.
Questa lettura avviene, come si può immaginare, in modo sequenziale.

Prima il browser deve leggere ed impostare le direttive della parte <head> poi deve leggere i tag HTML del <body> per rappresentare il contenuto della pagina e se durante questa lettura incontra una sezione <script> dove sono contenute delle istruzioni JS, il browser le deve eseguire. In pratica, quando il browser incontra uno scritto JS, lo esegue.
Questa organizzazione di cose, non sempre è adatta alle esigenze che possono esistere. La prassi più usuale prevede l'utilizzo di funzioni dichiarate all'inizio della pagina (nella sezione <head>) che possano essere richiamate nel corpo della pagina in risposta al verificarsi di un particolare evento.

Le funzioni in JavaScript sono definite dalla parola chiave function, seguita dal nome della funzione, indicando tra parentesi tonde i parametri formali di ingresso. Le istruzioni della function sono raggruppate all'interno di una coppia di parentesi graffe secondo la seguente sintassi.

function nomeFunzione(parametri) {
/* istruzioni */
}

La forma è abbastanza simile al caso già visto delle funzioni C e dei metodi Java; quello che si omette è la dichiarazione del tipo di dato restituito, ma questo ce lo si poteva aspettare perchè abbiamo già visto che JS non esegue un forte controllo sui tipi.

La definizione di una funzione non corrisponde alla sua esecuzione : per richiederne l'esecuzione, occorre invocarla (chiamarla) specificando il nome e gli eventuali parametri.

Una funzione che può essere eseguita al caricamento della pagina, potrebbe essere scritta nel seguente modo:

come si vede le funzioni possono anche restituire un valore; per far questo si usa l'istruzione return seguita da un valore o da una variabile. Nello specifico è stata dapprima dichiarata una funzione somma che esegue l'addizione tra i parametri op1 ed op2 e restituisce il risultato con il comando return. Il valore di ritorno della funzione somma viene assegnato alla variabile risultato e viene stampato nella pagina nel punto in cui è stato scritto il codice dell'invocazione della funzione.

Una funzione può avere più parametri o anche nessuno, come si vede nel seguente esempio

dove in uscita (id=R) viene inviato dapprima la potenza di un numero attraverso la funzione quad(a) dotata di un parametro e successivamente una stringa di avviso attraverso la funzione post() che non ha parametri. In quest'ultimo caso si può osservare un secondo modo per definire una funzione, che consiste nel dichiararla come se fosse una variabile: .

In JavaScript, le funzioni possono essere chiamate prima ancora di essere dichiarate, diversamente dal linguaggio C, dove invece, si deve far ricorso ai prototipi di funzioni.

Ma anche in questo caso, appena visto è necessario, effettuare la chiamata alla funzione.

In JavaScript una funzione può anche essere autochiamante:

Visibilità delle variabili

I parametri delle funzioni sono a tutti gli effetti delle variabili, ma i loro valori iniziali vengono assegnati all' invocazione della funzione e non dal codice della stessa.
I parametri della funzione sono, quindi, da considerare come delle variabili dichiarate all'interno della funzione, in entrambi i casi si tratta di variabili locali che possono essere riconosciute solo all'interno della funzione considerata.
La proprietà delle variabili di essere locali si applica solo ai parametri e alle variabili dichiarate attraverso la parola chiave var all'interno del corpo della funzione.

Le variabili dichiarate al di fuori delle funzioni sono chiamate variabili globali. perchè sono disponibili per tutto il proramma.
E' possibile accedere alle variabili globali anche all'interno di una funzione a condizione che nella funzione non vi sia una variabile locale con lo stesso nome.

Nel codice soprascritto si definiscono e si richiamano due funzioni, ciascuna delle quali assegna un valore alla variabile x. La prima uno() dichiara la variabile come locale e modifica pertanto solo il valore della variabile locale. La seconda due() non dichiara x come variabile locale. Senza la parola chiave var può essere solo:
• la dichiarazione di una variabile globale, se la variabile non esisteva prima
• oppure è un nuovo assegnamento se la variabile esiste già.

L'esecuzione di una funzione può essere richiesta anche utilizzando un gestore di eventi come un pulsante di azione:

Il pulsante di azione, oltre ai suoi attributi type e value contiene il gestore di eventi onclick; quando si preme sul pulsante il gestore viene attivato ed invoca la funzione somma, inviandogli anche i parametri.
L'output viene gestito direttamente all'interno della funzione che non ritornando alcun valore, deve essere priva dell'istruzione return.
Il risultato dell'operazione viene inviato ad un punto di uscita che noi abbiamo predisposto attraverso l'identificatore id=R all'interno di un tag <p></p> .

Una funzione può anche essere definita all'interno della parte intestativa <head>:

Come in altri linguaggi, le funzioni in JavaScript sono usate per riutilizzare il codice: definire il codice una sola volta e utilizzarlo più volte.

Input

Come si è visto, è possibile gestire l'output in vari modi: attraverso la console oppure tramite il browser, indirizzando i risultati verso punti specifici della pagina web facendo uso degli identificatori id di eventuali tag HTML.
Quest'ordine di cose, ricorda in qualche modo gli elementi che possono essere posizionati in un form Visual Basic, con i tag dotati di id che possono essere associati alle label (etichette) ed i pulsanti caratterizzati dalla sintassi

che possono essere associati ai "command button" o pulsanti di azione; ci aspettiamo, dunque, di trovare anche delle caselle di testo, che ci sono e possono essere ottenute attraverso istruzioni come:

Nel seguente codice si ha una pagina HTML che accetta in una casella di testo il nome di una persona; una volta introdotto il nome bisogna premere il pulsante di azione e la pagina manda in risposta un messaggio di saluto.

Notiamo come per accedere al contenuto dei tag HTML si deve usare la proprietà .innerHTML, mentre per accedere al contenuto delle caselle di testo deve essere usata la proprietà .value.

Bisogna sottolineare come in tutti i linguaggi di programmazione, l'input prelevato da una casella di testo sia sempre considerato (in prima battuta) una generica stringa di testo. Se si vogliono usare dei valori numerici, è necessario convertire la stringa acquisita in un numero; per questo scopo, è consigliabile usare un controllo di input di tipo number predisposto all'acquisizione esclusivamente di valori numerici.

Nel precedente listato la casella di testo acquisisce un numero che poi viene passato alla fuzione quad() che stampa in uscita il valore del quadrato di quel numero.
La funzione parseInt() ha il solo compito di assicurarsi di trasformare il numero introdotto in un numero intero.
Se avessimo voluto considerare un generico numero reale (con la virgola) sarebbe stato consigliabile usare la funzione parseFloat().
Questi accorgimenti correggono in automatico la differenza "comma" separatore dei decimali che per noi è la virgola mentre per gli standard anglosassoni è il punto.
L'eventuale introduzione di un valore alfanumerico genera un segnale NaN (Not a Number) e questa è una eventualità che va prevenuta; poi vedremo come.