gratiszona

formularios en javascript

Los llamados tags "formulario": <FORM> </FORM> nos permiten incluir en una pagina web, otros elementos visuales como "cuadros de texto" y "botones", de gran importancia en la programacion en JavaScript.
Cuadros de Texto:
<FORM>
<INPUT TYPE="text" SIZE="10" NAME="pepe">
</FORM>
Crea un cuadro de texto de nombre "pepe" y tamaño 10 caracteres.
<FORM>
<INPUT TYPE="text" onBlur="programa JavaScript">
</FORM>
Crea otro cuadro de texto tal que, al salir de el se ejecuta el programa JavaScript.
  • Escribe el siguiente programa:
<HTML>
<!-- PROG065.HTM //-->
<BODY>
<FORM>
ESCRIBE LO QUE QUIERAS:
<INPUT TYPE='text' SIZE='50' NAME='uno'>
<BR><BR>
PULSA TAB para pasar al siguiente cuadro de texto:
<BR><BR>
VUELVE A ESCRIBIR LO QUE TE VENGA EN GANA:
<INPUT TYPE='text' onBlur='alert('vale');'>
<BR>
<INPUT TYPE='text' VALUE='PUES ESO'>
</FORM>
</BODY>
</HTML>
  • Grabalo en TuCarpeta con el nombre Prog065.htm y ejecutalo varias veces, observando detenidamente lo que sucede.
  • Estudio del Prog065.htm
En principio el fichero anterior es una pagina web, que no tiene nada que ver con JavaScript (no aparecen los tags <SCRIPT Lan...> </SCRIPT>)
Pero en el segundo cuadro de texto:
<INPUT TYPE='text' onBlur='alert('vale');'>
tenemos un pequeño programa JavaScript (una unica sentencia), que se ejecutara al abandonar el foco (onBlur) el cuadro de texto.
  • Si observamos los tres cuadros de texto, vemos que los parametros SIZE, NAME, VALUE, onBlur son opcionales. De hecho un cuadro de texto es el tag: <INPUT TYPE="text">.
  • El primer cuadro de texto tiene el tamaño de 50 caracteres (SIZE="50"). Si no especificamos el tamaño (SIZE) en un cuadro de texto, por defecto es de 20 caracteres..
  • El parametro NAME de un cuadro de texto, solo tiene sentido en el caso de un programa JavaScript, para poder referirnos a el (como veremos en los siguientes ejercicios).
  • El parametro VALUE nos permite referirnos al "valor" o contenido de un determinado cuadro de texto.
Creacion de un programa JavaScript "visual"
Vamos a hacer nuestro primer programa "visual"...
El proceso a seguir es:
1º) Incluir en la cabecera (HEAD) de la pagina HTML, el programa JavaScript en forma de funcion.
Por ejemplo: Programa que calcula el area de un triangulo
<HEAD>
<SCRIPT LANGUAGE='JavaScript'>
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
2º) "Programar" en la pagina web, los elementos visuales que necesitamos para nuestro programa:
  • Un cuadro de texto, para "recoger" la base del triangulo:
Base del triangulo: <INPUT TYPE='text' SIZE='5' NAME='bas'>
  • Un cuadro de texto, para "recoger" la altura del triangulo:
Altura del triangulo: <INPUT TYPE='text' SIZE='5' NAME='alt' >
  • Un cuadro de texto, donde aparecera el resultado del programa, es decir el area del triangulo:
area del triangulo: <INPUT TYPE='text' SIZE='10' NAME='result'>
3º) "Programar" el enlace entre JavaScript y HTML, es decir, la ejecucion del programa.
De momento solo sabemos hacerlo utilizando el evento onBlur de un cuadro de texto. Es decir hemos de modificar el segundo cuadro de texto de forma que nos quede:
Altura del triangulo: <INPUT TYPE='text' SIZE='5' NAME='alt' onBlur= 'document.forms[0].result.value =a(document.forms[0].bas.value,this.value);'>
Observa:
  • Para referirnos al contenido (valor) del cuadro de texto de nombre "bas", utilizamos la sintaxis: document.forms[0].bas.value
  • Para referirnos al contenido del cuadro activo, utilizamos la sintaxis: this.value
Vamos a ver si funciona:
  • Escribe el siguiente programa:
<HTML>
<!-- PROG066.HTM //-->
<HEAD>
<SCRIPT LANGUAGE='JavaScript'>
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<BR>
Base: <INPUT TYPE='text' SIZE='5' NAME='bas'>
<BR>
Altura: <INPUT TYPE='text' SIZE='5' NAME='alt' onBlur='document.forms[0].result.value=a(document.forms[0].bas.value,this.value);'>
<BR>
<BR>
area: <INPUT TYPE='text' SIZE='10' NAME='result'>
</FORM>
</BODY>
</HTML>
  • Grabalo en TuCarpeta con el nombre Prog066.htm y ejecutalo varias veces.
4º) Para acabar, es conveniente mejorar el diseño visual del programa: titulos, colores, etc.
  • A partir del programa anterior consigue el siguiente fichero:
<HTML>
<!-- PROG067.HTM //-->
<HEAD>
<SCRIPT LANGUAGE='JavaScript'>
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR='#0000FF'>
<FONT COLOR='#FF0000'>
<h1><P ALIGN='CENTER'>Calculo del area de un Triangulo</h1>
<HR>
</FONT>
<FONT COLOR='#FFFFFF'><P>
Escribe el los siguientes cuadros la base y la altura del triangulo.
Para pasar de un cuadro al siguiente pulsa la tecla de tabulacion
[Tab]. Al situarte en el ultimo cuadro, automaticamente aparecera
el valor del area.
Para escribir un dato en decimales, debes utilizar el 'punto decimal',
no la coma.
<BR>
<HR>
<FONT COLOR='YELLOW'>
<FORM>
<P ALIGN='CENTER'>
Base del triangulo: <INPUT TYPE='text' SIZE='5' NAME='bas'>
<BR>
Altura del triangulo: <INPUT TYPE='text' SIZE='5' NAME='alt' onBlur='document.forms[0].result.value=a(document.forms[0].bas.value,this.value);'>
<BR>
<BR><HR><P ALIGN='CENTER'><B>
area del triangulo: <INPUT TYPE='text' SIZE='10' NAME='result'>
<HR>
</FORM>
</FONT></B>
</BODY>
</HTML>
  • Grabalo con el nombre Prog067.htm y ejecutalo varias veces.
  • Observa que en lugar de utilizar un codigo de color, tambien podemos utilizar el nombre del color en ingles.
Anterior: escribiendo en el navegador
Siguiente: javascript y botones