Master en Artes Digitales (IUA-UPF)
Módulo de Programación

JavaScript en HTML

Estructura de un documento HTML | Integración de JS en un documento HTML mediante el tag <SCRIPT></SCRIPT> | Funciones de JS en HTML | El JS fuera de función en HTML | Eventos del Browser: onClick, onLoad, onChange,... | Activación de funciones JS desde <A HREF="">...</A> | Activación de funciones JS desde <FORM>...</FORM> | Ejercicios

Estructura de un documento HTML

La estructura básica de un documento HTML es la siguiente:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>

</body>
</html>

donde se pueden identificar las secciones descritas a continuación:

<html> ... </html>: Engloba y delimita todo el documento HTML.

<head> ... </head>: Engloba y delimita la cabecera del documento. En esta cabecera se encuentra también la subsección <title> ... </title> la cual engloba y delimita el texto que forma el título del documento.

<body> ... </body>: Engloba y delimita el cuerpo del documento, es decir, el texto, las imágenes, tablas, formularios, etc., que aparecen realmente en pantalla.

 

Integración de JavaScript en un documento HTML mediante el tag <SCRIPT></SCRIPT>

La integración de JavaScript (JS) en un documento HTML se lleva a cabo mediante el tag <SCRIPT>...</SCRIPT>. Este tag tiene la siguiente sintaxis para el JS:

<script language="JavaScript">
<!--
... ... ...
//--> </script>

Aquí vemos que se debe definir, en el tag inicial, el lenguaje de scripting que se utilizará. Las líneas <!-- y //--> no son necesarias (de hecho no son parte de tag <script>) pero son recomendables por compatibilidad con browsers que no conocen el tag <script>. Los puntos suspensivos muestran dónde iría el código JS.

Este bloque de JS puede situarse tanto dentro de la cabecera <head>...</head> (aunque no dentro del título <title>...</title>), o bien dentro del cuerpo <body>...</body>. No obstante, cuando se definen funciones que serán utilizadas a lo largo del cuerpo del documento HTML, el bloque de <script> se sitúa en la cabecera. Situar el código JS dentro del cuerpo se hace solo en contadas ocasiones para conseguir ciertos efectos muy concretos.

 

Funciones de JS en HTML

La forma más usual en que se utiliza el JS dentro de HTML es mediante la definición de funciones que se llaman desde distintos puntos del HTML para realizar tareas concretas y puntuales. Estas funciones usualmente son llamadas como resultado de una acción por parte del usuario, como por ejemplo: hacer click sobre un hiperlink, modificar un elemento de formulario, etc. Un ejemplo de una función cualquiera definida en la cabecera seria:

<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
  <!--
function miFuncion(){ ... ... ... }
//--> </script> </head> <body>
</body>
</html>

Como se puede apreciar, la función se define dentro del bloque <script>, el cual está situado dentro de la cabecera <head>.

En este caso, el browser de HTML empezará a leer el documento por el inicio de HTML, la cabecera, el título, hasta llegar al bloque <script>. En este punto, leerá la función, pero no la ejecutará. Tan solo la recordará para poderla ejecutar en caso de que sea llamada más adelante en el documento HTML.

Ejemplos de funciónes de JS en HTML

Ejemplo 1 :

Definir una función, en un <script> definido en la cabecera, que genere un alert() con un mensaje cualquiera y observar que pasa al cargarlo en el browser.

Nota: la función alert() es un método de ventana que en los browsers de HTML genera la aparición de una pequeña ventana de alerta mostrando el mensaje que se le pase por parámetro.

 

El JS fuera de función en HTML

El código JS también se puede definir fuera de una función en HTML. Por ejemplo, se pueden poner instrucciones que definan variables u objetos globales:

<html>
<head>
<title>Untitled  Document</title>
<script language="JavaScript">
  <!--
variable = 100 miArray = new Array(100) ... ... ...
//--> </script>
</head> <body>
</body>
</html>

Como se puede apreciar, este código también se define dentro del bloque <script>, el cual está situado dentro de la cabecera <head>.

En este caso, el browser de HTML, de nuevo empezará a leer el documento por el inicio de HTML, la cabecera, el título, hasta llegar al bloque <script>. En este punto, a diferencia del caso de la función, el browser si ejecutará el código debido a que no está dentro de una función, si no que está como cuerpo principal del programa. De este modo, si alguna función después hace referencia a la variable o a miArray, el browser ya sabrá a qué se refiere.

Ejemplos de código de JS fuera de funciones en HTML

Ejemplo 1 :

Generar un alert() con un mensaje cualquiera fuera de una función, en un <script> definido en la cabecera y observar que pasa al cargarlo en el browser.

