Ejemplo Examen Práctico

Profesor: Juan Antonio López Quesada.
Ciclo Formativo de Grado Superior: LMSGI.
WEB: http://dis.um.es/~lopezquesada
E-mail: [email protected]
Pág. 1
U.T. 6.- Lenguaje Javascript - DOM.
Parte Práctica
Alumn@:__________________________________________________
Ejercicio
1.Calculadora
tabla
formulario.
Realiza
una
página
implemente una calculadora aritmética.
Para ello haz uso de una tabla y un
formulario. Indicar que la función que
realiza la evaluación de una secuencia de
caracteres que representa una expresión
es eval().
Ejercicio 2.- Fotoslider. Realiza una
página que muestre un proyector de
fotografias. Tendremos una carpeta con n
imágenes, cuyos nombres estarán
almacenados en un vector. Necesitaremos
una variable global que determine qué
imagen es la que se está visualizando. Se
definirá 3 funciones: next(), previous() y
first()
Ejercicio 3.- Dado. Hacer una página que
simule el lanzamiento de un dado.
Cuando onclick el buttom se generará un
número aleatorio entre 1 y 6, de forma
que si obtengo un 4 aparecerá la imagen
dado4.jpg.
Profesor: Juan Antonio López Quesada.
Ciclo Formativo de Grado Superior: LMSGI.
WEB: http://dis.um.es/~lopezquesada
E-mail: [email protected]
Pág. 2
Ejercicio 4.- Compra de un coche
Tienes que desarrollar un formulario para la compra de un coche. Partimos de un precio base de
12.000€, que puede variar según las equipaciones que escoja cada persona:








