Anterior
Objetos de un documento
Objetos de un documento Siguiente
Creación de nuevos objetos

En esta sección:
  1. Enlaces, áreas y anclas
  2. Imágenes
  3. Formularios


En este capítulo veremos como se puede usar JavaScript para mejorar la introducción de datos mediante formularios y personalizar las páginas mediante respuestas a los eventos que puede provocar el usuario.

Veremos pues el manejo de formularios, enlaces, imágenes y áreas, aunque no por este orden.


1. Enlaces, áreas y anclas Indice

En cada documento existe una matriz llamada links que almacena todos y cada uno de los enlaces que haya en la página. Cada enlace tiene las mismas propiedades que un objeto location, más la propiedad target. Así que podríamos, en tiempo de ejecución, cambiar la página que se va a cargar al pulsar un enlace. De esta forma, por ejemplo, podríamos personalizar los enlaces de una página en función del país desde el que se conecta el usuario.

Es capaz de responder a tres eventos: onClick, onMouseOver y onMouseOut, cuyo significado es obvio.

EJEMPLO 4.1.1:
<HTML>
<HEAD>
<TITLE>Eventos de enlaces </TITLE>
</HEAD>
<BODY>
<a href="http://kal-el.ugr.es/~victor/refranes.html"
onClick="confirm('Has pulsado el  enlace y ahora se va.');"
onMouseOver="confirm('Estás encima del enlace.');"
onMouseOut="confirm('Te has salido del enlace.');">
Refranes muy bonitos</a>
</BODY>
</HTML>
      

Es interesante el saber que cualquier dato de tipo cadena tiene un método llamado link que le permite crear un enlace siendo la cadena el mensaje que saldrá resaltado, y pasando como parámetro la dirección a cargar si se pulsa el enlace. Por ejemplo:

EJEMPLO 4.1.2:
<HTML>
<HEAD>
<TITLE>Cadenas convertidas en enlaces</TITLE>
<SCRIPT>
cadena="Enlace a la Universidad de Jaén";
document.write(cadena.link("http://wwwdi.ujaen.es")+"<BR>");
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
   document.write("Mi página personal".link('http://wwwdi.ujaen.es/~vrivas')+"<BR>");
</SCRIPT>
Hola.<BR>
</BODY>
</HTML>
      

Muy parecidos a los enlaces son las áreas, es por ello que se tratan exactamente igual que un enlace. Las mismas propiedades, métodos y eventos de los enlaces son aplicables a las áreas.

Por su parte, las anclas no poseen propiedades ni responden a ningun tipo de evento. Aunque su aspecto exterior sea el de un enlace, no tienen nada en común a la hora de programar en Javascript.


2. Imágenes Indice

Las imágenes son quizás de los objetos más conocidos en HTML por lo que no diremos mucho de ellas.

Los eventos a los que responden son tres: onError, onAbort y onLoad. Es fácil comprender cuándo se activa cada uno de ellos.

Por otro lado, una de las propiedades más interesantes sin duda es src en la que se indica la dirección de la imagen que se carga. Esta dirección puede modificarse mientras se está visualizando la página, consiguiendo con ello que la nueva imagen especificada se muestre en pantalla en lugar de la antigua; de esta forma, crear gráficos animados es tremendamente fácil. He aquí un sencillo ejemplo de esto.

EJEMPLO 4.2.1:
<HTML>
<HEAD>
<TITLE>Gráficos Animados</TITLE>
<SCRIPT>
<!--
// Cargamos al principio las imágenes
var imgNum=0;
var totalImagenes=4;
imagenes=new Array();
for ( i=0; i<totalImagenes; i++ ) {
  imagenes[i]=new Image();
  imagenes[i].src="imagen"+i+".gif"
} // for

// Esta es la funcion que cambia los graficos
function graficosAnimados() {
  document.images[0].src=imagenes[imgNum].src;
  if( imgNum<totalImagenes-1 ) {
    imgNum++;
  } else { 
     imgNum=0;
  }
  setTimeout( "graficosAnimados();",1000);
} // function graficosAnimados
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="graficosAnimados();">
<img src="imagen0.gif">
</BODY>
</HTML>
      


3. Formularios. Indice

