Ejercicio de 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

único fichero .zip o .rar, y subirlo a la plataforma virtual del curso. El nombre del

fichero tiene que ser de la forma:

• apellido1_apellido2_nombre.zip

• apellido1_apellido2_nombre.rar

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 .js creado vacío para tal

fin dentro de la carpeta js de cada uno de los ejercicios.

2 EJERCICIO DE JAVASCRIPT

UNED 2015

EJERCICIO 1:

La carpeta con material de este primer ejercicio contiene:

Al abrir con el navegador el fichero Ejercicio01.html 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

Ejercicio01.html y en el fichero Ejercicio01.js, situado dentro de la carpeta js, 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).

MATERIAL 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:

3

UNED 2015

Al abrir con el navegador el fichero Ejercicio02.html 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.

MATERIAL 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.

4 EJERCICIO DE JAVASCRIPT

UNED 2015

EJERCICIO 3

La carpeta con material de este tercer ejercicio contiene:

Al abrir con el navegador el fichero Ejercicio03.html 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 regulares, se va a proceder a comprobar que los datos introducidos tie-

nen 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.

5

UNED 2015

Si en la validación todos los datos parecen correctos en la parte inferior se tiene que

mostrar un mensaje comentándolo.

MATERIAL 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

Ejercicio03_html5.html con esta solución.

EJERCICIO 4

La carpeta con material de este cuarto ejercicio contiene:

Al abrir con el navegador el fichero Ejercicio04.html se muestran un cuestionario

con tres preguntas de test que el usuario puede contestar. Después de marcar las res-

puestas 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 corregir() que el alumno debe

crear en este ejercicio. Esta función evalúa el test y escribe el resultado al final de la

6 EJERCICIO DE JAVASCRIPT

UNED 2015

página, en los campos creados para ese propósito al final del archivo

Ejercicio04.html, 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 y las contestadas

erróneamente con .

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 corregir() 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 "id" y que,

por tanto, se puede acceder a ellas directamente empleado getElementById.

El Id de las respuestas tiene la forma pij, 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:

for (cp=1; cp<=numeropreguntas; cp++) {

for (cr=1; cr <=4 ; cr++) {

nombreid="p"+cp+cr // Genera id del radio a comprobar

7

UNED 2015

Y para consultar si una determinada respuesta está marcada, habría que consultar el

valor de document.getElementById(nombreid).checked

MATERIAL 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 Ejercicio05.html 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

8 EJERCICIO DE JAVASCRIPT

UNED 2015

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 selec-

cionar 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 repro-

ducir el video en ese instante de reproducción y se tiene que mostrar la imagen

correspondiente.

MATERIAL 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 dis-

tintas opciones del menú se desplieguen hacía abajo. Un posible ejemplo se

muestra en la figura.

9

UNED 2015

3 Un visor con un pase de fotografías con algún tipo de animación. Un posible

ejemplo se muestra en la figura.

MATERIAL A ENTREGAR

Todos los ficheros necesarios para poder comprobar el trabajo desarrollado.