U.T. 6.- Lenguaje Javascript - DOM. Parte Práctica

Transcripción

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

2 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 , 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;

3 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]

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

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

6 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 , 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.