14. L'etiqueta <script> i els gestors d'esdeveniments

Quan s'executen els programes?

Segons el moment en què s'esdevinguin, les accions produïdes sobre un document mitjançant l'ús del JavaScript es poden dividir en dos grans grups:

les que tenen lloc durant el procés de càrrega del document.
les que tenen lloc després del procés de càrrega del document.

En el primer cas les especificacions queden delimitades per dues etiquetes pròpies de l'HTML, que són <script>... </script>.

En el segon cas les especificacions van dins una etiqueta d'HTML i són activades per uns atributs especials anomenats gestors d'esdeveniments.

Execució de Javascript mentre es carrega un document: <script>

Les instruccions que s'hagin d'executar mentre es carrega el document es situen entre <script> i </script>, segons l'esquema següent:

<script>
<!---
instruccions
//--->
</script>

Les instruccions poden ésser qualssevol, però, com sempre, és recomanable que consisteixin en funcions d'usuari prèviament definides a HEAD o a l'exterior del document.

Exemple

Gestors d'esdeveniments

Els gestors d'esdeveniments (event handlers) són un conjunt d'atributs que s'inclouen dins les etiquetes d'un element HTML.

L'acció dels gestors d'esdeveniments té tres aspectes distintius:

un element actiu d'HTML, representat per la seva etiqueta, en el qual s'ha de produir un determinat esdeveniment.
l'esdeveniment previst, representat pel gestor d'esdeveniments.
l'acció que, com a conseqüència, s'ha de produir sobre el document, indicada mitjançant qualsevol instrucció vàlida de JavaScript, preferentment una funció d'usuari definida a HEAD.

En els exemples vistos fins ara l'element actiu ha estat un botó i l'esdeveniment previst fer clic. La fórmula general és la següent:

<etiqueta_HTML ... gestor_d'esdeveniments="instrucció">

Els gestors d'esdeveniments han estat tipificats pel W3C; tots comencen per on, que podem traduir per quan. Actuen en diversos moments posteriors a la càrrega del document que els conté:

automàticament, immediatament després de la càrrega.	onLoad
quan l'usuari fa alguna cosa.	onMouseOver, onMouseOut, onClick, etc.
automàticament, en descarregar-se el document	onUnload

Canvis en acabar la càrrega d'un document

Per aconseguir un canvi en el mateix moment en què s'acaba la càrrega d'un document, es posa el gestor d'esdeveniments onLoad dins <body>:

<body onLoad="instrucció">

Exemple

Canvis en el moment de tancar un document

Anàlogament, onUnload detecta el tancament o descàrrega d'un document:

<body onUnload="instrucció">

Exemple

Fer clic sobre un element

El gestor d'esdeveniments onClick permet detectar el clic que fem sobre un botó, amb la qual cosa s'engega l'acció que li hagi estat assignada:

<input type="button" value="Fes clic aquí" onClick="instrucció">

Exemple

El gestor d'esdeveniments onClick pot actuar no solament sobre un botó sinó també sobre altres elements, com ara una imatge o un element de text:

Exemple