EchoEcho.Com
CORSI COMPLETI

HOME CORSI JAVASCRIPT FONDAMENTALI     
EchoEcho.Com
STRUMENTI & RISORSE
 HOME 
 
 CORSI 
 
 RISORSE 
 
 STRUMENTI 
 
 DOCUMENTAZIONE 
 
 MAPPA 
  
  CERCA QUESTO SITO

Suggerisci questo Sito a un Amico
SUGGERISCI QUESTO SITO

JAVASCRIPT FONDAMENTALI

INTRODUZIONE


DOVE INSERIRLO


IL PRIMO PROGRAMMA


LETTERE MAIUSCOLE


POPUP BOXES


VARIABILI


IF & ELSE


FUNZIONI


EVENTI



LOOPS


ARRAYS

Fondamentali JavaScript :
EVENTI

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

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

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

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.

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

La funzione semplicemente alterna due immagini. Un' immagine che mostra il bottone nella posizione "su", e un'altra immagine che mostra il bottone nella posizione "giù".

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

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

EventoSi verifica quandotag 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
onSelect=""Un testo è selezionatotext, textarea
onMouseOver=""Il mouse scorre su un linkA
onMouseOut=""Il mouse scorre al di fuori di un linkA
onClick=""Il mouse clicca su un oggettoA, button, checkbox,
radio, reset, submit
onLoad=""La pagina è completamente caricatabody, frameset
onUnload=""Il browser apre un nuovo documentobody, frameset
onSubmit=""Il bottone di invio viene cliccatoform


Gli eventi si usano per due scopi principali:
  • Per far partire una funzione nel momento in cui l'evento viene decifrato,


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


Ecco una breve descrizione degli scopi principali di ogni evento:




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

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. In più, supponiamo che l'utente possa inserire il suo indirizzo email in un form.

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

<input type="text" size="20" onChange="validateEmail()">;


Clicca qui per saperne di più sui form.
Clicca qui per saperne di più sulla convalida dei form field.




onLoad e onUnload sono usati soprattutto per le caselle che sbucano sullo schermo ("popups") quando il visitatore entra in una pagina o ne esce.
Un altro modo di usarli è in combinazione con i cookie che vanno sistemati all'ingresso o all'uscita delle tue pagine.

Per esempio, potresti avere un popup che domanda al visitatore di inserire il suo nome al suo primo ingresso nella tua pagina. Il nome viene quindi memorizzato in un cookie. In più, quando il visitatore lascia la tua pagina, un cookie memorizza la data corrente.
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".

Clicca qui per imparare a sistemare i cookie.
Clicca qui per saperne di più sulle caselle popup.

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. Questo è un comportamento improprio nel "galateo delle rete", e non viene considerato come corretto web design.





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


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

Alcune volte però, il visitatore può infastidirsi se viene interrotto da convalide mentre inserisce i field in un form. 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.

Questo si può fare usando l'evento onSubmit.


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

Supponiamo anche che tu voglia far partire questa funzione nel momento in cui l'utente clicca sul tasto d'invio.
Se il contenuto non viene accettato dalla tua funzione, questo verrà cancellato. In questo modo verranno inviati soltanto contenuti approvati dalla funzione.

Per ottenere tutto questo devi solo: inserire un evento onSubmit al tag <form> in questo modo:

<form method="yourchoice" action="yourchoice" onsubmit="return checkform()">


La funzione checkform() risponde true (vero), oppure false (falso).
Se risponde true l'invio avrà luogo.
Se risponde false l'invio sarà annullato.

Clicca qui per saperne di più sui forms.
Clicca qui per saperne di più sulla convalida del form.




onMouseOver e onMouseOut sono principalmente impiegate per uno scopo: creare bottoni animati.

Forse avrai notato che quasti eventi possono essere usati soltanto in combinazione con il tag di link <a>.

In ogni caso, gli eventi sono in genere più efficaci se abbinati al tag di immagine <img>. Il trucco per far funzionare un evento su un'immagine consiste in trasformare l'immagine in un link. (Se l'immagine non deve funzionare realmente come un link, si può sempre puntare il link su un'ancora vuota, come si vede nell'esempio qui sotto).

Esempio: una casella di allarme appare quando l'evento onMouseOver viene rilevato su un'immagine:



Ecco l'HTML per questo esempio:

<a href="#" onMouseOver="alert('Ho rivelato un evento onMouseOver'); return false" onMouseOut="alert('Ho rilevato un evento onMouseOut'); return false">
<img src="rainbow.gif" width="60" height="60">
</a>


Nota: Il comando href="#" crea un link inesistente. Se davvero volessi creare un link, dovresti invece inserire l'indirizzo della pagina tra le virgolette.

Clicca qui per saperne di più sui link e le ancore.
Clicca qui per saperne di più sulle caselle di allarme.



<< PRECEDENTE
CONTINUA >>

JAVASCRIPT MENU

JAVASCRIPT FONDAMENTALI


BOTTONI ANIMATI


RIVELAZIONE DEL BROWSER


COOKIES


POPUP WINDOWS


MENU' A DISCESA


CONVALIDA DEL FORM


PROGRAMMA FRAMESET


LINK MULTIPLA




EchoEcho.Com
CORSI COMPLETI
 HOME 
 
 CORSI 
 
 RISORSE 
 
 STRUMENTI 
 
 DOCUMENTAZIONE 
 
 MAPPA 
EchoEcho.Com
STRUMENTI & RISORSE

(c) Copyright 1998-1999 NetKontoret - All Rights Reserved