Ejercicio de JavaScript JavaScript
En este módulo del curso se proponen 6 ejercicios prácticos de complejidad creciente cuyos enunciados se pueden leer más adelante. Para superar esta parte el alumno debe resolver correctamente, al menos, 5 de ellos, pero obligatoriamente tiene que hacer el ejercicio 6. Junto con este enunciado se han incluido algunos ficheros de trabajo para el desarrollo de los ejercicios propuestos con la siguiente estructura de carpetas..
Una vez finalizados todos los ejercicios, el alumno debe comprimir todos los ficheros, respetando la estructura de carpetas original mostrada en la imagen anterior, en un
ar , y subirlo a la plataforma virtual del curso. El nombre del único fichero . z i p o . r ar fichero tiene que ser de la forma: • apel l i do1_ap _apel l i do2_no _nombr e. zi p • apel l i do1_ape _apel l i do2_nom _nombr e. r ar REQUISITO PARA TODOS LOS EJERCICIOS:
Como buena práctica a la hora de trabajar, el código Javascript generado para resolver cada ejercicio se colocará en el fichero externo con extensión . j s creado vacío para tal fin dentro de la carpeta j s de cada uno de los ejercicios.
2
EJERCICIO DE JAVASCRIPT
EJERCICIO 1:
La carpeta con material de este primer ejercicio contiene:
Al abrir con el navegador el fichero Ej er ci ci o01. ht ml se muestra la imagen de la Facultad de Ciencias de la UNED y, encima de ella, un texto con un fondo de color, tal y como se muestra a continuación.
En la carpeta img se han incluido 10 ficheros del mismo tamaño, 770x130 pixels, con las imágenes de varias facultades y escuelas de la UNED. En este ejercicio hay que hacer las modificaciones necesarias en el fichero Ej er ci ci o01. ht ml y en el fichero Ej erci ci o01. j s , situado dentro de la carpeta j s , para que
cíclicamente y cada 2 segundos: • Cambie la imagen por otra de los 10 ficheros proporcionados. • Cambie el texto para que haga referencia a la imagen que se muestra. • Cambie el color del texto y color de fondo del texto. • Al hacer clic sobre una imagen, se tiene que saltar a la página Web de la facultad o escuela correspondiente a la imagen mostrada en ese momento (buscar los URLs en www.uned.es). M ATERIAL A ENTREGAR
Hay que entregar los mismos archivos proporcionados con el enunciado en los que se han hecho las modificaciones necesarias para conseguir los requisitos pedidos. EJERCICIO 2:
La carpeta con material de este segundo ejercicio contiene:
UNED 2015
3
Al abrir con el navegador el fichero Ej er ci ci o02. ht ml se muestra un formulario donde el usuario tiene que teclear los dígitos numéricos de su DNI.
Cuando estén los 8 dígitos pulsando sobre un botón OK al dato introducido se le añade la letra correspondiente. Además debajo del formulario tiene que aparecer un texto informativo que se va modificando como se describe a continuación: • Inicialmente tiene que mostrar el texto “Mínimo de 8 dígitos”, como muestra la figura anterior. • Según se vayan tecleando los números del DNI tiene que aparecer un texto con el número de dígitos que quedan por escribir.
• Cuando se escriban los 8 dígitos debe mostrar el texto “Pulsar botón para letra” .
• Al hacer clic sobre el botón OK, al DNI se le tiene que añadir un guión y la letra calculada, mostrar debajo el texto “DNI completo” y modificar el color de fondo del formulario.
La forma de obtener la letra del DNI consiste en usar el resto de la división del número del DNI entre 23, valor entre 0 y 22, para acceder al caracter situado en esa posició dentro de la cadena " TRWAGMYFPDXBNJZSQVHLCKET ". Para evitar errores, puede encontrar esta cadena en un fichero dentro de la carpeta del ejercicio. En este ejercicio además hay que obligar al usuario a teclear números de DNI con un mínimo de 8 dígitos. Si no es así, hay que mostrar un mensaje para recordarlo. M ATERIAL A ENTREGAR
Hay que entregar los mismos archivos proporcionados con el enunciado en los que se han hecho las modificaciones necesarias para conseguir los requisitos pedidos.
UNED 2015
4
EJERCICIO DE JAVASCRIPT
EJERCICIO 3
La carpeta con material de este tercer ejercicio contiene:
Al abrir con el navegador el fichero Ej er ci ci o03. ht ml se muestra un formulario con seis campos que el usuario tiene que rellenar.
Al pulsar sobre el botón “Validar datos” mediante código JavaScript y empleando expresiones r egulares, se va a proceder a comprobar que los datos introducidos tienen la forma correcta. Por ejemplo, que el DNI esté formado por 8 dígitos y una letra, o que la dirección de correo esté formada correctamente, etc. Si en la validación se encuentra algún dato incorrecto, el campo correspondiente se tiene que marcar en rojo y en la parte inferior mostrar un mensaje de error, tal y como se muestra en la figura siguiente.
UNED 2015
5
Si en la validación todos los datos parecen correctos en la parte inferior se tiene que mostrar un mensaje comentándolo.
M ATERIAL A ENTREGAR
Hay que entregar los mismos archivos proporcionados con el enunciado en los que se han hecho las modificaciones necesarias para conseguir los requisitos pedidos. COMPLEMENTO
Como complemento al ejercicio se puede resolver la validación del formulario empleando las posibilidades que ofrece HTML5. Crear un fichero adicional llamado Ej er ci ci o03_html 5. ht ml con esta solución. EJERCICIO 4
La carpeta con material de este cuarto ejercicio contiene:
Al abrir con el navegador el fichero Ej er ci ci o04. ht ml se muestran un cuestionario con tres preguntas de test que el usuario puede contestar. Después de marcar las respuestas el usuario debe pulsar el botón “CORREGIR” para ver, en la parte inferior el resultado obtenido en sus respuestas. La primera modificación va a consistir en cambiar el texto de las preguntas por otras de respuesta sencilla o evidente, que faciliten la evaluación del ejercicio. Al pulsar el botón Corregir se llama a la función c or r egi r ( ) que el alumno debe crear en este ejercicio. Esta función evalúa el test y escribe el resultado al final de la
UNED 2015
6
EJERCICIO DE JAVASCRIPT
página,
en
los
campos
creados
para
ese
propósito
al
final
del
archivo
Ej er ci ci o04. ht ml , pero que inicialmente no se muestran al estar ocultos.
Dentro de la carpeta img se han añadido dos imágenes que servirán, cuando se corrija el test, para marcar las preguntas contestadas correctamente con erróneamente con
y las contestadas
.
La forma de puntuar este test es la siguiente: • Pregunta correcta: 2 puntos. • Pregunta incorrecta: -0,75 puntos. • Pregunta en blanco: -0,2 puntos. • Si el resultado final es negativo, la nota debe ser cero. Aunque en el fichero propuesto hay únicamente 3 preguntas, la solución propuesta para la función cor r egi r ( ) tiene que ser válida si el número de preguntas es distinto únicamente cambiando el valor de alguna variable, pero no añadiendo más código. Para conseguirlo se sugiere emplear que las respuestas tienen asociado un " i d" y que, por tanto, se puede acceder a ellas directamente empleado get El ement ByI d. El I d de las respuestas tiene la forma pi j , donde i (i =1, 2, 3) es el número de pregunta y j ( j =1, 2, 3, 4) es el número de respuesta dentro de la pregunta. Por tanto un posible
esquema para acceder a cada respuesta de cada pregunta podría ser:
f or ( cp=1; cp<=numer opr egunt as; cp++) { f or ( cr =1; cr <=4 ; cr ++) { nombr ei d=" p" +cp+cr
/ / Gener a i d del r adi o a compr obar
UNED 2015
7
Y para consultar si una determinada respuesta está marcada, habría que consultar el valor de document . get El ement ByI d( nombr ei d) . checked M ATERIAL A ENTREGAR
Hay que entregar los mismos archivos proporcionados con el enunciado en los que se han hecho las modificaciones necesarias para conseguir los requisitos pedidos. EJERCICIO 5
La carpeta con material de este cuarto ejercicio contiene:
Al abrir con el navegador el fichero Ej er ci ci o05. ht ml se muestra una página con 3 elementos principales: 1 Un video en la parte superior 2 Una lista de opciones donde se muestran textos relacionados con varios instantes de la reproducción del video anterior 3 Una imagen fija
UNED 2015
8
EJERCICIO DE JAVASCRIPT
En este ejercicio se trata de sincronizar los tres elementos entre sí, para que cualquier modificación que haga el usuario sobre cualquiera de los dos primeros, afecte al resto. Por ejemplo: • Si se mueve la barra deslizadora de reproducción del video, se tiene que seleccionar la opción correspondiente en la lista y se tiene que mostar la imagen de este instante de reproducción • Si se hace una selección en la lista de opciones, el video tiene que saltar a reproducir el video en ese instante de reproducción y se tiene que mostrar la imagen correspondiente. M ATERIAL A ENTREGAR
Hay que entregar los mismos archivos proporcionados con el enunciado en los que se han hecho las modificaciones necesarias para conseguir los requisitos pedidos. EJERCICIO 6 - JQUERY
El contenido concreto de este ejercicio lo dejamos totalmente abierto. El alumno debe crear una página web y dotarla de un mínimo de tres elementos dinámicos desarrollados en jQuery y, si fuera necesario, alguno de sus plugins. Los tres elementos que obligatoriamente debe tener la página son: 1 Un formulario con un campo en el que sea necesario teclear una fecha por parte del usuario. Al hacer clic sobre este campo se debe desplegar un calendario para facilitar al usuario la selección de la fecha. Un ejemplo se muestra en la figura.
2 En la parte superior de la página debe haber un menú horizontal en el que las distintas opciones del menú se desplieguen hacía abajo. Un posible ejemplo se muestra en la figura.
UNED 2015
9
3 Un visor con un pase de fotografías con algún tipo de animación. Un posible ejemplo se muestra en la figura.
M ATERIAL A ENTREGAR
Todos los ficheros necesarios para poder comprobar el trabajo desarrollado.
UNED 2015