Ejemplo 2 :

Fusionar los dos Ejemplo 1 anteriores, de forma que cada alert() genere un mensaje distinto y observar que pasa al cargarlo en el browser.

 

Eventos del Browser: onClick, onLoad, onChange,...

Un evento de un browser de HTML se puede ver como un mensaje que se genera cuando el usuario realiza una acción sobre el browser. Por ejemplo, cuando el usuario clica sobre un hiperlink, se genera un evento llamado Click, o cuando el usuario cambia algún elemento de un formulario se genera un evento Change. Estos eventos son generados por los elementos de interacción (como un texto o una imagen marcados como hiperlink o por el elemento de formulario) y son recogidos por el browser quien revisa si alguien está intentando capturar esos evento (mensajes). En caso de que, por ejemplo, algún elemento del browser esté esperando un evento de tipo Click, el browser le avisa que si se ha generado un evento de este tipo. En ese instante el elemento del browser que estaba esperando el evento, puede decidir realizar una acción concreta. Esta acción puede ser una llamada a una función de JS que haya sido definida en el documento en cuestión.

Hay eventos del Browser que no se generan por la acción del usuario, sino que se generan como resultado de la finalización de algun proceso del propio browser. Un ejemplo de estos eventos es el llamado Load, el cual se genera cuando el browser ha terminado de cargar todo el documento y lo muestra por pantalla. Si en ese momento hay algun elemento del browser que está esperando a que se genere dicho evento, el browser se lo notificará y este elemento podrá, por ejemplo, llamar una función de JS.

Los elementos del browser que pueden capturar eventos se llaman "event handlers" (o gestores de eventos). Estos handlers se sitúan en los tags de los elementos con los que puede interactuar el usuario, o en tags relacionados con la generación de ese evento.

Por ejemplo, el evento de tipo Load, se puede capturar mediante el event handler onLoad que forma parte del tag <body>. Veamos un ejemplo ya en código:

<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
  <!--
