Your SlideShare is downloading. ×
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones

2,128

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,128
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
135
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Didier Fabián Granados Muñoz Sesión No. 3 – Formularios y Validaciones Agosto 19 de 2009
  • 2. Comando Descripción GET Solicita el recurso ubicado en la URL especificada y envía datos en la misma. HEAD Solicita el encabezado del recurso ubicado en la URL especificada. POST Envía datos al programa ubicado en la URL especificada, generalmente mediante formularios. PUT Envía datos a la URL especificada. DELETE Borra el recurso ubicado en la URL especificada.
  • 3. Los formularios son una utilidad necesaria para que los documentos descritos con HTML dispongan de un medio para que el lector o visitante pueda remitir información personalizada al servidor, creándose, de esta forma, un sistema completo de interacción con el mismo.
  • 4.  Un buen número de opciones…  Cajas de texto  Contraseñas  Campos ocultos  Casillas de verificación  Botones de selección  Botones  Imágenes  Áreas de texto  Listas
  • 5. Y ésta es la estructura básica de un documento HTML… <html> <head> Otras etiquetas... </head> Y en esta región <body> del documento Contenido de la página... HTML es que </body> debemos insertar el formulario. </html>
  • 6. <form action="acción" method="MétodoTransmisión"> Aquí van los objetos del Formulario </form>
  • 7. Elementos INPUT <input type="text|password|checkbox|radio|submit|reset|file| hidden|image" [id="identificador"] [size="tamaño"] [value="valor"] [checked="checked"] [maxlength="LongitudMáxima"] [name="NombreDeCampo"] [align="top|middle|bottom|left|right"] [src="UrlDeLaImagen"] />
  • 8. Elemento TEXTAREA <textarea name="nombre" [cols="columnas"] [rows="filas"] [align="alineación"]> Texto Inicial, no es necesario </textarea>
  • 9. Elemento SELECT (Listas) <select name="NombreLista" [size="valor"] [align="alineación"] [width="valor"] [height="valor"] [multiple="multiple"]> <option [selected="selected"]>Texto de la opción</option> ... </select>
  • 10.  Ya sabemos para qué sirve un formulario…  Ya sabemos que cada campo se comporta de manera similar o diferente según los atributos especificados y sus valores.  Ya sabemos que podemos enviar datos al servidor y las diferencias entre GET y POST…  Pero… ¿Cómo podemos garantizar un buen manejo del formulario?  No meter textos muy largos…  Que un campo específico sólo reciba números… o sólo letras…  Que no me pueda pasar de cierto valor…  Que se pueda deshabilitar o habilitar un campo, según sea el caso…  Que el formulario no envíe si alguna de las condiciones anteriores no se cumple…
  • 11.  Es esencialmente una interfaz de programación de aplicaciones Web que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos.  A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se diseñó principalmente.
  • 12.  Primera vez: Navegador Netscape 2.0  Modelo básico o el DOM de Nivel 0.  IE 3.0 fue el primer navegador de Microsoft que utilizó este nivel.  Netscape 3.0 empezó a utilizar rollovers.  Microsoft empezó a usar rollovers en IE 4.0.  Netscape 4.0 agregó la capacidad de detectar eventos ocurridos en el ratón y el teclado.  En IE 4.0 todos los elementos de una página web se empezaron a considerar objetos computacionales con la capacidad de ser modificados.
  • 13.  Octubre de 1998: DOM Nivel 1.  Por diferencias en estos navegadores.  Se consideraron las características y manipulación de todos los elementos existentes en los archivos HTML y XML.  Noviembre de 2000: DOM Nivel 2.  Se incluyó la manipulación de eventos en el navegador, la capacidad de interacción con CSS, y la manipulación de partes del texto en las páginas de la web.  Abril de 2004: DOM Nivel 3.  Utiliza la DTD (definición del tipo de documento) y la validación de documentos.
  • 14.  Guerra entre navegadores.  Netscape Navigator (y/o Mozilla Firefox) vs Internet Explorer…  Navegadores de otras compañías...  Crean graves problemas para los programadores de páginas web.  Los objetos no se comportan de la misma forma, lo que obliga con frecuencia a programar las páginas en más de una versión, una para el Netscape, o Firefox, otra para Internet Explorer, otra para Safari, Opera, etc.  En suma, no todas las versiones de un mismo navegador se comportan igual.
  • 15.  El W3C, el consorcio encargado de definir los estándares de la web, decidió crear un modelo de objetos único, el DOM, para que todos los fabricantes pudieran adoptarlo, facilitando la compatibilidad plena entre ellos.  No obstante, Microsoft ha añadido su propia extensión al DOM, creando problemas de interoperabilidad para los navegadores web.  Esto cambiará sólo si nuevos navegadores que respeten los estándares ganan una cuota de mercado significativa en la web, de forma que el uso de extensiones no estándares se convierta en un problema comercial para los autores de los sitios web que las usen.
  • 16.  DOM según la W3C  http://www.w3.org/DOM/  DOM en Mozilla  http://www.mozilla.org/docs/dom/domref/  Especificación DOM Nivel 1  http://html.conclase.net/w3c/dom1-es/cover.html
  • 17.  Los formularios de una determinada página web forman una colección de objetos: forms. Esta colección está incluida en el objeto document, por lo que podemos referirnos a un determinado formulario de tres formas: 1. Por su índice en la colección forms, es decir, el índice que indica su posición en la página. En este caso, document.forms[0], nombraría el primer formulario de la página. 2. Indizado por su nombre (dado por el atributo name de la directiva <form>). Así, document.forms['forma1'] se referirá al formulario iniciado por <form name="forma1" ...> 3. Nombrándolo directamente por su identificador único, dado por el atributo id de la directiva <form>. De este modo, cuando se dice document.FormularioPropio, se refiere al formulario identificado por <form name="forma2" id="FormularioPropio" ...>.
  • 18. window window.history history window.document document document.forms[0]
  • 19. <input type="text|password|checkbox|radio|submit|reset|file| hidden|image" [id="identificador"] [size="tamaño"] [value="valor"] [checked="checked"] [maxlength="LongitudMáxima"] [name="NombreDeCampo"] [align="top|middle|bottom|left|right"] [src="UrlDeLaImagen"] />  Por muy opcionales que sean, el papel exacto que lo atributos name y id juegan en la nominación de los formularios en la colección forms depende del navegador y entorno
  • 20. Los elementos  Dependiendo de cada objeto form depende una colección de objetos: element, que contiene los objetos que representan cada uno de los elementos que contiene el formulario.  Los objetos de estas colecciones se referencian de igual forma que los formularios, es decir:  A través de un índice que indica su posición en el formulario.  Mediante la etiqueta name o el atributo id.  Pero siempre se ha de tener en cuenta que cada formulario contiene una colección de elementos y que los mismos se referencias o indizan de acuerdo a la mismas.
  • 21. Los elementos Así:  document.forms[2].element[3], representa el cuarto elemento del tercer formulario de la página.  document.forms[´forma1'].EntradaTexto representa un elemento con el atributo id="EntradaTexto" en el formulario <form name="forma1" ...>.
  • 22.  Los objetos form como los objetos element tienen una serie de propiedades que los definen y que, así mismo, establezcan su comportamiento.  Algunas de esas propiedades serán de lectura y escritura y los procedimientos JavaScript podrán leer su valor o cambiarlo, mientras que en otros casos solo podrán leer el valor sin posibilidad de actualizarlo.  Los objetos responderán a una serie de métodos que permitirán actuar sobre los mismos y podrán responder a unos eventos que permitirán definir el comportamiento de los mismos frente a actuaciones de entorno y del usuario.
  • 23.  Es un lenguaje de programación interpretado, es decir, que no requiere compilación.  Es utilizado principalmente en páginas web.  No confundir, no tiene nada que ver con Java… pero tiene una sintaxis semejante, aunque también se asemeja al lenguaje C.  Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web. Por tanto, es una tecnología del lado del cliente.  Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del DOM.
  • 24.  Inicialmente lo llamaron Mocha y más tarde LiveScript pero fue rebautizado como JavaScript en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995.  En 1997 los autores propusieron JavaScript para que fuera adoptado como estándar de la European Computer Manufacturers' Association ECMA, que a pesar de su nombre no es europeo sino internacional, con sede en Ginebra. En junio de 1997 fue adoptado como un estándar ECMA, con el nombre de ECMAScript. Poco después también lo fue como un estándar ISO.  JScript es la implementación de ECMAScript de Microsoft, muy similar al JavaScript de Netscape, pero con ciertas diferencias en el modelo de objetos del navegador que hacen a ambas versiones con frecuencia incompatibles.
  • 25.  Para evitar estas incompatibilidades, la W3C (World Wide Web Consortium) diseñó el estándar DOM…  Lo incorporan los navegadores Konqueror, las versiones 6 de Internet Explorer (en teoría) y Netscape Navigator, Opera 7, y Mozilla desde su primera versión.
  • 26. Referencia  Javascript se puede incluir en cualquier documento y es compatible con cualquier sistema operativo, o todo aquel que termine traduciéndose en HTML en el navegador del cliente.  Bastará con escribir en el documento HTML: <script type="text/javascript" src="[URL]"> </script>
  • 27. Referencia  También es posible incluir código directamente en el documento entre los elementos <script> y </script>, aunque no se recomienda por ser una práctica invasiva: <script type="text/javascript"> <!-- // código JavaScript --> </script>
  • 28.  Los objetos responderán a una serie de métodos que permitirán actuar sobre los mismos y podrán responder a unos eventos que permitirán definir el comportamiento de los mismos frente a actuaciones de entorno y del usuario:  Propiedades como value, size, selected, checked...  Métodos como click, scrollIntoView, focus, ...  Manejadores de eventos como onClick, onChange, onMouseOver...  A los que se añadirán las propiedades y métodos propios de las colecciones: add, remove, length...
  • 29.  No importa su tipo.  Se puede acceder a ellos por su nombre: <input type="text" name="texto" />  document.forms[0].texto;  O de manera más global, por su id, ya que este es único en el documento HTML: <input type="text" id="campoTexto" />  document.getElementById("texto");
  • 30. Manejador Descripción onmouseover Cuando se pone el cursor sobre el elemento. onmouseout Cuando se quita el cursor del elemento. onfocus Cuando el cursor está dentro de un campo o lo mantiene activo. onblur Cuando el cursor sale del campo o deja de seleccionarlo. onchange Cuando hay algún cambio en el valor del campo. onmousemove Cuando el mouse se está moviendo sobre el elemento. onsubmit Cuando se envía un formulario. onkeypress Cuando se presiona una tecla. onkeyup Cuando una tecla deja de ser presionada. onkeydown Cuando la tecla está siendo presionada. onload Cuando carga la página. onclick Cuando se hace clic sobre el objeto. ondblclick Cuando se hace doble clic sobre el objeto.
  • 31.  La propiedad value es la más utilizada en su manejo, tanto para leer el valor en los mismos contenido o actualizarle dinámicamente. <input type="text" name="texto" id="campoTexto" size="20" value="Texto" /> document.forms[0].texto.value document.getElementById("campoTexto").value Texto  Se ha de tener en cuenta que el valor obtenido a partir de la propiedad value es un string y su conversión a valor numérico, de ser necesaria, se ha de realizar llamando al método parseInt() de JavaScript, u otro similar.
  • 32.  La validación del contenido de los campos de texto y contraseña se puede realizar en tres niveles y su correcto uso facilitará en gran manera la utilización de los formularios web y aumentará la eficacia de los mismos. Las tres formas de validación son:  A nivel de entrada Capturando las teclas pulsadas por el usuario.  A nivel de salida Cuando el usuario abandona el campo (pierde el foco) por activar otro campo.  A nivel de envío Antes de proceder a la remisión de contenidos al receptor de los datos del formulario.  Ver ejemplos 1 y 2.
  • 33.  Al igual que el resto de controles de los formularios es posible referirse a las mismas de dos formas: 1. A través de la colección elements: document.forms[0].elements[1].checked = true; 2. O con un nombre propio establecido con el atributo name de la directiva input: document.forms[0].elCheckbox.checked = true;  En cualquier caso, el manejo de estos controles se reduce al manejo de la propiedad checked, la cual contiene un valor true o false dependiendo de si la casilla está activada o apagada. Esta propiedad es de lectura y escritura, con lo que es posible cambiar el estado del control de forma dinámica.  Ver ejemplo 3.
  • 34.  Los botones de radio son tratados como una colección cuando tienen el mismo nombre.  Es posible referirse a ellos de las siguientes dos formas: 1. A través de la colección elements: document.forms[0].elements[1][2].checked = true; 2. O con un nombre propio establecido con el atributo name de la directiva input: document.forms[0].elRadio[2].checked = true;  Aquí también existe el manejo de la propiedad checked, la cual contiene un valor true o false dependiendo de si el botón está activado o apagado, pero sólo un botón del grupo puede tener dicha característica en un tiempo determinado.  Ver ejemplo 4.
  • 35.  Cada lista no vacía de un formulario tiene una colección de opciones, llamada options, que identifica a cada uno de los valores dispuestos en la misma, y cada uno de los elementos de ésta colección disponen de una propiedad que es reflejo del texto y/o valor que esta en la directiva <option>.  Si el formulario tiene por nombre forma, y la lista se llama lista, document.forma.lista.options[0].text identifica el texto que tiene la primera opción de dicha lista.  La propiedad selectedIndex de las listas permite conocer cual es elemento seleccionado en cada momento, esta propiedad toma el valor, entre 0 y document.forma.lista.options.length - 1, que nos servirá como índice para trabajar con la colección options.  Ver ejemplo 5.
  • 36.  La principal diferencia con las listas de selección única radica en el hecho de que la propiedad selectedIndex de la lista no es muy utilizable, ya que solo retornaría el índice del primer valor seleccionado.  Si se quiere conocer los índices de todas las opciones seleccionadas será necesario recorrer la colección options (de manera similar a los botones de radio, solo que en este caso sí podemos tener más de una opción a la vez) y comprobar uno por uno su estado consultando la propiedad selected.  Ver ejemplo 6.
  • 37.  En los formularios puede existir un botón que permite el envio de los contenidos del mismo al destino fijado en el atributo action de la directiva <form>.  Este botón es un campo input del tipo submit.  Generalmente su valor es "Enviar“.  La pulsación de este botón produce el envío del formulario, y al mismo tiempo se produce un evento onsubmit, que puede ser tratado con un manejador de evento colocado en la directiva <form>.  Las expresiones JavaScript colocadas en el manejador del evento onsubmit son ejecutadas antes de proceder al envío. Si el resultado de dichas expresiones, como el valor retornado por una función, es true, el envío se produce sin más, pero si ese valor retornado es false, el envío se cancela.  Ver ejemplo 7.
  • 38. La verificación de los datos introducidos por el usuario en el lado del cliente, en la propia página HTML en la que figura el formulario tiene importantes ventajas:  Se disminuye el trafico de la red, ya que los errores no significan la transmisión de información a través de la misma.  Al poder validar campo a campo el usuario puede ver la consecuencia de sus acciones instantáneamente y la validación se hace más ágil  El servidor es descargado de ciertos trabajos, lo cual en servidores con gran carga de atención a muchos clientes puede ser de gran interés.  La validación puede tener en cuenta el entorno del cliente.
  • 39. Este proceso tiene algunas desventajas que es necesario tener muy en cuenta:  Si la validación implica una gran cantidad de código, la transmisión de la página puede hacerse difícil. Puede pensarse en la utilización de ficheros de código (*.js) si el mismo es compartido por varios formularios.  No es posible el dialogo con bases de datos, ficheros y entorno del servidor. Por lo tanto una solución de compromiso en la que se considera validaciones elementales puede hacerse con scripts en la propia página para descargar el trafico de la red y el trabajo del servidor.
  • 40.  HTML - Formularios: Diálogo con el usuario  http://www.infor.uva.es/~jmrr/2007/TGP/DOC/TGP7DOC Formulario.htm

×