Document Objecto Model

Document Object Model (V)
Trabajando con Formularios. Objeto form

     Con este objeto podemos validar formularios, osea, ver que se han introducido los datos que queríamos. Por ejemplo suponga un formulario con la edad el nombre y la dirección de e-mail, podríamos comprobar justo antes de mandarlo si el campo nombre tiene careacteres, si el de la edad tiene un número, y si el de la dirección de e-mail tiene una arroba. En caso de que alguna de las condiciones fallara se avisaría al usuario y no se mandaría el formulario. Hay dos formas de acceder a un formulario:

     document.formName.propiedad[ó metodo()]
     document.form[i].propiedad[ó metodo()]

     Veamos un ejemplo en el que se comprueba que la dirección de email tiene una arroba. Parra ello usamos el evento onSumit, Escribiendo onSumit="return validar(this)" lo que hacemos es llamar a la función validar y le pasamor por parametro "this", osea el propio objeto en el que estamos (en este caso el formulario). Luego en la función accedemos al campo email, y de este a su propiedad value, que contiene el valor en ese momento.
<HTML>
<HEAD>
  <TITLE>Ejemplo de formularios</TITLE> 
  <SCRIPT>
    function validar(formulario) {
       if (formulario.email.value.indexOf("@")!=-1)
          return true;
       else {
          return false;
       }
    }
  </SCRIPT>
</HEAD>
<BODY>
<FORM NAME="PrimerFormulario" METHOD="POST" ACTION="email.asp"
 onSubmit="return validar(this)">
direccion de e-mail: <INPUT NAME="email" TYPE="text"><BR>
<INPUT TYPE="submit" VALUE="Mandar">
</FORM>
</BODY>
</HTML>
Si la función validar devuelve true se mandará el formulario, pero por el contrario si devuelve false no se mandará nada.

Resumimos ahora en una tabla los valores que pueden coger los distintos elementos de un formulario:

Elemento Propiedades Descriptción

Hidden, Password, Text, FileUpload value Texto introducido por el usuario.

Checkbox, Radio checked true si esta activado el boton, false sino

Option selected true si ls opcion esta seleccionada

PROPIEDADES

action--> Nombre del CGI, o programa al que se mande el formulario.

elements[i]--> Array que referencia a cada uno de los elementos que tiene el formulario (text, radio, list, ...) ej: document.form[0].element[2].value="Este es el tercer elemento"

name-->Nombre del formulario, <form NAME="NombreFormulario" action=...>

METODOS

reset()--> Resetea todos los campos y los deja con su estado por defecto.

submit()--> Manda el formulario, podemos utilizar este método para mandar varios formularios, o mandarlo cuando suceda algun evento como pulsar sobre una imagen.
Objeto Image

     Con este tipo de objetos referenciamos imágenes, y podemos asi cambiarlas dinámincamente, obtener su posición, tamaño, etc. Además en los nuevos navegadores podemos cambiar algunas propiedades como la posición dinámicamente. Por el momento supondremos que esto último no es posible, puesto que las versiones 4.x de los navegadores no lo soportan y estas, están aún muy estendidas.

PROPIEDADES

     Las siguiente solo se pueden consultar, pero no cambiar dinámicamente:

border-->Contiene el borde de la imagen
height-->Altura de la imagen
name-->Nombre del objeto imagen
width-->anchura de la imagen

     Las siguiente si puede cambiarse dinámicamente

src-->Contiene la dirección el archivo de la imagen.

     Podemos crear objetos de tipo Image para hacer una "precarga de imágenes", así estas ya estarán cargadas, y cuando queramos cambiar una por otra no será necesario que el navegador vuelva a conectar con el servidor para traerse la nueva imagen.

     supongamos que al cargar una página ponemos lo siguiente:

<script>
var imagenGato= new Image();
imagenGato.src="gato.gif"
</script>

... ... ...

<img src="perro.gif" name="miImagen">

     Para cambiar la imagen perro por la imagen del gato bastaría con hacer:

document.miImagen.src=imagenGato.src

     Tambien se pueden crear arrays de objetos Image, así será más facil trabajar con estos.Ej:

var imagenes=new array(5); for(i=0;i<5;i++) imagenes[i]=new Image();

INICIO. MAPA-WEB . CREDITOS . LINKS . SUGERENCIAS

.JavaScriptYA 2001.

Elemento	Propiedades	Descriptción
Hidden, Password, Text, FileUpload	value	Texto introducido por el usuario.
Checkbox, Radio	checked	true si esta activado el boton, false sino
Option	selected	true si ls opcion esta seleccionada