Tutorial JavaScript


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>>>


¡Visita también estos sitios interesantes!

Sitio alojado en Yaia.com