Manual de JavaScript

Formularios
Vamos a empezar con los formularios, que permiten la interacción del usuario con información a través de las páginas Web. Antes de la aparición del JavaScript, interactuar con los elementos de un formulario era sólo posible mediante código residente en el servidor. JavaScript permite esto corriendo en el cliente de una manera algo más limitada, pero con una respuesta instantánea para el usuario que visita la página.

Los formularios proporcionan una respuesta ante las siguientes situaciones:

Un cambio en la opción seleccionada dentro de un grupo <SELECT>, esto es un grupo de opciones a seleccionar por el usuario.
Entrar o salir dentro de un campo del formulario.
Transmisión de un formulario completo

Ahora vamos a enumerar la etiquetas HTML que se usan habitualmente en un formulario, cuya explicación se verá en la práctica con los ejemplos que veremos más adelante:

<INPUT>
<SELECT>
<TEXTAREA>
<OPTION>
y todos ellos incluidos dentro de <FORM>

Los manejadores de eventos para las acciones anteriormente mencionadas son:

onBlur:Incicializa un script cuando un campo del formulario es excitado. Este manejador funciona con las etiquetas <INPUT>, <SELECT> y <TEXTAREA>.Se suele usar cuando un campo del formulario pierde el foco, representado por el cursor o el ratón.
onChange:Este manejador funciona con las etiquetas <INPUT>,<SELECT> y <TEXTAREA> e inicializa el script cuando el contenido de uno o varios campos del formulario cambian.
onFocus:Este manejador funciona con las etiquetas <INPUT>,<SELECT> y <TEXTAREA> y es justo el manejador opuesto a onBlur, activando el script cuando se entra en un campo del formulario o recibe el foco del ratón o el cursor.
onSelect:Este manejador sólo funciona con las etiquetas <INPUT> y <TEXTAREA>, activando el script al seleccionar un texto contenido en cuadro o área de texto. Lo suelen confundir con el manejador onFocus descrito anteriormente.
onSubmit:Se usa en unión con <FORM> y activa el script al enviar el formulario.

Una vez introducidos los elementos a manejar, pasemos a ver su funcionamiento mediante ejemplos.
Ejemplo1: Color de Fondo
Este primer ejemplo utiliza el manejador onFocus para detectar que el usuario entre mediante el ratón o el tabulador en un campo, cambiando el color de fondo del formulario. Veamos el código.

<HTML>
<HEAD>
<TITLE> EJEMPLO 1 </TITLE>
</HEAD>
<BODY BGCOLOR=FFFFFF text=000000>
<CENTER><H2>onFocus - Cambio de color de fondo</H2><P>
<FORM><INPUT Type="text" Name="bgred" value="rojo" onFocus="document.bgColor='red'"><P>
<INPUT Type="text" Name="bggreen" value="verde" onFocus="document.bgColor='green'"><P>
<INPUT Type="text" Name="bgblue" value="azul" onFocus="document.bgColor='blue'"><P>
<INPUT Type="text" Name="bgyellow" value="amarillo" onFocus="document.bgColor='yellow'"><P>
</FORM></CENTER>
</BODY>
</HTML>

Ejemplo2: Mensaje de Alerta
Este ejemplo utiliza el manejador onBlur para tomar una acción al abandonar un campo del formulario. En este caso lanza un mensaje de alerta, función alert(), cuando el usuario abandona el campo del código postal, avisando que es necesario rellenar el campo del DNI. Por supuesto existen múltiples variantes de este ejemplo dependiendo de la acción a tomar, es decir, la función o funciones que usemos. Se han incluido etiquetas de tabla para dar este formato a la página.

<HTML>
<HEAD>
<TITLE> EJEMPLO 2 </TITLE>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H2>onFocus - Mensaje de Alerta</H2><P>
<P><H2>Introduzca su datos personales:</H2><P>
<FORM><TABLE>
<TR><TD>Nombre:</TD><TD><INPUT type="text" name="nom" size=35></TD></TR>
<TR><TD>Domicilio:</TD><TD><INPUT type="text" name="dom" size=35></TD></TR>
<TR><TD>Ciudad:</TD><TD><INPUT type="text" name="ciu" size=35></TD></TR>
<TR><TD>Provincia:</TD><TD><INPUT type="text" name="pro" size=17 >C.P.:<INPUT type="text"
name="CP" size=12></TD></TR>
<TR><TD>DNI:</TD><TD><INPUT type="text" name="DNI" size=35 onBlur="alert('Es obligatorio insertar
este dato')></TD></TR>
</TABLE></FORM></CENTER>
</BODY>
</HTML>

Ejemplo 3: Testeo de los valores de entrada de un formulario
Este ejemplo utiliza el manejador onChange y el método index(). Se trata de verificar que la entrada de un campo sigue el formato deseado antes de enviar los datos del formulario. Este ejemplo es una buena manera de comprobar cadenas de longitudes fijas como teléfonos, números de cuenta, códigos postales, etc. En nuestro caso comprobamos que el usuario introduce el teléfono con el prefijo más las siete cifras propias.

