Bienvenidos a este mini-vídeo
cuyo título es "JavaScript: formularios".
Mi nombre es Emilio Letón
y pertenezco al departamento de Inteligencia Artificial de la UNED.
En este mini-vídeo
se trata de conocer la sintaxis básica del lenguaje JavaScript,
para asociar un pequeño programa a un formulario HTML,
en el que va a haber un botón que ejecute dicho programa.
Vamos a imaginar que tenemos un pequeño programa JavaScript
escrito dentro de una zona script,
dentro de la zona head de una página HTML.
Este programa calcula las soluciones x1 y x2
de una ecuación de segundo grado,
determinada por los coeficientes a, b y c,
que en este caso valen 1, -1 y -2, respectivamente.
Por eso tenemos las líneas var a=1; var b=-1; var c=-2;
La línea var d=Math.pow(b,2)-4*a*c
La línea if (d>=0) {
La línea var x1=(-b+Math.sqrt(d))/(2*a)
La línea var x2=(-b-Math.sqrt(d))/(2*a)
La línea document.write ('Soluciones: '+x1+' y '+x2)
Y la línea }
En este momento es bueno parar el mini-vídeo,
teclear este código en una zona script
dentro de una zona head de una estructura HTML,
grabarlo en un archivo con extensión htm o html
y abrirlo con un navegador, para visualizar lo realizado.
Ahora se trata
de mejorar el código JavaScript de la transparencia anterior.
Para ello vamos a crear una zona donde haya unas cajas
donde el usuario introduzca los coeficientes a, b y c,
otras cajas donde el programa
rellene los valores de las soluciones x1 y x2,
y además haya un botón que al activarlo realice dicho proceso.
El primer paso es crear esa zona que recibe el nombre de formulario.
Esto se hace dentro de la zona body
con la etiqueta de inicio form dada por
y con la etiqueta de cierre form dada por
El atributo name="fEc2" da al formulario el nombre fEc2.
La f inicial la hemos puesto
para que recordemos que es un nombre de formulario.
El resto Ec2 es para recordar ecuación de segundo grado.
Ahora vamos a crear elementos dentro de la zona del formulario.
El primer elemento va a ser una caja
para que el usuario introduzca el valor de a.
Antes de crear la caja ponemos el literal Valor a:
para saber que en la caja que definamos a su lado
habrá que introducir el valor de a.
La caja se crea con
<input type="text" name="fa" size="3">
Con ello se está creando una caja de tipo texto,
cuyo nombre es fa
para indicar que es el lugar del formulario (por eso la f inicial)
donde el usuario escribirá el valor de a que desee.
El atributo size hace referencia al tamaño de la caja.
Ahora habría que escribir una línea análoga para b
y otra análoga para c.
Eso se deja como ejercicio.
El segundo elemento que vamos a crear en el formulario
es una caja para que el programa rellene el valor de x1.
Antes de crear la caja ponemos el literal Solución x1:
para saber que en la caja que definamos a su lado
el programa rellenará el valor de x1.
La caja se crea de forma análoga a la transparencia anterior:
<input type="text" name="fx1" size="3">
Con ello se está creando una caja de tipo texto,
cuyo nombre es fx1
para indicar que es el lugar del formulario (por eso la f inicial)
donde el programa escribirá el valor x1 que calcule.
Ahora habría que escribir una línea análoga para x2.
Esto, también, se deja como ejercicio.
El tercer elemento que vamos a crear en el formulario es un botón
al que se le asociará el código JavaScript que calcula x1 y x2.
Esto se hace con <input type="button"
value="Calcular" onclick="funCalcular()">
Con ello se crea un botón
cuyo nombre visible dentro del botón es Calcular
y cuya intención es que cuando se presione (onclick)
se desencadene una función que habrá que definir,
pero que la hemos llamado, de momento, funCalcular.
En este momento es bueno volver a parar el mini-vídeo,
y grabar el código escrito hasta ahora
en un archivo con extensión htm o html
y abrirlo con un navegador, para visualizar lo realizado.
Es conveniente observar
que al presionar el botón Calcular no sucede nada.
Eso es normal, porque todavía falta crear la función
que hemos llamado funCalcular.
El primer paso para crear la función funCalcular
es escribir function funCalcular ()
En la siguiente línea {
A continuación todas las líneas
del Código JavaScript del principio del mini-vídeo,
y en otra línea }
El segundo paso para seguir creando la función es,
dentro del código de la función,
enlazar el valor que escriba el usuario
en el formulario para el valor de a.
Eso se consigue sustituyendo var a=1;
por una línea que sea
var a=parseFloat (document.fEc2.fa.value)
de forma análoga se sustituye var b=-1;
por una línea del mismo estilo
y lo mismo se hace sustituyendo var c=-2, por otra línea análoga.
El tercer paso para seguir creando la función es,
dentro del código de la función,
enlazar el valor que calcule el programa
rellenando en el formulario la caja de x1.
Eso se consigue sustituyendo la línea de document.write
por una línea que sea document.fEc2.fx1.value=x1
De forma análoga se crea una nueva línea para el valor de x2.
En este momento es bueno volver a parar el mini-vídeo,
y grabar el código escrito hasta ahora
en un archivo con extensión htm o html
y abrirlo con un navegador, para visualizar lo realizado.
Es conveniente observar que ahora sí funciona el botón Calcular.
Para terminar vamos a ver
qué es lo que hemos visto en este mini-vídeo.
Intentad vosotros pararlo
y escribid en esta transparencia lo que hemos visto en él.
Yo voy a seguir, pero, repito, intentad pararlo y hacerlo vosotros.
Hemos visto cómo se crea un formulario.
Cómo se crean elementos de un formulario.
En especial, hemos creado un botón.
Y hemos definido una función JavaScript asociada a dicho botón.
Por último recordaos que es conveniente ver
la información complementaria en la web asociada a este mini-vídeo.