Los formularios son uno de los objetos con los que más se trabaja en JavaScript, dado que en ellos se pueden incluir desde objetos estáticos (texto o imágenes) hasta recuadros de texto o cajas de opciones que permiten al usuario interactuar con la página web. Esta posibilidad de cambiar después de haberse cargado la página, hace que los objetos contenidos en un formulario sean muy versátiles y fáciles de manejar mediante JavaScript.

Una de las utilidades para las que se usa frecuentemente JavaScript es para comprobar que los datos introducidos en un formulario son correctos. Para ello se comprueban los datos una vez que se ha pulsado el botón de ENVIAR pero sin darle a este botón la propiedad SUBMIT. En vez de eso, se comprueban los datos seleccionados o introducidos por el usuario y posteriormente se usa el método submit del formulario.

Antes de pasar a ver los elementos de un formulario, diremos que éste tiene dos funciones que podemos activar en cualquier momento. tales funciones son submit y reset. Por tanto, podríamos tomar los datos de un formulario y poner un botón ACEPTAR que en realidad no fuera un submit. Al pulsar el botón de ACEPTAR el programa verificaría los datos introducidos y, si son correctos, llamaría a la función submit que enviaría los datos al CGI correspondiente.

También hemos de resaltar que todos los elementos del formulario disponen de una función que se denomina focus. cuando esta función se llama, el cursor pasa al elemento que la ha llamado. Asimismo, todos los elementos de un formulario responden a los eventos onFocus y onBlur. El primero de ellos se activa cuando el elemento es el seleccionado para escribir o hacer algo sobre él. El segundo se activa cuando deja de ser seleccionado.

Pasemos a ver uno por uno casi todos los objetos que puede haber en un formulario.

3.1. Textos (text)

Los textos son pequeños recuadros en los que el usuario puede introducir caracteres. Pero también son recuadros en los que JavaScript puede escribir texto. Ya vimos que la sentencia write no servía para escribir siempre que queríamos en la página dado que una vez que se cargaba ésta, write no afectaba a la página. Esto no ocurre con la propiedad value de un texto, que podemos cambiarla siempre que queramos.

El siguiente ejemplo utiliza dos cajas de texto. En la primera el usuario introducirá un nombre, y en la segunda se escribirá un saludo al nombre que se haya puesto cuando se pulse un botón que se introduce en el formulario. En la respuesta al evento onClick del ratón hemos puesto el código que modifica el texto.

EJEMPLO 4.3.1.1:
<HTML>
<HEAD>
<TITLE>Eventos de cajas de texto</TITLE>
</HEAD>
<BODY>
<FORM NAME="formu">
<INPUT TYPE="text" NAME="t1" SIZE="40" VALUE="">
<INPUT TYPE="button" VALUE="SALUDA"
onClick="document.formu.t2.value='hola'+ 
document.formu.t1.value+'Cómo estás?'"><BR>
<INPUT TYPE="text" NAME="t2" SIZE="50" VALUE="">
</FORM>
</BODY>
</HTML>

El siguiente es un ejemplo de un mensaje moviéndose por un texto de un formulario.

EJEMPLO 4.3.1.2:
<HTML>
<HEAD>
<TITLE>Eventos de textos: mensajes deslizantes</TITLE>
<SCRIPT>
<!-- Función para mover un mensaje por un formulario.
var queDigo=" Bienvenido al Web "+
"del más movido del mundo entero"+
"<-  <-  <-  <-  <-  <-";
function mensajito() {
  queDigo=queDigo.substring(1,queDigo.length)+queDigo.substring(0,1); 
  document.formu.t1.value=queDigo;
  setTimeout( "mensajito();",100 );
} // mensajito
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="mensajito();">
<FORM NAME="formu">
<INPUT TYPE="text" NAME="t1" SIZE="40" VALUE="">
</FORM>
</BODY>
</HTML>
      

Cualquier cosa que queramos escribir al usuario una vez que se haya cargado la página deberemos hacerlo mediante textos.

Cabe destacar los métodos focus y select. El primero, focus (ver 4.5.3), hace que el texto sea el objeto seleccionado de la página, esto es, pone el cursor en ese objeto de modo que el usuario no tiene que señalarlo con el ratón y luego escribir, sino que directamente está disponible para escribir. El segundo, select, resalta el texto que haya en la caja en ese momento de modo que se comporta como si lo hubiésemos seleccionado con el ratón o con la tecla MAYUSC.

3.2. Áreas de texto (textarea)

