Enunciado Ejercicios JavaScript

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 9

Ejercicio de JavaScript

En este mdulo del curso se proponen 6 ejercicios prcticos de complejidad creciente


cuyos enunciados se pueden leer ms 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 prctica a la hora de trabajar, el cdigo Javascript generado para resolver
cada ejercicio se colocar en el fichero externo con extensin .js creado vaco para tal
fin dentro de la carpeta js de cada uno de los ejercicios.

EJERCICIO DE JAVASCRIPT

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

En la carpeta img se han incluido 10 ficheros del mismo tamao, 770x130 pixels, con
las imgenes 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

cclicamente 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 pgina 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:

UNED 2015

Al abrir con el navegador el fichero Ejercicio02.html se muestra un formulario donde


el usuario tiene que teclear los dgitos numricos de su DNI.

Cuando estn los 8 dgitos pulsando sobre un botn OK al dato introducido se le aade
la letra correspondiente. Adems debajo del formulario tiene que aparecer un texto
informativo que se va modificando como se describe a continuacin:
Inicialmente tiene que mostrar el texto Mnimo de 8 dgitos, como muestra la
figura anterior.
Segn se vayan tecleando los nmeros del DNI tiene que aparecer un texto con el
nmero de dgitos que quedan por escribir.

Cuando se escriban los 8 dgitos debe mostrar el texto Pulsar botn para letra .

Al hacer clic sobre el botn OK, al DNI se le tiene que aadir un guin 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 divisin del nmero
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 adems hay que obligar al usuario a teclear nmeros de DNI con un
mnimo de 8 dgitos. 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.

UNED 2015

EJERCICIO DE JAVASCRIPT

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 botn Validar datos mediante cdigo JavaScript y empleando


expresiones regulares, se va a proceder a comprobar que los datos introducidos tienen la forma correcta. Por ejemplo, que el DNI est formado por 8 dgitos y una letra, o
que la direccin de correo est formada correctamente, etc.
Si en la validacin se encuentra algn 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

Si en la validacin todos los datos parecen correctos en la parte inferior se tiene que
mostrar un mensaje comentndolo.

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 validacin del formulario
empleando las posibilidades que ofrece HTML5. Crear un fichero adicional llamado
Ejercicio03_html5.html con esta solucin.

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. Despus de marcar las respuestas el usuario debe pulsar el botn CORREGIR para ver, en la parte inferior el
resultado obtenido en sus respuestas.
La primera modificacin va a consistir en cambiar el texto de las preguntas por otras
de respuesta sencilla o evidente, que faciliten la evaluacin del ejercicio.
Al pulsar el botn Corregir se llama a la funcin corregir() que el alumno debe
crear en este ejercicio. Esta funcin evala el test y escribe el resultado al final de la

UNED 2015

EJERCICIO DE JAVASCRIPT

pgina,

en

los

campos

creados

para

ese

propsito

al

final

del

archivo

Ejercicio04.html, pero que inicialmente no se muestran al estar ocultos.

Dentro de la carpeta img se han aadido dos imgenes que servirn, cuando se corrija
el test, para marcar las preguntas contestadas correctamente con
errneamente 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 solucin propuesta para
la funcin corregir() tiene que ser vlida si el nmero de preguntas es distinto
nicamente cambiando el valor de alguna variable, pero no aadiendo ms cdigo.
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 nmero de pregunta y
j (j=1,2,3,4) es el nmero de respuesta dentro de la pregunta. Por tanto un posible

esquema para acceder a cada respuesta de cada pregunta podra ser:


for (cp=1; cp<=numeropreguntas; cp++) {
for (cr=1; cr <=4 ; cr++) {
nombreid="p"+cp+cr

// Genera id del radio a comprobar

UNED 2015

Y para consultar si una determinada respuesta est marcada, habra 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 pgina 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 reproduccin del video anterior
3 Una imagen fija

UNED 2015

EJERCICIO DE JAVASCRIPT

En este ejercicio se trata de sincronizar los tres elementos entre s, para que cualquier
modificacin que haga el usuario sobre cualquiera de los dos primeros, afecte al resto.
Por ejemplo:
Si se mueve la barra deslizadora de reproduccin del video, se tiene que seleccionar la opcin correspondiente en la lista y se tiene que mostar la imagen de
este instante de reproduccin
Si se hace una seleccin en la lista de opciones, el video tiene que saltar a reproducir el video en ese instante de reproduccin 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 pgina web y dotarla de un mnimo de tres elementos dinmicos
desarrollados en jQuery y, si fuera necesario, alguno de sus plugins.
Los tres elementos que obligatoriamente debe tener la pgina 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 seleccin de la fecha. Un ejemplo se muestra en la figura.

2 En la parte superior de la pgina debe haber un men horizontal en el que las distintas opciones del men se desplieguen haca abajo. Un posible ejemplo se
muestra en la figura.

UNED 2015

3 Un visor con un pase de fotografas con algn tipo de animacin. Un posible


ejemplo se muestra en la figura.

MATERIAL A ENTREGAR
Todos los ficheros necesarios para poder comprobar el trabajo desarrollado.

UNED 2015

También podría gustarte