Sitio web del curso: http://idesweb.es/Aprender a manejar el DOM de una página web para manipular su contenido. Aprender a validar un formulario con el lenguaje de programación JavaScript y el empleo de expresiones regulares

Luján Mora, Sergio

Repositorio Institucional de la Universidad de Alicante

Introducción al desarrollo web (iDESWEB)Práctica 5: JavaScript: expresiones regulares y el Modelo de Objetos de Documento1. ObjetivosAprender a manejar el DOM de una página web para manipular su contenido.Aprender a validar un formulario con el lenguaje de programación JavaScript y el empleo de expre-siones regulares.2. Recursos¿Qué son las expresiones regulares? ¿Cómo se emplean con JavaScript?W3Schools1: cursos de aprendizaje y guías de referencia de diversas tecnologías empleadas en laprogramación web. Incluye un tutorial y temas avanzados sobre JavaScript, expresiones regularescon JavaScript y DOM.Expresión regular2: definición de las expresiones regulares según la Wikipedia.JavaScript Regular Expressions3: resumen de la sintaxis de las expresiones regulares en JavaS-cript.Programmer’s Guide to Regular Expressions4: tutorial sobre las expresiones regulares enJavaScript.JavaScript RegExp Example: Regular Expression Tester5: permite comprobar el funciona-miento de una expresión regular en JavaScript sin tener que programar.Regular Expressions Cheat Sheet6: resumen en una sola cara de lo más importante de lasexpresiones regulares.¿Qué es el DOM?W3C Documento Object Model (DOM)7: especificación oficial del DOM según el W3C.Mozilla Developer Center Gecko DOM Reference8: guía de referencia de los objetos delDOM disponible en el motor Gecko empleado por varios navegadores web como Mozilla Firefox.Support for DOM2 Core and XML modules in Opera9 y DOM 2 HTML Objectssupported in Opera10: objetos, propiedades y métodos del DOM que admite el navegador Opera.¿Cómo puedo explorar el DOM de una página web?DOM Inspector11: permite explorar y editar el DOM de una página web.1http://www.w3schools.com2http://es.wikipedia.org/wiki/Expresión_regular3http://www.visibone.com/regular-expressions/4http://www.javascriptkit.com/javatutors/redev.shtml5http://www.regular-expressions.info/javascriptexample.html6http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/7http://www.w3.org/DOM/8http://developer.mozilla.org/en/Gecko_DOM_Reference9http://www.opera.com/docs/specs/js/ecma/dom/index.dml10http://www.opera.com/docs/specs/js/ecma/dom/html/index.dml11http://developer.mozilla.org/en/DOM_Inspector13. ¿Qué tengo que hacer?En esta práctica tienes que emplear las expresiones regulares de JavaScript para validar el formulario deregistro como nuevo usuario que has realizado en las prácticas anteriores (sustituye el código de validaciónimplementado en la práctica anterior). En concreto, tienes que programar las siguientes restricciones:Página con el formulario de registro como nuevo usuario Contiene un formulario con los datosnecesarios para registrarse (nombre de usuario, contraseña, repetir contraseña, dirección de email,sexo, fecha de nacimiento, ciudad y país de residencia, foto). Antes de enviar el formulario, debesrealizar las siguientes comprobaciones:nombre de usuario: sólo puede contener letras del alfabeto inglés (en mayúsculas y minús-culas) y números; longitud mínima 3 caracteres y máxima 15.contraseña: sólo puede contener letras del alfabeto inglés (en mayúsculas y minúsculas), nú-meros y el subrayado; al menos debe contener una letra en mayúsculas, una letra en minúsculasy un número; longitud mínima 6 caracteres y máxima 15.repetir contraseña: su valor debe coincidir con el escrito en el campo contraseña.dirección de email: no puede estar vacío, hay que comprobar que cumple el patrón deuna dirección de email (compuesto de cualquier carácter alfanumérico del alfabeto inglés, elsubrayado, el guión y el punto; no permitir dominios principales de menos de 2 caracteres ymás de 4 caracteres).sexo: se debe elegir un valor.fecha de nacimiento: comprobar que es una fecha válida.El resto de campos no indicados se pueden quedar vacíos.Además, tienes que permitir que el usuario pueda ordenar, de forma ascendente y descendente, ellistado resultado de una búsqueda de fotos por los campos título, fecha y país. El proceso de ordenaciónse tiene que realizar en la misma página mediante JavaScript, sin recargarla.4. ¿Cómo lo hago?Una expresión regular es un patrón que define un conjunto de cadenas sin enumerar todos sus elemen-tos. Una expresión regular está formada de caracteres y metacaracteres que tienen una función definida.La principal utilidad de las expresiones regulares es la de describir un conjunto de cadenas, lo que resultade utilidad en editores de texto y aplicaciones para buscar y manipular texto. Además, otro uso es lavalidación de un formato específico en una cadena de caracteres dada, como por ejemplo fechas, correoselectrónicos o identificadores.En JavaScript existen dos formas de definir una expresión regular: mediante una cadena literal ymediante el constructor de objeto RegExp. Una expresión regular se puede aplicar a diferentes cadenasmediante expReg.test(cadena), que devuelve true si cadena cumple expReg y false en caso contrario.Por ejemplo, en el siguiente código se comprueba si el usuario ha escrito correctamente una matrículade automóvil que debe seguir el patrón código del país (1 o 2 letras), un espacio en blanco, numeración (4dígitos), un espacio en blanco y letras (3 letras, empezando en BBB y acabando en ZZZ, sin las vocales):<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Validación con expresión regular</title><script type="text/javascript">function literal() {var m = document.getElementById("matricula").value;var expreg = /^[A-Z]{1,2}\s\d{4}\s([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]){3}$/;if(expreg.test(m))2alert("La matrícula es correcta");elsealert("La matrícula NO es correcta");}function objeto() {var m = document.getElementById("matricula").value;var expreg = new RegExp("^[A-Z]{1,2}\\s\\d{4}\\s([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]){3}$");if(expreg.test(m))alert("La matrícula es correcta");elsealert("La matrícula NO es correcta");}</script></head><body><form id="miForm" action="" method="get"><p>Matrícula: <input type="text" id="matricula" /><br /><input type="button" value="Literal" onclick="literal()" /><input type="button" value="Objeto" onclick="objeto()" /></p></form></body></html>Al usar la expresión regular con el objeto RegExp, como se escribe dentro de una cadena es necesarioescribir dos barras invertidas \\ para representar una barra invertida, ya que el carácter barra invertidase emplea para escapar los caracteres especiales. Cuando se emplea mediante una cadena literal no sedebe escapar la barra invertida.¿Qué significa cada elemento de la expresión regular de este ejemplo?^: el emparejamiento se debe realizar desde el principio de la cadena.[A-Z]: cualquier carácter entre la A mayúscula y la Z mayúscula.{1,2}: uno o dos caracteres.\s: un espacio en blanco.\d: un dígito.{4}: cuatro dígitos.\s: un espacio en blanco.([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]): cualquier carácter entre la B mayúscula y la Z mayúscula,excepto las vocales.{3}: tres caracteres.$: el emparejamiento se debe realizar hasta el final de la cadena.Con esta expresión regular podemos tener matrículas desde “A 1111 BBB” hasta “ZZ 9999 ZZZ”.Por otro lado, el DOM (Document Object Model) es un API destinado a trabajar con documentosHTML y XML. El DOM proporciona una representación en forma de árbol de un documento y permitesu manipulación (añadir un elemento nuevo, borrar un elemento, mover un elemento de sitio). Algunasfunciones útiles del DOM:document.getElementById(id): devuelve el elemento con el identificador indicado.3elemento.getElementsByTagName(etiqueta): devuelve un array de elementos con la etiqueta in-dicada, los elementos se buscan a partir de elemento.document.createElement(etiqueta): crea un nuevo elemento según la etiqueta indicada.elementoPadre.appendChild(elementoNuevo): añade elementoNuevo a elementoPadre al finalde su lista de elementos hijo.elementoPadre.insertBefore(elementoNuevo, elementoReferencia): añade elementoNuevo enla lista de elementos hijo de elementoPadre antes de elementoReferencia.El siguiente ejemplo muestra cómo se pueden añadir párrafos de texto nuevos a una página web conel texto que introduzca el usuario:<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Validación con expresión regular</title><script type="text/javascript">function nuevoTexto() {// Obtiene el div que tiene id="parrafos"var d = document.getElementById("parrafos");// Crea un nuevo elemento de tipo párrafovar np = document.createElement("p");// Inserta el texto en el contenido del nuevo párrafonp.textContent = document.getElementById("texto").value;// Añade el párrafo al final de los elementos que contenga el divd.appendChild(np);return false;}</script></head><body><form id="miForm" action="" method="get" onsubmit="return nuevoTexto()" ><p>Texto: <input type="text" id="texto" /><br /><input type="submit" value="Añade texto" /></p></form><div id="parrafos"></div></body></html>5. RecomendacionesLas expresiones regulares son un mecanismo de programación muy potentes, pero esa potencia originaque sean complejas de utilizar. Comienza a trabajar con expresiones regulares sencillas y poco a pocointenta escribir expresiones más complejas.4Para ordenar los elementos de una lista puedes emplear diferentes algoritmos de ordenación. En lapágina The Art of Web: JavaScript12 puedes ver la implementación de los más conocidos: bubble sort,insertion sort, shell sort y quick sort.12http://www.the-art-of-web.com/javascript/5

iDESWEB: Práctica 5: JavaScript: expresiones regulares y el Modelo de Objetos de Documento

Abstract

Similar works

Full text

Available Versions

Repositorio Institucional de la Universidad de Alicante