function miFuncion(){ // Esta función se llamará al terminar de cargarse el documento ... ... ... }
//--> </script> </head> <body onLoad="miFuncion()">
</body>
</html>

Veamos qué se ha definido. En primer lugar tenemos una función definida dentro de un bloque <script>, en el <head>, que se llama miFuncion(). En segundo lugar hemos definido el event handler onLoad dentro del tag <body>. Este event handler, tiene asociada la acción de llamar a la función miFuncion() en caso de que se genere un evento de Load, es decir un evento de terminación de carga del documento.

Ejemplos de eventos de browser

Ejemplo 1 :

Generar un alert() con un mensaje cualquiera en el momento de finalizar la carga total del documento, es decir, en el momento que se genere el evento Load y observar que pasa al cargarlo en el browser.

Ejemplo 2 :

Modificar el ejemplo anterior para que el event handler onLoad no llame directamente al alert() si no que llame a una función definida en la cabecera y esta llame al alert() con un mensaje cualquiera y observar que pasa al cargarlo en el browser.

Para ver la lista completa de event handlers acceder a: JS Event Handlers

 

Activación de funciones JS desde <A HREF="">...</A>

La activación de funciones JS desde el tag <A HREF="">...</A> se hace principalmente mediante dos sistemas: el modo inmediato o los event handlers.

Modo Inmediato:

La forma en que este mecanismo llama una función de JS es definiendo el nombre de la función dentro de la zona de URL del HREF, especificando que es una llamada de JS. La sintaxis es la siguiente:

...
...
...
<a href="javascript:miFuncion()">Clica aquí e irás a ejecutar miFuncion()</a>
...
...
...

Aquí vemos como el texto "Clica aquí e irás a ejecutar miFuncion()" es un elemento clicable o hiperlink gracias a estar envuelto por el tag <a href="">...</a>. La diferencia de la utilización usual de este tag, en la que normalmente se define una dirección de internet o URL, es que aquí avisamos que utilizaremos JS y a continuación definimos la llamada a una función que ejecutará un fragmento de código JS que nos interesa. En este caso la función se llama miFuncion() la cual deberá haber sido definida con anterioridad. Esta función será llamada en el momento en que el usuario realice una pulsación sobre el texto hiperlink.

Ejemplos de llamada de funciones en modo inmediato

Ejemplo 1 :

Generar un alert() con un mensaje cualquiera en el momento en que el usuario clique sobre un texto hiperlink.

Ejemplo 2 :

Modificar el ejemplo anterior para que el click no llame directamente al alert() si no que llame a una función definida en la cabecera y esta llame al alert() con un mensaje cualquiera.

Ejemplo 3:

Modificar el ejemplo anterior para que el click no sea sobre un texto, sino sobre una imagen.

 

Event Handlers:

Los tres event handlers más utilizados con <a href="">...</a> son: onClick, onMouseOver y onMouseOut.

onClick: la sintaxis para este event handler es la siguiente:

...
...
...
<a href="#" onClick="miFuncion()">Clica aquí e irás a ejecutar miFuncion()</a>
...
...
...

En este caso, tenemos que, por un lado, si no se quiere que el URL del HREF tenga ningún efecto, deberemos poner un # como URL. Por otro lado, el event handler onClick se sitúa a continuación del HREF y símplemente se le asocia el código JS que se quiere ejecutar, en este caso concreto, la llamada a miFuncion(). Cabe observar que en este caso, a diferencia del modo inmediato, no se debe especificar que estamos en lenguaje JS.

El efecto resultante es aparentemente el mismo que en el modo inmediato.

onMouseOver: la sintaxis para este event handler es la siguiente:

...
...
...
<a href="#" onMouseOver="miFuncion()">Pon el cursor sobre mi e irás a ejecutar miFuncion()</a>
...
...
...

En este caso, tenemos que el event handler onMouseOver se sitúa a continuación del HREF y símplemente se le asocia el código JS que se quiere ejecutar. En el ejemplo, la llamada a miFuncion().

El efecto resultante es que en el momento en que el usuario sitúa el cursor sobre el texto se genera un evento de MouseOver, el event handler onMouseOver lo captura y llama a miFuncion().

onMouseOut: la sintaxis para este event handler es la siguiente:

...
...
...
<a href="#" onMouseOut="miFuncion()">Pon el cursor sobre mi y después quítalo, asi irás a ejecutar miFuncion()</a>
...
...
...

En este caso, tenemos que el event handler onMouseOut se sitúa a continuación del HREF y símplemente se le asocia el código JS que se quiere ejecutar. En el ejemplo, la llamada a miFuncion().

El efecto resultante es que en el momento en que el usuario mueve el cursor desde encima del texto hacia fuera se genera un evento de MouseOut, el event handler onMouseOut lo captura y llama a miFuncion().

Ejemplos de llamada de funciones con event handlers en <a href="">

Ejemplo 1 :

Generar un alert() con un mensaje cualquiera en el momento en que el usuario clique sobre un texto hiperlink mediante el event handler onClick.
Repetir para
onMouseOver y onMouseOut.

Ejemplo 2 :

Modificar el ejemplo anterior para que no sellame directamente al alert() si no que se llame a una función definida en la cabecera y esta llame al alert() con un mensaje cualquiera.

Ejemplo 3:

Modificar el ejemplo anterior para que los eventos no se produzcan sobre un texto, sino sobre una imagen.

 

Activación de funciones JS desde <FORM>...</FORM>

Veremos la activación de funciones JS desde <form> como resultado de la activación global del formulario y como resultado de la modifiación de alguno de sus componentes.

Submit de formulario:

Cuando un formulario es activado por la acción de un botón de tipo submit, se ejecuta el salto al URL definido en action de la cabecera del formulario. Así, por ejemplo:

<form action="http://www.iua.upf.es/...">
  <input type="submit" name="Submit" value="Submit">
</form>

cuando se oprime el botón submit, se envían los datos del formulario al URL http://www.iua.upf.es/...

En este caso, de forma análoga con el modo inmediato del HREF, también podemos especificar una llamada a una función de JS en el action:

<form action="javascript:miFuncion()">
  <input type="submit" name="Submit" value="Submit">
</form>

Así, al pulsar el botón submit, se ejecuta la función de JS miFuncion(). Esto es útil cuando, en vez de querer enviar los datos del formulario a un URL de algún servidor, queremos utilizar el formulario para alguna gestión local del documento en que se encuentra.

Event handlers de objetos de formulario:

Los objetos que pueden formar parte de un formulario: zonas de texto, botones, listas, etc., tienen sus propios event handlers. Veamos los más utilizados para algunos de los objetos de <form>.

Submit, Reset o Button:

Tanto los botones de tipo submit, como los de tipo reset como los de tipo general tienen la posibilidad de utilizar el event handler onClick:

<input type="submit" name="Submit" value="Submit" onClick="miFuncion()">

<input type="button" name="Submit2" value="Button" onClick="miFuncion()">

<input type="reset" name="Submit3" value="Reset" onClick="miFuncion()">

Aquí vemos cómo se sitúa el event handler y cómo se define la llamada a JS, la cual es análoga a la utilización de este event handler en <a href="">.

Campo de texto y área de texto:

Estas dos formas de entrada de texto en un formulario, disponen del event handler: onChange.

<input type="text" name="textfield" onChange="miFuncion()">
<textarea name="textfield2" onChange="miFuncion()"></textarea>

Este event handler se activa cuando el usuario ha modificado el texto del objeto en cuestión y valida el cambio mediante un enter o por el hecho de activar algún otro objeto.

Listas y menús:

En este caso, el event handler más usual para las listas y menús de formulario es también: onChange.

<select name="select" onChange="miFuncion()">
</select>

Este funciona de forma similar al caso anterior. El event hendler onChange se activa cuando el usuari modifica la selección de una lista o un menú.

Ejemplos de llamada de funciones con event handlers desde objetos de formulario

Ejemplo 1 :

Definir un formulario con los objetos siguientes: un botón submit, un botón genérico, un botón de reset, un campo de texto, un área de texto, una lista y un menú. Generar un alert() desde el event handler que le corresponda a cada objeto, con un mensaje que indique qué objeto ha sido activado y mediante qué event handler. Por ejemplo, para el botón genérico, se deberá generar el alert() desde el onClick y deberá tener el mensaje "Se ha detectado un onClick en un botón genérico".

Ejemplo 2 :

Modificar el ejemplo anterior para que no sellame directamente al alert() en cada objeto, si no que se llame una única función, generaAlert(), a la cual se le pasará por parámetro el nombre del objeto para que ella sepa qué alert() generar en cada caso.

Pista: Utilizar un switch dentro de la función.


Ejemplos de JS en HTML

Ejemplo 1 :

  • Definir un array de 5 mensajes en el cuerpo principal de un bloque <script>, en la cabecera del documento HTML.
  • Definir en el documento un texto que sea hiperlink, una imagen que también lo sea, un formulario con tres botones genéricos.
  • Generar un alert() con mensaje distinto desde cada elemento. En concreto:
    • texto: en modo inmediato
    • imagen: por onMouseOver
    • botones: por onClick

Ejemplo 2:

  • Definir un array de 5 mensajes en el cuerpo principal de un bloque <script>, en la cabecera del documento HTML.
  • Definir en el documento una imagen hiperlink de forma que cada vez que se genere un onMouseOver, llame a una función que vaya cambiando de mensaje de forma consecutiva.

Soluciones:

Ejemplo 1 :

<html>
<head>
<title>Ejemplo 1</title>
<script language="javascript">
<!--
   mensajes = new Array(5)
   mensajes[0] = "Texto hiperlink en modo inmediato"
   mensajes[1] = "Imagen hiperlink por onMouseOver"
   mensajes[2] = "Botón1 por onClick"
   mensajes[3] = "Botón2 por onClick"
   mensajes[4] = "Botón3 por onClick"
//-->
</script>
</head>
<body>
<p><a href="javascript:alert(mensajes[0])">Este es el texto</a></p>
<p><a href="#" onMouseOver="alert(mensajes[1])"><img src="botoiua.gif"></a></p>
<form>
     <input type="button" name="Button1" value="Button1" onClick="alert(mensajes[2])">
     <input type="button" name="Button2" value="Button2" onClick="alert(mensajes[3])">
     <input type="button" name="Button3" value="Button3" onClick="alert(mensajes[4])">
</form>
</body>
</html

Ejemplo 2:

<html>
<head>
<title>Ejemplo 2</title>
<script language="javascript">
<!--
   mensajes = new Array(5)
   mensajes[0] = "Este es el primer mensaje"
   mensajes[1] = "Este es el segundo mensaje"
   mensajes[2] = "Este es el tercer mensaje"
   mensajes[3] = "Este es el cuarto mensaje"
   mensajes[4] = "Este es el quinto mensaje"

   mensajeActual = 0

   function nuevoMensaje(){
      alert(mensajes[mensajeActual])
      mensajeActual++
      if(mensajeActual == 5){
         mensajeActual = 0
      }
   }
//-->
</script>
</head>
<body>
<p><a href="#" onMouseOver="nuevoMensaje()"><img src="botoiua.gif"></a></p>
</body>
</html>

Ejercicios: Escribir programas que hagan lo siguiente
  1. Diseñar un documento HTML que cumpla lo siguiente:
    • Que tenga una imagen la cual cada vez que el cursor sea puesto encima, incremente un contador global.
    • Que tenga una segunda imagen la cual haga decrecer el contador global cada vez que el cursor salga de ella. Nota: el contador nunca deberá bajar de cero.
    • Un botón de formulario el cual muestre el estado del contador, a través de un alert(), cada vez que sea pulsado.


< Sesión Anterior | Índice | Siguiente Sesión >