Introducción a formularios
Lección
5
Ahora
que maneja lo básico de la programación JavaScript,
es tiempo de volver Modelo de Objeto de Documento (DOM).
Ya hemos visto que la jerarquía del DOM comienza con
un objeto Window. Dentro de cada objeto Window tenemos un objeto
Document. Ahora veremos al objeto Document
y veremos como se puede usar para obtener toda clase de información
de los usuarios y dinámicamente presentar nueva información.
Ya
hemos tenido una buena visión de las propiedades del
objeto Document, el arreglo Images.
Si recuerda en la lección 4, la primer imagen en un documento
se puede modificar cambiando su propiedad src. Por ejemplo:
window.document.images[0].src='nuevo_grafico.gif';
cambiará
la primer imagen en un documento al GIF llamado nuevo_gráfico.gif.
Como ya puede haber adivinado, cada Image en
el arreglo Image se encuentra dentro de un objeto en el DOM.
Esto es porque images[0] del arreglo Images
utiliza su propiedad src para modificar esta propiedad.
Toda la sentencia de arriba sería "obtenga la propiedad
del documento de esta ventana, obtenga la primer imagen del
arreglo de imagen del documento y cambia la propiedad origen
(fuente) a nuevo_grafico.gif".
El
objeto Image tiene muchas otras propiedades interesantes.
Nos
focalizaremos ahora en los formularios.
Introducción
a formularios
Los
formularios son parte de la especificación HTML 1.0.
Muchas persona no conocen sobre ellos, sin embargo, debido a
que existe un mal concepto son sólo útiles si
tiene detrás de ellos ejecución del lado del servidor
(CGI o PHP). JavaScript puede agregar mucha funcionalidad a
los formularios.
La
primer cosa que necesita saber sobre formularios y JavaScript,
es que los formularios como la imágenes, se almacenan
en un arreglo de objetos. De la misma forma que se puede referir
a la primer imagen sobre una página llamando a window.document.images[0],
se puede referir al primer formulario de una página window.document.forms[0].
Similarmente, de la forma que puede nombrar imágenes
puede nombrar formularios...
Formulario
|
...
está escrito como,
<form
name="form_1">
<input
type="text" name="texto_1" size="40"
value="Linux
es estable!">
</form>
Puede
referirse al formulario de cualquiera de las dos maneras:
var
el_form = window.document.forms[0];
var el_mismo_form = window.document.form_1;
Si
bien referirse a formularios suele ser útil, lo más
a menudo es que quiera referirse a los elementos dentro del
formulario tal como campos de texto. Veamos un ejemplo:
Manejando
el valor de un campo de texto
Ejemplo26_0.html
Esta
magia se puede realizar porque tenemos guardado los valores
y podemos cambiar el valor del campo de texto. El formulario
es:
<form
name="form_uno">
<input
type="text" name="texto_uno" value="¿Estás
feliz?">
</form>
Los
enlaces que cambian el texto son:
<a
href="#" onMouseOver="window.document.form_uno.texto_uno.value='Chocho!';">-
Si -</a>
<a
href="#" onMouseOver="window.document.form_uno.texto_uno.value='Triste!';">-
No -</a>
El
segundo caso son muy similares, en lugar de trabajar con un
campo de texto se trabaja con un área de texto, pero
en sí es exactamente lo mismo:
<form name="form_dos">
<textarea
name="area_texto" rows=10 cols=40>
Mouse
over below to see the first verse of
The
Webmonkey song, adapted from
"I
Wanna Be Like You" (The Monkey Song)
from
Walt Disney's <CITE>The Jungle Book</CITE>
written
by Richard M. Sherman and Robert B. Sherman
</textarea>
</form>
Note
que el formulario tiene un nombre, form_dos, y el área
de texto tiene un nombre también area_texto.
Los
enlaces básicamente hace lo mismo que el ejemplo anterior.
<a
href="#" onClick="return false;" onMouseOver="window.document.form_dos.area_texto.value=first_part;">Part
1</a>
<a
href="#" onClick="return false;" onMouseOver="window.document.form_dos.area_texto.value=second_part;">Part
2</a>
La única diferencia es que en lugar de asignar una tira
al valor del área de texto, asigna variables que se definieron
en el encabezado.
<<<Anterior
- Siguiente>>>
