Ejercicios de recuperación 2017

Tarea 1. Gestión de eventos y formularios en Javascript

Realiza la validación del formulario proporcionado en el enunciado de acuerdo a los siguientes requisitos:

1. Programar el código de JavaScript en los ficheros independientes que sean precisos. Se recomienda incluir en un fichero todas las funciones creadas para las validaciones fomentando así su posible reutilización en otras aplicaciones. Todos los eventos se definirán de acuerdo a la notación recomendada por el W3C.

2. Una vez que los datos se introduzcan en los campos de texto del formulario, se pasarán automáticamente a mayúsculas. Utiliza para ello el evento onblur de los mismos.

3. Al pulsar el botón "Enviar datos" se comprobará si los campos marcados con * se han introducido. En caso negativo, se mostrará un mensaje indicativo en la caja de error correspondiente al campo correspondiente (podrán mostrarse varios mensajes de error simultáneamente). Por defecto, estas cajas tienen la propiedad display:none, para que no se muestren.

4. Los dos campos de contraseña deben coincidir, además de tener una extensión mínima de 8 caracteres. De no ser así, se mostrará un mensaje indicativo en la caja de error correspondiente a la contraseña. La validación se realizará al salir de la caja "password2".

5. El NIF debería validarse mediante una expresión regular que permita únicamente 8 números y una letra. Además, habrá que validar si la letra introducida se corresponde con el propio DNI, utilizando el algoritmo explicado en el siguiente enlace (puede usarse la función propuesta en el mismo).

6. La fecha de nacimiento debería validarse mediante una expresión regular para que sea introducida en el formato "XX/XX/XXXX" o "XX-XX-XXXX, siendo XX valores numéricos. Además, hay que validar que la edad del usuario a fecha actual esté entre 16 y 116 años. La validación se realizará una vez que se ha introducido la fecha, y el error se mostrará en la caja de error correspondiente a la fecha.

7. El email se validará utilizando una expresión regular. Los valores antes de la @ pueden contener cualquier carácter alfanumérico y los caracteres . y -, mientras que los valores tras la @ pueden contener caracteres alfanuméricos, y el tipo de dominio puede tener una longitud de 2 o 3 caracteres. La validación se realizará una vez introducido el email, y el error se mostrará en la caja de error correspondiente.

8. Almacenar en una cookie el número de intentos de envío del formulario que se van produciendo y mostrar un mensaje en el contenedor "intentos" similar a: "Intento de Envíos del formulario: X". Es decir cada vez que le demos al botón de enviar tendrá que incrementar el valor de la cookie en 1 y mostrar su contenido en el div antes mencionado.

9. El formulario sólo se enviará cuando todos los elementos sean correctos. En caso de que algún elemento no se valide correctamente, se anulará el envío del formulario. Si se produce algún error, se pondrá el foco en el elemento correspondiente. Si hay varios errores, el foco lo tendrá el elemento que esté definido antes en el formulario.

Las expresiones regulares se explicarán con los comentarios adecuados

A continuación, se muestra un ejemplo de error tras no introducir los campos "nombre" y "apellidos"

Tarea 2. Visor de personajes

Diseña un visor de personaje que muestre una capa con id imagen en la que se cargarán como fondo las imágenes y cuatro botones (primera, anterior, siguiente y última).

Se definirá en un archivo Javascript una clase Galeria con las siguientes características:

· Propiedades que almacenen la siguiente información:

o Array que contiene los nombres de las imágenes que se van a mostrar.

o Cantidad de imágenes que va a manejar la galería.

o Índice de la imagen que se está mostrando actualmente (cursor)

· Métodos:

o El constructor de la clase recibe como único parámetro la cantidad de imágenes que va a manejar la galería. Dado que todas las imágenes tienen el mismo nombre (sólo se diferencian en el número), el constructor generará de manera automática los nombres de todas las imágenes que se van a manejar.

o Un método que establezca el cursor en una posición aleatoria del array, devolviendo el nombre de la imagen que hay en la misma.

o Un método que establezca el cursor en la última posición del array, devolviendo el nombre de la imagen que hay en la misma.

o Un método que establezca el cursor en la primera posición del array, devolviendo el nombre de la imagen que hay en la misma.

o Un método que establezca el cursor en posición anterior a la actual, devolviendo el nombre de la imagen que hay en la misma.

o Un método que establezca el cursor en posición siguiente a la actual, devolviendo el nombre de la imagen que hay en la misma.

