EVENTS. INTERACTUAR AMB LA NOSTRE WEB
Es diu de JavaScript que és un llenguatge de programació orientat a events.
Però, què és un event? Un event és qualsevol cosa que passa en el l'àmbit
d'acció del programa.
Per exemple, cada cop que fem un clic amb el ratolí , passem el ratolí per sobre
d'un objecte, canviem la grandària d'una finestra, es tanca una finestra, etc.
s'està provocant un event. La majoria dels events que es produeixen no tenen cap
interès en el funcionament del programa i són ignorats.
Però, en algunes situacions ens pot interessar que el programa faci algunes
accions específiques quan es produeix un determinat event. En aquests casos, hem
de detectar-lo i fer que el programa actuï en conseqüència.
La següent llista ens mostra algun dels events més habituals :
blur.- es produeix quan un element de formulari perd el focus, per
exemple, quan es fa clic a un altre lloc diferent d'aquest element.
click.- es produeix quan es fa un clic amb el ratolí a sobre d'un element.
change.- es produeix quan l'usuari canvia el valor d'un camp de formulari.
focus.- es produeix quan un element rep el focus.
load.- es produeix quan es carrega una pàgina en el navegador.
mouseover.- es produeix quan l'usuari mou el cursor per sobre d'un vincle
d'hipertext.
submit.- es produeix quan es fa clic a sobre del botó per a enviar les
dades d'un formulari.
unload.- es produeix quan l'usuari abandona una pàgina.
etc.
Per detectar un event s'utilitza els controladors d'events, aquests
elements de programa tenen una estructura com la següent:
onXXXX = codi d'accions a realitzar;
Les lletres XXXX indiquen el tipus d'event a detectar i el codi indicat a
l'esquerra de símbol = serà l'acció a realitzar quan es produeixi aquest event.
Els controladors d'event corresponents als events indicats anteriorment són els
següents.
onBlur, onClick, onChange, onFocus, onLoad, onMouseOver, onSubmit i
onUnLoad
Aquests controladors s'apliquen dins les directives HTML que els poden suportar
amb l'estructura indicada prèviament.
S'ha de tenir en compte que si un element de codi HTML que incorpora un
controlador d'event està inclòs dins una altre element que també incorpora un
altre controlador d'event, l'element inclòs heretarà també l'event de l'element
que l'inclou. A aquest efecte se l'anomena bombolleig d'events.
Si el codi que ha d'executar un controlador d'events és molt extens, no
s'acostuma a incloure a la dreta del signe = . Habitualment, se sol definir una
funció que inclou tot el codi que ha d'executar l'event i solament s'assigna el
nom de la funció al controlador d'events. En els apartats següents es pot veure
com es treballa amb funcions i events.
El següent exemple ens mostra com són utilitzats alguns dels events indicats
prèviament. L'efecte que produeix la detecció de cada event és molt simple: ens
traurà un missatge d'alerta quan l'event sigui detectat. El codi a executar serà
el mètode "alert" ubicat després del signe =.
Podem observar com dins la directiva <body> hi ha situats els events onLoad i
onUnload.
<body ..... onLoad="alert('S\'ha carregat la
pàgina.');" onUnload="alert('Adéu.');">
Aquests events mostraran un missatge quan es carregui la pàgina i quan es
descarregui.
Dins la primera fila de la taula hi ha definits dos events, l'un dins de <td> i
l'altre dins de <p>, com que <p> està inclòs dins de <td> es produeix un efecte
de bombolleig d'events al fer un clic a sobre del text "Text 1", per tant,
es mostraran dos missatges d'alerta.
<tr ... ><td ... onClick="alert('Bombolleig d\'events.');">
<p onClick="alert('Has fet un clic a sobre de Text 1.');">Text
1.</p></td></tr>
A la segona fila de la taula s'hi aplica el controlador d'event onMouseover, per
tant, cada cop que passem el ratolí per sobre se'ns mostrarà el corresponent
missatge d'alerta.
<p onMouseOver="alert('Has passat el ratolí per
sobre de Text 2.');">Text 2.</p>
Dins el formulari, s'apliquen quatre controladors d'events, el primer és
onSubmit, que s'activarà quan fem clic a sobre el botó "Clica'm". L'event
onChange el podrem observar cada cop que canviï el contingut del "Quadre 1"
i l'event onBlur, s'activarà cada cop que el "Quadre 2" perdi el focus.
Es diu de JavaScript que és un llenguatge de programació orientat a events.
Però, què és un event? Un event és qualsevol cosa que passa en el l'àmbit
d'acció del programa.
Per exemple, cada cop que fem un clic amb el ratolí , passem el ratolí per sobre
d'un objecte, canviem la grandària d'una finestra, es tanca una finestra, etc.
s'està provocant un event. La majoria dels events que es produeixen no tenen cap
interès en el funcionament del programa i són ignorats.
Però, en algunes situacions ens pot interessar que el programa faci algunes
accions específiques quan es produeix un determinat event. En aquests casos, hem
de detectar-lo i fer que el programa actuï en conseqüència.
La següent llista ens mostra algun dels events més habituals :
blur.- es produeix quan un element de formulari perd el focus, per
exemple, quan es fa clic a un altre lloc diferent d'aquest element.
click.- es produeix quan es fa un clic amb el ratolí a sobre d'un element.
change.- es produeix quan l'usuari canvia el valor d'un camp de formulari.
focus.- es produeix quan un element rep el focus.
load.- es produeix quan es carrega una pàgina en el navegador.
mouseover.- es produeix quan l'usuari mou el cursor per sobre d'un vincle
d'hipertext.
submit.- es produeix quan es fa clic a sobre del botó per a enviar les
dades d'un formulari.
unload.- es produeix quan l'usuari abandona una pàgina.
etc.
Per detectar un event s'utilitza els controladors d'events, aquests
elements de programa tenen una estructura com la següent:
onXXXX = codi d'accions a realitzar;
Les lletres XXXX indiquen el tipus d'event a detectar i el codi indicat a
l'esquerra de símbol = serà l'acció a realitzar quan es produeixi aquest event.
Els controladors d'event corresponents als events indicats anteriorment són els
següents.
onBlur, onClick, onChange, onFocus, onLoad, onMouseOver, onSubmit i
onUnLoad
Aquests controladors s'apliquen dins les directives HTML que els poden suportar
amb l'estructura indicada prèviament.
S'ha de tenir en compte que si un element de codi HTML que incorpora un
controlador d'event està inclòs dins una altre element que també incorpora un
altre controlador d'event, l'element inclòs heretarà també l'event de l'element
que l'inclou. A aquest efecte se l'anomena bombolleig d'events.
Si el codi que ha d'executar un controlador d'events és molt extens, no
s'acostuma a incloure a la dreta del signe = . Habitualment, se sol definir una
funció que inclou tot el codi que ha d'executar l'event i solament s'assigna el
nom de la funció al controlador d'events. En els apartats següents es pot veure
com es treballa amb funcions i events.
El següent exemple ens mostra com són utilitzats alguns dels events indicats
prèviament. L'efecte que produeix la detecció de cada event és molt simple: ens
traurà un missatge d'alerta quan l'event sigui detectat. El codi a executar serà
el mètode "alert" ubicat després del signe =.
Podem observar com dins la directiva <body> hi ha situats els events onLoad i
onUnload.
<body ..... onLoad="alert('S\'ha carregat la
pàgina.');" onUnload="alert('Adéu.');">
Aquests events mostraran un missatge quan es carregui la pàgina i quan es
descarregui.
Dins la primera fila de la taula hi ha definits dos events, l'un dins de <td> i
l'altre dins de <p>, com que <p> està inclòs dins de <td> es produeix un efecte
de bombolleig d'events al fer un clic a sobre del text "Text 1", per tant,
es mostraran dos missatges d'alerta.
<tr ... ><td ... onClick="alert('Bombolleig d\'events.');">
<p onClick="alert('Has fet un clic a sobre de Text 1.');">Text
1.</p></td></tr>
A la segona fila de la taula s'hi aplica el controlador d'event onMouseover, per
tant, cada cop que passem el ratolí per sobre se'ns mostrarà el corresponent
missatge d'alerta.
<p onMouseOver="alert('Has passat el ratolí per
sobre de Text 2.');">Text 2.</p>
Dins el formulari, s'apliquen quatre controladors d'events, el primer és
onSubmit, que s'activarà quan fem clic a sobre el botó "Clica'm". L'event
onChange el podrem observar cada cop que canviï el contingut del "Quadre 1"
i l'event onBlur, s'activarà cada cop que el "Quadre 2" perdi el focus.
Dins el formulari, s'apliquen quatre controladors d'events, el primer
és onSubmit, que s'activarà quan fem clic a sobre el botó "Clica'm".
L'event onChange el podrem observar cada cop que canviï el contingut del
"Quadre 1" i l'event onBlur, s'activarà cada cop que el "Quadre 2" perdi
el focus.
Els events sobre "Text 1" i "Text 2" no es podran observar amb el navegador
Netscape 4.x. Aquest navegador reconeix molts menys events i efectua un
tractament dels events de forma molt diferent a com ho fan els navegadors
Internet Explorer i Netscape 6.x.
|
Per donar una mica més de vistositat a la nostra web, podrian utilitzar l'event omMouseover, per crear botons intercanviables, i crear un menu més animat.
| <html> <head> <title>Gr ficos activables</title> <script language="JavaScript" type="text/javascript"> <!-- if (document.images) { var pc1=new Image(); pc1.src="pc1.gif"; var pc2=new Image(); pc2.src="pc2.gif"; var service1=new Image(); service1.src="service1.gif"; var service2=new Image(); service2.src="service2.gif"; } else { alert("Lo sentimos, pero su navegador es demasiado antiguo"); } //--> </script> </head> <body bgcolor="white"> <h1>Botones OnMouseover</h1> <p> <a href="http://www.pc-cuadernos.com" onMouseover="document.pc.src=pc2.src" onMouseout="document.pc.src=pc1.src"><img src="pc1.gif" width="111" height="25" border="0" name="pc" id="pc" /></a> </p> <p> <a href="http://www.knowwareglobal.com" onMouseover="document.service.src=service2.src" onMouseout="document.service.src=service1.src"><img src="service1.gif" width="111" height="25" border="0" name="service" id="service" /></a> </p> </body> </html> |