<HTML>
<HEAD>
<TITLE> EJEMPLO 3 </TITLE>
<SCRIPT>
function chequeo(tel){
     if (tel=="") {alert("Debe usted introducir el teléfono
           con el prefijo de provincia de la manera
           siguiente: 91-7777777")}
     else {
           if (tel.indexOf("-") !=2 || tel.length != 10)
                {alert("Debe usted introducir el teléfono
                con el prefijo de provincia de la manera
                siguiente: 91-7777777")}
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H2>onChange - Testeo del campo teléfono</H2><P>
<P><H2>Introduzca su datos, por favor:</H2><P>
<FORM><TABLE>
<TR><TD>Nombre:</TD><TD><INPUT type="text" name="nom" size=35></TD></TR>
<TR><TD>Domicilio:</TD><TD><INPUT type="text" name="dom" size=35></TD></TR>
<TR><TD>Ciudad:</TD><TD><INPUT type="text" name="ciu" size=35></TD></TR>
<TR><TD>Provincia:</TD><TD><INPUT type="text" name="pro" size=17 >C.P.:<INPUT type="text"
      name="CP" size=12></TD></TR>
<TR><TD>Teléfono:</TD><TD><INPUT type="text" name="tel" size=35 onChange="chequeo(this.value)">
</TD></TR>
</TABLE></FORM></CENTER>
</BODY>
</HTML>

Si quieres ver cómo funciona este código, pulsa aquí.

El funcionamiento es el siguiente: el manejador onChange entra en funcionamiento cuando el campo de texto de nombre "tel" cambia de valor. Entonces llama a la función chequeo, definida en la cabecera de documento, que es la encargada de realizar las comprobaciones pertinentes. La primera condición del bloque if es comprobar si el campo ha quedado en blanco, en cuyo caso lanza el mensaje de alerta. En caso contrario, comprueba el contenido del campo y si no cumple las condiciones especificadas, vuelve a lanzar el mensaje. Para dar forma a las condiciones usamos el método index() que primero pasa a cadena el objeto "tel" y:

comprueba que el guión no está situado en las dos primeras posiciones de la cadena.
comprueba que la longitud total de la cadena, con el guión incluido, es de 10 caracteres.

Hay que señalar que estas condiciones están ligadas por un operador || que equivale a una ligadura lógica OR.

Ejemplo 4: Mensaje de alerta al hacer una selección
Este ejemplo utiliza el manejador onSelect. Cuando el usuario selecciona una de las opciones, se dispara un mensaje de alerta.

<HTML>
<HEAD>
<TITLE> EJEMPLO 4 </TITLE>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
      VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H1>onSelect </H1><P><H2>Elige el adjetivo que mejor te describe</H2><P>
<FORM>
<INPUT Type="text" onSelect="alert('Vamos, no seas modesto.')" Name="t1" size=20
      value="normal" ><BR>
<INPUT Type="text" onSelect="alert('Bueno, por lo menos no eres modesto.')" Name="t2" size=20
      value= "Genial" ><BR>
<INPUT Type="text" onSelect="alert('De paso dime tu teléfono....')" Name="t3" size=20
      value="Atractivo" ><BR>
<INPUT Type="text" onSelect="alert('Entonces espera un ratito....')" Name="t4" size=20
      value="Paciente" ><BR>
</FORM></CENTER>
</BODY>
</HTML>

Si quieres ver cómo funciona este código, pulsa aquí.

Ejemplo 5:Testeo de valores de un formulario antes del envío
Ahora vamos a utilizar el manejador onSubmit. Se trata de verificar los datos del formulario antes de enviarlos. Una vez hecho esto, podremos, por ejemplo, poner en funcionamiento un CGI residente en el servidor WWW.
Veamos el código:

<HTML>
<HEAD>
<TITLE> EJEMPLO 4 </TITLE>
<SCRIPT>
function testform(){
      var tel="";
      tel=document.forms[0].elements[0].value;
      if (document.forms[0].elements[0].value==""
      || document.forms[0].elements[1].value==""
      || document.forms[0].elements[2].value==""
      || document.forms[0].elements[3].value==""
      || document.forms[0].elements[4].value==""
      || document.forms[0].elements[5].value==""
      { alert("Debe usted rellenar todos los campos del formulario") }
      if (tel.indexOf("-")!=2||tel.length!=10)
           { alert("Debe usted introducir el teléfono
                con el prefijo de la provincia
                de la forma siguiente:91-7777777")}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF"
      VLINK="#0000FF" ALINK="#0000FF" >
<CENTER><H1>onSubmit - Testeo de formulario</H1><P>
<H2> Introduzca sus datos, por favor:</H2>
<FORM method=post onSubmit="return testform()"><TABLE>
<TR><TD>Nombre:</TD><TD><INPUT type="text" name="nom" size=35></TD></TR>
<TR><TD>Domicilio:</TD><TD><INPUT type="text" name="dom" size=35></TD></TR>
<TR><TD>Ciudad:</TD><TD><INPUT type="text" name="ciu" size=35></TD></TR>
<TR><TD>Provincia:</TD><TD><INPUT type="text" name="pro" size=17>
      C.P.:<INPUT type="text" name="cp" size=12></TD></TR>
</TABLE>
<INPUT type="submit" name="submit button" value="submit">
</FORM></CENTER>
</BODY>
</HTML>

La función testform() va comprobando que todos los elementos del objeto document, los campos del formulario que no están rellenos. Es decir, si encuentra uno sólo vacío lanzará el aviso. Debemos observar que el manejador que estamos tratando en este caso, onSubmit, sigue una pauta distinta a los anteriores en cuanto a colocación se refiere. En este caso debemos incluirlo en la etiqueta de formulario:

<FORM method=post onSubmit="return testform()"><TABLE>