Ten en cuenta que, aunque lo ideal sería que se extrajera el nombre de las imágenes diréctamente de la ubicación en la que se encuentran, utilizamos este sistema por su facilidad (no por su eficiencia).

Debes manejar los eventos que permitan que se muestre la galería, usando los métodos de la misma para movernos por las imágenes de la misma. Hay que tener en cuenta que:

· Inicialmente se cargará una imagen al azar.

· Si nos encontramos en la primera imagen, los botones Primera y Anterior se deshabilitarán. Este comportamiento dejará de producirse cuando cambiamos de imagen.

· Si nos encontramos en la última imagen, los botones Siguiente y Última se deshabilitarán. Este comportamiento dejará de producirse cuando cambiamos de imagen.

Para los dos últimos puntos habrá que utilizar los estilos .habilitado y .deshabilitado que desarrollarás en tu hoja de estilos.

Tarea 3. PostIts

Vamos a crear un sistema de PostIt^TM que permita utilizar la ventana del navegador como una pizarra donde dejar notas con los mensajes y/o imágenes que deseemos recordar.

Haciendo doble click en la ventana se mostrará un formulario que nos permite introducir la información a recordar, creando un nuevo PosIt en las mismas coordenadas.

Además deberá permitirnos desplazar arrastrando y soltando, las notas por la ventana, de tal manera que permita recolocarles a voluntad del usuario.

Será necesario almacenar diversa información relativa a cada posit: mensaje (obligatorio), imagen (opcional).

Al hacer doble clik en un posit, abrirá el formulario con la información, para permitir actualizarla de nuevo. Además, todos los postit tendrán un botón en la esquina superior derecha que al ser pulsado lo eliminará.

El desarrollo lo basaremos en un modelo orientado a objetos similar al siguiente (sólo se especifican los métodos necesarios):

Tarea 4. Poblaciones

1. Se realizará una Web que nos permite consultar información acerca de pueblos de España mediante un sencillo formulario. Se proporciona:

o Los scripts PHP que vas a necesitar

o El código SQL que necesitas para importar el usuario de la base de datos (dwec07/dwec07), la base de datos (dwec07) y las tablas (población y provincias).

o Una sugerencia de hoja de estilos CSS (que puedes modificar a tu gusto).

Pulsa aquí para descargar estos archivos.

En el momento en que el usuario escribe un carácter (evento de teclado sobre la caja de texto) la aplicación nos va a sugerir 5 nombres de poblaciones que aparecerán en una lista. Estos nombres se pedirán mediante una petición AJAX al script sugerencia_poblaciones.php.

[La captura no se corresponde con el listado real de sugerencias a partir de la BD proporcionada]

Una vez que ha aparecido la lista de sugerencias, tenemos la opción de seguir introduciendo caracteres o escoger un elemento de la lista.

Una vez seleccionado uno de los países, al pulsar sobre el botón Buscar podemos obtener información sobre la población en un panel que se mostrará tras el formulario (inicialmente oculto):

o Provincia.

o Código postal

o Ubicación de la población en Google Maps.

La información se obtendrá mediante AJAX a partir del script info_poblacion.php

A la hora de implementar la aplicación habrá que tener en cuenta lo siguiente:

· Las operaciones de manipulación del DOM/manejo de eventos se implementarán usando funciones de jQuery.

· Para obtener la información de sugerencia_poblaciones.php se usará una petición AJAX asíncrona a partir de un objeto XMLHttpRequest. Ten en cuenta que el script acepta un parámetro enviado mediante GET y devuelve las sugerencias como un array de objetos representados en JSON.

o Implementa una función cross-browser que nos permita tratar las peticiones AJAX correctamente.

· Para obtener la información de info_poblacion.php se usará una petición AJAX apoyándonos en las funciones de jQuery. Ten en cuenta que el script acepta parámetros enviados mediante POST y devuelve la información en formato XML.

· Para mostrar el mapa habrá que hacer uso de la API Javascript de Google Maps v3 (puedes ver el funcionamiento en el siguiente enlace).

Tarea 5. Poblaciones

Modifica el programa anterior para utilizar JQuery en lugar de Javascript para la implementación de AJAX.

Tarea 6. Animaciones

Haciendo uso de JQuery, crea una pequeña animación en la que uno o varios personajes entren en la página y expongan algo (se presenten, cuenten una historia… lo que se te ocurra).