Funzioni personalizzate in Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

L'elemento chiave di un programma, in questo caso di un programma javascript, è la funzione.

Una funzione raccoglie in se tutte le istruzioni che compongono un programma o una parte di esso e, al verificarsi di un evento, ad esempio il click del mouse su di un link che la richiama, il programma stesso viene eseguito.

La sintassi per creare una funzione è la seguente:

<script language="javascript">
 <!--
  function Esempio() {
     //Istruzioni
  }
 //-->
</script>
Utilizziamo la parola chiave function, assegniamo un nome alla funzione, in questo caso Esempio() e, come si può constatare, utilizziamo le parentesi tonde aperte e chiuse per terminare il nome della stessa, questo per due motivi:

1 la sintassi lo richiede
2 se ci trovassimo di fronte alla necessità di "passare" dei parametri alla funzione, nello stesso modo in cui ci comportiamo con i metodi visti nella lezione precedente.

Il contenuto di una funzione, ovvero le istruzioni che compongono il programma, vengono racchiuse tra parentesi graffe { e }.

E' buona norma aprire e chiudere le parentesi graffe e poi mandare quella chiusa a capo e scriverci in mezzo il programma, questo perchè spesso errori che ci vengono segnalati sono frutto di banali disattenzioni come la dimenticanza di una parentesi.

E' importante non dare alle funzioni nomi che indicano parole chiave utilizzate da javascript, ad esempio non è possibile utilizzare write() come nome di una funzione.

Come abbiamo visto in precedenza, write() è un metodo dell'oggetto document, creando una funzione con questo nome, o con altre parole chiave, ci verrà dato un errore.

E' tuttavia possibile utilizzare il nome Write() oppure WRITE(), dato che javascript è un linguaggio case-sensitive, ovvero riconosce differenze tra parole o lettere scritte in maiuscolo o minuscolo: in questo modo l'interprete non riconoscerà la funzione Write() come nome di un metodo, ma come parola estranea a javascript e la considererà valida.

Le parola chiave che non possono essere usate saranno chiare con una completa lettura del manuale.

Richiamo di funzioni negli eventi

In virtù di quanto appena appreso, vediamo come richiamare una funzione in un evento, ad esempio l'evento onClick (click del mouse col tasto sinistro su di un elemento Html).

Come sempre la pratica ci viene in soccorso, utilizzeremo il metodo alert() (restituisce un messaggio in una finestra, fa parte dell'oggetto window) per creare una funzione che lo richiami al verificarsi dell'evento click su di un elemento Html:
<script language="javascript">
 <!--
  function Esempio() {
     alert("Ciao Mondo!");
  }
 //-->
</script>

<!-- Codice Html -->

<p onClick="Esempio()">Cliccami</p>

<!-- oppure in un link -->

<p><a href="javascript:Esempio()">Cliccami</a></p>
Se avessimo richiamato nell'evento la funzione ESEMPIO() dichiarandola come Esempio() ci sarebbe stato restituito un errore.

Parametri nelle funzioni

Un parametro è in genere un valore soggetto a variazioni, ad esempio una stringa di testo, vediamo il codice per creare una funzione con queste caratteristiche:
<script language="javascript">
 <!--
  function Esempio(testo) {
     alert(testo);
  }
 //-->
</script>

<p><a href="javascript:Esempio('Ciao Mondo!')">Cliccami</a></p>
Il vantaggio che traiamo da una funzione del genere è che possiamo richiamare la stessa funzione in diverse fasi del programma, adattandola nella maniera più semplice alle parti della pagina che se ne dovranno servire.

Questa panoramica sulle funzioni verrà ripresa in seguito dopo la spiegazione di altri elementi javascript.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD