Los llamados tags "formulario": <FORM> </FORM> nos permiten incluir en una página web, otros elementos visuales como "cuadros de texto" y "botones", de gran importancia en la programación 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 él se ejecuta el programa JavaScript.
<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>
En principio el fichero anterior es una página 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 única sentencia), que se ejecutará al abandonar el foco (onBlur) el cuadro de texto.
Creación 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 página HTML, el programa JavaScript en forma de función.
Por ejemplo: Programa que calcula el área de un triángulo
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
2º) "Programar" en la página web, los elementos visuales que necesitamos para nuestro programa:
Base del triángulo: <INPUT TYPE="text" SIZE="5" NAME="bas">
Altura del triángulo: <INPUT TYPE="text" SIZE="5" NAME="alt" >
Área del triángulo: <INPUT TYPE="text" SIZE="10" NAME="result">
3º) "Programar" el enlace entre JavaScript y HTML, es decir, la ejecución del programa.
De momento sólo 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 triángulo: <INPUT TYPE="text" SIZE="5" NAME="alt" onBlur= "document.forms[0].result.value =a(document.forms[0].bas.value,this.value);">
Observa:
Vamos a ver si funciona:
<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>
Área: <INPUT TYPE="text" SIZE="10" NAME="result">
</FORM>
</BODY>
</HTML>
4º) Para acabar, es conveniente mejorar el diseño visual del programa: títulos, colores, etc.
<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 Área de un Triángulo</H1>
<HR>
</FONT>
<FONT COLOR="#FFFFFF"><P>
Escribe el los siguientes cuadros la base y la altura del triángulo.
Para pasar de un cuadro al siguiente pulsa la tecla de tabulación
[Tab]. Al situarte en el último cuadro, automáticamente aparecerá
el valor del área.
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 triángulo: <INPUT TYPE="text" SIZE="5" NAME="bas">
<BR>
Altura del triángulo: <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>
Área del triángulo: <INPUT TYPE="text" SIZE="10" NAME="result">
<HR>
</FORM>
</FONT></B>
</BODY>
</HTML>
|
Anterior: escribiendo en el navegador |
Siguiente: javascript y botones |
| articulos relacionados |
apuntes
autoayuda