EVENTI Gli eventi sono delle azioni che possono essere identificate da javascript. 1 - onMouseOver, che viene messo in atto quando l'utente fa scorrere.

Presentazione sul tema: "EVENTI Gli eventi sono delle azioni che possono essere identificate da javascript. 1 - onMouseOver, che viene messo in atto quando l'utente fa scorrere."— Transcript della presentazione:

1 EVENTI Gli eventi sono delle azioni che possono essere identificate da javascript. 1 - onMouseOver, che viene messo in atto quando l'utente fa scorrere il mouse su un oggetto 2 - onLoad, che viene messo in atto appena la pagina è stata completamente caricata. by Iannelli Attilio

2 EVENTI by Iannelli Attilio 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. Gli eventi si usano per due scopi principali:

3 EVENTI by Iannelli Attilio  Per far partire una funzione nel momento in cui l'evento si verifica.  Per mostrare una casella sullo schermo nel momento in cui l'evento si verifica.

4 EVENTI by Iannelli Attilio  Poniamo che si abbia una funzione chiamata controllaEmail() 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.  Supponiamo inoltre che l'utente possa inserire il suo indirizzo email in un form.

5 EVENTI by Iannelli Attilio  L'evento onChange permette di richiamare la funzione ogni volta che l'utente cambia il contenuto del campo.  Esempio : 

6 EVENTI by Iannelli Attilio  Il codice javascript per convalidare ciò che viene inserito in un form consiste in quattro funzioni diverse:  1 - controllaEmail controlla se un valore si accorda alla sintassi generale di un email.  2 - controlloImmissionevalori controlla se un valore è compreso in un certo intervallo.

7 EVENTI by Iannelli Attilio  3 - controlloImmissionenumeri controlla se un valore consiste in un certo numero di caratteri e in un certo tipo di dato.  4 - controlloCampoVuoto controlla se un campo è vuoto oppure no.

8 EVENTI by Iannelli Attilio  La convalida può avvenire nel momento in cui il visitatore introduce dei valori, oppure quando viene cliccato il bottone di invio dopo l'introduzione completa dei valori.  Ogni funzione di convalida può essere facilmente personalizzata allo scopo di corrispondere alle particolarità dei campi che vengono controllati.

9 EVENTI by Iannelli Attilio  La funzione controllaEmail controlla se un valore si accorda alla sintassi generale di una e-mail. Parametri opzionali sono: avviso --testo per la casella di allarme se il contenuto non è corretto.

10 EVENTI by Iannelli Attilio  Tutte le funzioni richiedono this per essere inserite come parametri. Per passare il contenuto di un campo corrente ad una funzione chiamata basta inserire "this" come parametro nella chiamata alla funzione.  L’ ISTRUZIONE THIS.

11 EVENTI by Iannelli Attilio  Il codice HTML è il seguente : E-Mail:

12 EVENTI by Iannelli Attilio …..