Son similares a los text pero pueden almacenar varias líneas para lo cual disponen de barras de deslizamiento del texto que contienen. Sin embargo no poseen métodos relacionados con dicho desplazamiento así que todo lo dicho para los textos es aplicable a las áreas de texto.

3.3. Cajas de chequeo (checkbox) y radiobuttons.

Lo más interesante de las cajas de chequeo es la propiedad checked cuyo valor puede ser true o false. Este valor puede ser consultado, pero también modificado, en cuyo caso se verá reflejado en la página el cambio.

Cuando incluimos una caja de chequeo en un formulario se crea una matriz que contiene cada una de las opciones. Aunque se puede dar nombre a cada uno de los elementos de esa matriz, lo mejor es tratarla como tal, de modo que podamos acceder secuencialmente a cada uno de sus elementos.

A continuación vemos un ejemplo en el que se usa esta propiedad.

EJEMPLO 4.3.3.1:
<HTML>
<HEAD>
<TITLE>Ejemplo de CheckBox</TITLE>
<SCRIPT>
var dondeEsta=0;
var direccion=1;
// función que mueve el símbolo de chequeo
// por entre las distintas opciones del checkbox
function mueve() {
  document.FORMULARIO_1.cb[dondeEsta].checked=false;
  if (direccion==1) { 
    dondeEsta++;
  } else {
    dondeEsta--;
  }
  if (dondeEsta>=document.FORMULARIO_1.cb.length) {
    direccion=0;
    dondeEsta--;
  }
  if (dondeEsta<0) {
    direccion=1;
    dondeEsta++;
  }
  document.FORMULARIO_1.cb[dondeEsta].checked=true;
  setTimeout( "mueve();",20);
} // function mueve
</SCRIPT>
</HEAD>
<BODY onLoad="setTimeout('mueve();',2000)">
<FORM NAME="FORMULARIO_1"> 
  <CENTER>
  <SCRIPT>
  // Creamos el checkbox 
  var d=document;
  var ancho=15;
  for ( var i=0; i<ancho; i++ ) {
    d.writeln("<input type='checkbox' name='cb'>")
  } // for i
  </SCRIPT>
  </CENTER>
</FORM>
</BODY>
</HTML>
      

Uno de los eventos al cual pueden responder las cajas de chequeo es onClick, es decir, que alguien seleccione alguna de las opciones. A tal evento podemos responder con alguna opción como ya hemos visto.

En cuanto a los radiobuttons es un tipo de entrada muy similar a las cajas de chequeo, como ya sabemos. La única diferencia es que en las anteriores podía haber más de una opción seleccionada, y en este caso esto no puede ocurrir. El mismo ejemplo puesto para las cajas de chequeo es válido para los radiobuttons.

He aquí un ejemplo de radios y el método focus.

EJEMPLO 4.3.3.1:
<HTML>
<head>
<title>Ejemplo de método Focus y radiobuttons</title>
</head>

<BODY>
<SCRIPT>
</SCRIPT>
<FORM NAME="FORMULARIO_1"> 
<center>
<SCRIPT>
// Esta funcion da el "foco" al elemento j.
function tomaFoco( j ) {
  document.FORMULARIO_1.elements[j*2].focus();
}
var d=document;
var ancho=5;
for ( j=0; j<ancho; j++) {
  d.writeln("<input type='text' name='text"+j+"' size='20'>");
  d.writeln("<input type='radio' name='cb'"+
"onClick='tomaFoco("+j+")'>");
  d.writeln("<BR>");
} // for j
</SCRIPT>
</CENTER>
</FORM>
</body>
</HTML>
      

3.4. Botones, enviar y limpiar (button, submit y reset).

Las tres cosas son botones, salvo que submit tiene por misión enviar el formulario, es decir, que se cumpla la parte action del mismo, y reset hace que se limpie todo lo que hubiéramos escrito o seleccionado.

Como botones que son, los eventos a los que responden son principalmente onFocus, onBlur y sobre todo onClick. Es especialmente interesante este último, que es el que se produce cuando pinchamos encima de un botón. A continuación se ofrece un ejemplo del uso de este evento.

EJEMPLO 4.3.4.1:
<HTML>
</HEAD>
<TITLE>Ejemplo de uso de onClick para botones</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" onClick="history.go(0);">
// Carga la misma página
</FORM>
</BODY>
</HTML>