Motor: gasolina, diesel (+1500€), híbrido (+3000€)
Modelo: 3 puertas - solo disponible para gasolina (-2000€), 5 puertas, familiar (+1500€).
Color: rojo, verde, naranja, blanco (-500€), negro (-600€)
Pintura metalizada: +750€ disponible solo para rojo, verde y naranja.
Llantas de aleación: +200€
Climatizador: +800€
GPS: +340€
DVD: +800€ (solo para el modelo familiar)
Desarrollo:
1. Escribe el código Javascript para obtener el precio final.
2. Añade un total, donde se refleja el valor del coche. Además las opciones deberán ser
coherentes: si por ejemplo se selecciona el color blanco, el cuadro de pintura metalizada
tiene que deshabilitarse.
3. Añade el dibujo del coche, que tiene que ser fiel al modelo y color.
Imágenes
Control SELECT:
Este otro objeto visual que podemos disponer en un FORM permite realizar la selección de un
string de una lista y tener asociado al mismo un valor no visible. El objetivo fundamental en
JavaScript es determinar qué elemento está seleccionado y qué valor tiene asociado. Esto lo
hacemos cuando ocurre el evento onChange.
Para
determinar
la
posición
del
índice
seleccionado
en
la
lista:
document.getElementById('select1').selectedIndex;
Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedIndex
(almacena la posición del string seleccionado de la lista, numerando a partir de cero).
Para determinar el string seleccionado:
document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text;
Es decir que el objeto select1 tiene otra propiedad llamada options, a la que accedemos por medio
de un subíndice, al string de una determinada posición.
Hay problemas en los que solamente necesitaremos el string almacenado en el objeto SELECT y
no el valor asociado (no es obligatorio asociar un valor a cada string).
Y por último con esta expresión accedemos al valor asociado al string:
document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;
Profesor: Juan Antonio López Quesada.
Ciclo Formativo de Grado Superior: LMSGI.
WEB: http://dis.um.es/~lopezquesada
E-mail: [email protected]
Pág. 3
U.T. 6.- Lenguaje Javascript - DOM.
Parte Práctica II
Alumn@:__________________________________________________
Ejercicio 1 (2.75).- Dado. Hacer una página que
simule el lanzamiento de un dado.
(1.50p) Cuando onclick el button se generará un
número aleatorio entre 1 y 6, de forma que si
obtengo un 4 aparecerá este valor en un <div>.
(2) Los valores que se obtengan se sumarán y
dicho resultado aparecerá en otra capa.
(2.75p) Se visualizará cada uno de los valores
lanzados previamente. Podremos pulsar un
button para empezar a jugar.
Math.floor((Math.random()*6)+1)
Ejercicio 2 (2.75).- Secuencia Aritmética. Hacer
una página que muestro los elementos de una
secuencia aritmética.
(1.50p) La secuencia empezará por 0 y se
incrementará o decrementará en una cantidad
fija que el usuario establecerá.
(2p) El usuario podrá en cualquier momento
modificar es incremento o decremento fijo
mediante un campo de tipo text.
(2.75p) El usuario podrá sumar o restar un valor
al resultado visible en esos momentos. Podrá
resetar el sistema a valores por defecto.
Mediante un botón.
parseInt();
Ejercicio 3 (2.5).- Calculadora tabla formulario.
(1.5p) Realiza una página implemente una calculadora
aritmética. Para ello haz uso de una tabla y un
formulario. Indicar que la función que realiza la
evaluación de una secuencia de caracteres que
representa una expresión es eval().
(2.5p) Se podrá añadir un botón [recordar] que guardará
el último eval() calculado para que se incorpore a la
actual expresión. Esto último se realizará con otro botón
adicional [recuperar]
Profesor: Juan Antonio López Quesada.
Ciclo Formativo de Grado Superior: LMSGI.
WEB: http://dis.um.es/~lopezquesada
E-mail: [email protected]
Pág. 4
Ejercicio 4 (2).- Examen de Javascript.
Supongamos que tenemos un examen tipo test con 10 preguntas entre las que nos encontramos las 3
primeras. El usuario tendrá tres acciones que implementar: Resultado del test, reiniciar el test y limpiar una
determinada cuestión. El botón de reiniciar limpiará las opciones que hemos seleccionado,
así como la inicialización de las variables globales que el usuario ha decidido crear para
resolver el problema. El botón de resultado mostrará en un alert() o en una capa <div> el
número de aciertos, el número de respuestas erróneas, número de preguntas no contestadas
y el resultado. Para calcular el resultado indicar que cada pregunta errónea resta 0.33 al
número de preguntas correctas. Por último el botón limpiar dejará una determinada
cuestión/pregunta cómo sin contestar.
Indicaciones:
1.- Considera la configuración del evento onclick de cada uno de los:
<input
type="radio"
name="pregunta2"
id=”respuesta”
value="A"
onclick="selección(??,??)">. Que permita saber qué respuesta he seleccionado y el valor
de
la
misma
[1
si
es
correcta
o
-0.33
si
no
lo
es].
2.- Para resetar el anterior input radio utilizaríamos la siguiente instrucción:
document.getElementById('pregunta2').checked=false;
3.- Considera la existencia de una variable global que almacene el valor de cada una de las
respuestas e inicialmente: var resultado=[-1,-1,-1, -1,-1,-1, -1,-1,-1,-1] (-1 representaría no
contestado)
Recordatorio:
1.- Como sabemos indicar que cada grupo de radio (pregunta) deberá tener el mismo name
para que sea una selección excluyente.
Profesor: Juan Antonio López Quesada.
Ciclo Formativo de Grado Superior: LMSGI.
WEB: http://dis.um.es/~lopezquesada
E-mail: [email protected]
Pág. 5
U.T. 6.- Lenguaje Javascript - DOM.
Parte Práctica
Alumn@:__________________________________________________
Ejercicio 1 (2.75).- Dado. Hacer una página que
simule el juego de apostar al lanzamiento de un
dado.
(1.50p) Cuando onclick el button de lanzar el dado
se mostrará si el valor previsto por el usuario y el
obtenido es coincidente.
(2) Si el usuario apuesta una cantidad X se
indicará si el usuario ha perdido o ganado. Si gana
se incrementará el Saldo del jugador en el valor
apostado multiplicado por 2 -si el usuario tenía
como saldo 1000 euros y apuesta 25 y gana esos
1000 pasan a 1050-, si pierde en valor que hubiera
en este campo desaparece.
(2.75p) Antes de lanzar el jugador podrá
incrementar el valor del campo apuesta que será
extraído de su saldo.
Consideraciónes:
Math.floor((Math.random()*6)+1)
parseInt()
Ejercicio 2 (2.75).- Secuencia de Paises. Hacer
una página que muestre un scroll de un conjunto
de países e información de los mismos.
(1.50p) Al onclick en alguna de la 4 opciones
aparecerá el país que corresponda en ese
momento.
(2.5p) Si el usuario pasará con el ratón por encima
del nombre del país se mostraría la información
del mismo que desaparecería cuando el ratón
abandonará dicha área.
Consideraciones:
Para
la
realización
de
este
ejercicio podríamos utilizar dos
vectores uno con los países y el
otro
con
sus
correspondientes
informaciones.
Profesor: Juan Antonio López Quesada.
Ciclo Formativo de Grado Superior: LMSGI.
WEB: http://dis.um.es/~lopezquesada
E-mail: [email protected]
Pág. 6
Ejercicio 3 (2.5).- Calculador
(1.5p) Realiza una página que implemente una
calculadora aritmética. Indicar que la función que
realiza la evaluación de una secuencia de
caracteres que representa una expresión es eval().
Indicar que la calculadora tiene como límites [2000,+2000], es decir si el usuario intenta realiza
una operación cuyo resultado esté fuera de dicho
rango se producirá un error, apareciendo la
palabra [overflow] en el campos de entrada de
datos.
(2p) Cuando se realice una operación correcta, es
decir, el resultado estará dentro del intervalo
indicado anteriormente, tanto la expresión
aritmética como el resultado se incorporarán a una
lista
(2.75p) Cada expresión podrá contener como
último elemento, un button que al hacer onclik ,el
contenido de la calculadora en su área de texto se
sustituirá por la expresión asociada. El button
[reset] limpiará esta lista de expresiones y
resultados.


Ejercicio 4 (2).- Comprar un coche.
Tienes que desarrollar un formulario para la compra de un coche. Partimos de un precio base de 12.000€, que puede
variar según las equipaciones que escoja cada persona:
 Motor: gasolina, diesel (+1500€), híbrido (+3000€)
 Modelo: 3 puertas - solo disponible para gasolina (-2000€), 5 puertas, familiar (+1500€).
 Color: rojo, verde, naranja, blanco (-500€), negro (-600€)
 Pintura metalizada: +750€ disponible solo para rojo, verde y naranja.
 Llantas de aleación: +200€
 Climatizador: +800€
 GPS: +340€
 DVD: +800€ (solo para el modelo familiar)
Desarrollo:
4. Escribe el código Javascript para obtener el precio final.
5. Añade un total, donde se refleja el valor del coche. Además las opciones deberán ser coherentes: si por
ejemplo se selecciona el color blanco, el cuadro de pintura metalizada tiene que ocultarse.
Indicaciones:
 Considera la utilización de <input type=”radio” ..> por ejemplo:

MOTOR:  gasolina  diesel  híbrido  no definido
<input
type=”radio”
name=”motor”
id=”diesel”
onclick=”opcion_motor(1,1500)”…..>
document.getElementById('pregunta2').checked- Tiene el valor true  o false
Recordatorio:
 Como sabemos indicar que cada grupo de radio deberá tener el mismo name para que sea una selección
excluyente.