13 EVENTI by Iannelli Attilio  Il codice JAVASCRIPT è il seguente : function controllaemail(indirizzo, avviso) { with (indirizzo) { poschiocciola=value.indexOf("@"); pospunto=value.lastIndexOf("."); lunghezzaemail=value.length-1; if (poschiocciola 3 || lunghezzaemail-pospunto<2) {if (avviso!="") {alert(avviso);} return false;} else {return true;} }

14 EVENTI by Iannelli Attilio  L’ ISTRUZIONE WITH. L’istruzione WITH definisce l’oggetto sul quale vado ad applicare le proprietà, infatti se eliminiamo tale istruzione dovrò scrivere : function controllaemail(indirizzo, avviso) { poschiocciola= indirizzo.value.indexOf("@"); pospunto=indirizzo.value.lastIndexOf("."); lunghezzaemail=indirizzo.value.length-1; ……………….. }

15 EVENTI by Iannelli Attilio  La funzione controlloImmissionevalori controlla se un valore è compreso in un certo intervallo. Parametri opzionali sono: min --valore minimo ammesso nel campo. max -- valore massimo ammesso nel campo. avviso --testo per la casella di allarme se il contenuto non è corretto. Tipodidati -- “Interi” se sono ammessi solo i numeri interi.

16 EVENTI by Iannelli Attilio  Il codice HTML è il seguente : VALORI (Min=0 Max=5):

17 EVENTI by Iannelli Attilio …..

18 EVENTI by Iannelli Attilio  Il codice JAVASCRIPT è il seguente : function controlloImmissionevalori(valoreinserito, min, max, avviso, tipodidati) { with (valoreinserito) { verificadati=parseFloat(value); tipodidatiinminuscolo=tipodidati.toLowerCase(); if (tipodidatiinminuscolo.charAt(0)=="i") {verificadati=parseInt(value);} if ((verificadati max) || value!=verificadati) {if (avviso!="") {alert(avviso);} return false; } else {return true;} }

19 EVENTI by Iannelli Attilio  La funzione controlloImmissionenumeri controlla se un valore consiste in un certo numero di caratteri. Parametri opzionali sono: min --numero minimo dei caratteri ammessi nel campo. max --numero massimo dei caratteri ammessi nel field. avviso --testo per la casella di allarme se il contenuto non è corretto. Tipodidati -- "Interi" se sono ammessi solo i numeri interi.

20 EVENTI by Iannelli Attilio  Il codice HTML è il seguente : VALORI (Interi, 3-4 numeri):

21 EVENTI by Iannelli Attilio …..

22 EVENTI by Iannelli Attilio  Il codice JAVASCRIPT è il seguente : function controlloImmissionenumeri(valoreinserito, min, max, avviso, tipodidati) { with (valoreinserito) { verificadati=parseFloat(value); tipodidatiinminuscolo=tipodidati.toLowerCase(); if (tipodidatiinminuscolo.charAt(0)=="i") {value=parseInt(value);} if ((value.length max) || value!=verificadati) {if (avviso!="") {alert(avviso);} return false; } else {return true;} }

23 EVENTI by Iannelli Attilio  La funzione controlloCampoVuoto controlla se il campo è vuoto. Parametri opzionali sono: avviso --testo per la casella di allarme se il contenuto non è corretto.

24 EVENTI by Iannelli Attilio  Il codice HTML è il seguente : Non lasciare questo Campo VUOTO:

25 EVENTI by Iannelli Attilio …..

26 EVENTI by Iannelli Attilio  Il codice JAVASCRIPT è il seguente : function controlloCampoVuoto(valoreinserito, avviso) { with (valoreinserito) { if (value==null || value=="") { alert(avviso); return false; } else return true; }

27 EVENTI by Iannelli Attilio  Gli esempi visti finora utilizzano la tecnica dell’ “onChange”, ora vediamo la tecnica dell’ “onSubmit”. Per far si che il controllo avvenga contemporaneamente per tutti i campi, al momento dell'invio basta aggiungere l’ evento onSubmit al tag.

28 EVENTI by Iannelli Attilio La funzione che controlla l'intero form rimanderà un valore "vero" o "falso". In caso di “vero”, il form verrà inviato – in caso di “falso”, l'invio sarà annullato.

29 EVENTI by Iannelli Attilio  Il codice HTML è il seguente : E-Mail:

30 EVENTI by Iannelli Attilio  Il codice HTML è il seguente : VALORI (Min=0 Max=5):

31 EVENTI by Iannelli Attilio  Il codice HTML è il seguente : VALORI (Interi, 3-4 numeri):

32 EVENTI by Iannelli Attilio  Il codice HTML è il seguente : Non lasciare questo Campo VUOTO:

33 EVENTI by Iannelli Attilio …..

34 EVENTI by Iannelli Attilio  Il codice JAVASCRIPT è il seguente : function controllodelform (questoform) { with (questoform) { if (controllaemail(Email, 'Indirizzo E-Mail non corretto !')==false) {Email.focus(); return false;}; if (controlloImmissionevalori(Valori, 0, 5,'Il Valore Inserito deve essere compreso fra 0 e 5!','Float')==false) {Valori.focus(); return false;}; if (controlloImmissionenumeri(Numeri, 3, 4,'Devi inserire 3 - 4 valori interi','Float') ==false) {Digits.focus(); return false;}; if (controlloCampoVuoto(QualsiasiCosa, 'Il Campo è VUOTO!!')==false) {QualsiasiCosa.focus(); return false;}; }

35 EVENTI by Iannelli Attilio  Riepilogando: E-Mail:

36 EVENTI by Iannelli Attilio  Riepilogando : VALORI (Min=0 Max=5): VALORI (Interi, 3-4 numeri):

37 EVENTI by Iannelli Attilio  Riepilogando : Non lasciare questo Campo VUOTO:

38 EVENTI by Iannelli Attilio  Riepilogando :

39 EVENTI by Iannelli Attilio  Riepilogando : function controllaemail(indirizzo, avviso) { with (indirizzo) { poschiocciola=value.indexOf("@"); pospunto=value.lastIndexOf("."); lunghezzaemail=value.length-1; if (poschiocciola 3 || lunghezzaemail-pospunto<2) {if (avviso!="") {alert(avviso);} return false;} else {return true;} }

40 EVENTI by Iannelli Attilio  Riepilogando : function controlloImmissionevalori(valoreinserito, min, max, avviso, tipodidati) { with (valoreinserito) { verificadati=parseFloat(value); tipodidatiinminuscolo=tipodidati.toLowerCase(); if (tipodidatiinminuscolo.charAt(0)=="i") {verificadati=parseInt(value);} if ((verificadati max) || value!=verificadati) {if (avviso!="") {alert(avviso);} return false; } else {return true;} }

41 EVENTI by Iannelli Attilio  Riepilogando : function controlloImmissionenumeri(valoreinserito, min, max, avviso, tipodidati) { with (valoreinserito) { verificadati=parseFloat(value); tipodidatiinminuscolo=tipodidati.toLowerCase(); if (tipodidatiinminuscolo.charAt(0)=="i") {value=parseInt(value);} if ((value.length max) || value!=verificadati) {if (avviso!="") {alert(avviso);} return false; } else {return true;} }

42 EVENTI by Iannelli Attilio  Riepilogando : function controlloCampoVuoto(valoreinserito, avviso) { with (valoreinserito) { if (value==null || value=="") {if (avviso!="") {alert(avviso);} return false; } else return true; }

43 EVENTI by Iannelli Attilio  Riepilogando : function controllodelform (questoform) { with (questoform) { if (controllaemail(Email, 'Indirizzo E-Mail non corretto !')==false) {Email.focus(); return false;}; if (controlloImmissionevalori(Valori, 0, 5,'Il Valore Inserito deve essere compreso fra 0 e 5!','Int')==false) { Valori.focus(); return false;}; if (controlloImmissionenumeri(Numeri, 3, 4,'Devi inserire 3 - 4 valori interi','Int') ==false) {Numeri.focus(); return false;};

44 EVENTI by Iannelli Attilio  Riepilogando : if (controlloCampoVuoto(QualsiasiCosa, 'Il Campo è VUOTO!!')==false) {QualsiasiCosa.focus(); return false;}; }