Funzioni. La sintassi generale di una funzione è:

Presentazione sul tema: "Funzioni. La sintassi generale di una funzione è:"— Transcript della presentazione:

1 Funzioni

2 La sintassi generale di una funzione è:

3 function functionname(variable1, variable2,..., variableX) { // Qui vanno le righe di javascript per la funzione }

4 I caratteri { e } indicano l'inizio e la fine della funzione.

5 Un tipico errore nell'inserimento delle funzioni javascript consiste nel tralasciare l'importanza delle lettere maiuscole.

6 La parola function si deve scrivere esattamente function. Function oppure FUNCTION sono considerati errati.

7 Oltretutto, l'uso delle maiuscole è importante anche nel nome della funzione.

8 Se si ha una funzione chiamata myfunction(), sarebbe un errore riferirsi ad essa come Myfunction(), MYFUNCTION() oppure MyFunction().

9 EVENTI

10 Gli eventi sono delle azioni che possono essere identificate da javascript.

11 Un esempio potrebbe essere l'evento onMouseOver, che viene messo in atto quando l'utente fa scorrere il mouse su un oggetto.

12 Un altro evento è onLoad, che viene messo in atto appena la pagina è stata completamente caricata.

13 Normalmente gli eventi sono usati in combinazione con le funzioni, in modo che la funzione possa partire solo al momento in cui si verifica l'evento.

14 Un esempio è la funzione in grado di animare un bottoneanimare un bottone.

15 La funzione semplicemente alterna due immagini.

16 Un' immagine che mostra il bottone nella posizione "su", e un'altra immagine che mostra il bottone nella posizione "giù".

17 Se questa funzione viene richiamata usando l'evento onMouseOver, si vedrà il bottone premuto quando il mouse scorrerà sull'immagine del bottone stesso.

18 Ecco una lista dei più importanti eventi riconosciuti da javascript:

19 EventoSi verifica quando tag HTML onFocus=""Il form field è messo a fuocoselect, text, textarea onBlur=""Il form field perde fuocoselect, text, textarea onChange=""Il contenuto di un field cambiaselect, text, textarea

20 onSelect=""Un testo è selezionatotext, textarea onMouseOver=" " Il mouse scorre su un linkA onMouseOut="" Il mouse scorre al di fuori di un link A onClick="" Il mouse clicca su un oggetto A, button, checkbox, radio, reset, submit

21 onLoad=""La pagina è completamente caricatabody, frameset onUnload=""Il browser apre un nuovo documento body, frameset onSubmit=""Il bottone di invio viene cliccatoform

22 Gli eventi si usano per due scopi principali:

23 Per far partire una funzione nel momento in cui l'evento viene decifrato

24 Per mostrare una casella sullo schermo nel momento in cui l'evento viene decifrato

25 Ecco una breve descrizione degli scopi principali di ogni evento:

26 onFocus, onBlur e onChange vengono usati soprattutto in combinazione con la convalida dei form field.

27 Poniamo che tu abbia una funzione chiamata validateEmail() con il compito di verificare se un indirizzo email inserito possiede il simbolo @, e se in coda ha una sigla riconoscibile, come "com", "net", ecc.

28 . In più, supponiamo che l'utente possa inserire il suo indirizzo email in un form.

29 Dovresti allora usare l'evento onChange per richiamare la funzione ogni volta che l'utente cambia il contenuto del field:

30 ;

31

32 onLoad e onUnload sono usati soprattutto per le caselle che sbucano sullo schermo ("popups") quando il visitatore entra in una pagina o ne esce.

33 Un altro modo di usarli è in combinazione con i cookie che vanno sistemati all'ingresso o all'uscita delle tue pagine.

34 Per esempio, potresti avere un popup che domanda al visitatore di inserire il suo nome al suo primo ingresso nella tua pagina.

35 Il nome viene quindi memorizzato in un cookie.

36 . In più, quando il visitatore lascia la tua pagina, un cookie memorizza la data corrente.

37 La volta successiva che il visitatore arriverà nella tua pagina, ci sarà un altro popup che dirà una cosa del genere: "Benvenuto, Bill Clinton, questa pagina non è stata aggiornata dalla tua ultima visita 8 giorni fa".

38

39 Un altro uso comune degli eventi onLoad e onUnload è per la creazione di pagine che hanno la funzione assai irritante di aprire immediatamente un sacco di altre finestre appena si entra nella pagina.

40 Questo è un comportamento improprio nel "galateo delle rete", e non viene considerato come corretto web design.

41 onSubmit viene usato per uno scopo principale: convalidare tutti i field all'interno di un form prima di inviarlo realmente.

42 Nell'esempio che abbiamo riportato per onChange, abbiamo mostrato come si fa a convalidare un singolo form field.

43 Alcune volte però, il visitatore può infastidirsi se viene interrotto da convalide mentre inserisce i field in un form.

44 Piuttosto che aspettare la convalida per ogni singolo input, potresti scegliere di far approvare il form nel momento in cui viene cliccato il tasto dell'invio.

45 Questo si può fare usando l'evento onSubmit

46 Supponiamo che tu costruisca una funzione chiamata checkform() in grado di convalidare le entrate in un form.

47 Supponiamo anche che tu voglia far partire questa funzione nel momento in cui l'utente clicca sul tasto d'invio.

48 Se il contenuto non viene accettato dalla tua funzione, questo verrà cancellato

49 . In questo modo verranno inviati soltanto contenuti approvati dalla funzione.

50 Per ottenere tutto questo devi solo: inserire un evento onSubmit al tag in questo modo:

51

52 La funzione checkform() risponde true (vero), oppure false (falso).

53 Se risponde true l'invio avrà luogo.

54 Se risponde false l'invio sarà annullato.