HTML5, CSS3 y JavaScript N1
GUIÓN DE CONTENIDOS
UD3.JavaScript. Nivel I
Caso práctico
-1- Caso práctico 3
HTML5, CSS3 y JavaScript N1
Caso Práctico 3
Ejercicio
Partimos del proyecto que hemos creado en el caso práctico de la unidad anterior.
La idea es la inclusión de un script programado en “JavaScript” en la página “dietas.html”.
Una parte del código a generar hará uso de una programación secuencial (azul), mientras
en una segunda parte utilizará una programación orientada a objetos (verde).
1. En HTML crearemos un texto llamado “calcular dieta”, que al recibir el evento
“onclick”, llamará a una función “dietas()”.
2. Se crea una variable global llamada “mensajeParaImprimir”.
3. Función dietas().
3.1. Solicita tres valores por pantalla(prompt)
3.1.1.Deseo: Engordar (E) o Adelgazar (A)
3.1.2.Horas de ejercicio al día
3.1.3.Calorías consumidas al día
3.2. Realiza una llamada a la función “calculoDieta(….)”, pasándole los tres valores, y
devolviendo el resultado a una variable llamada “mensaje”.
3.3. Muestra en pantalla el resultado(alert).
3.4. Asigna el mensaje a la variable “mensajeParaImprimir”
4. Función “calculoDieta(…)”.
4.1. Recibe los 3 valores, “deseo”, “horas” y “calorías”.
5. En caso del valor de la variable deseo(switch):
5.1. Engordar (E)
5.1.1.Si las horas son mayores de “3” y las calorías menores de “5000”, el resultado
es “haz menos ejercicio y come más”, si no, si las horas son menores de “3” y
las calorías menores de “5000”, el resultado es “come más”, en caso contrario
el resultado es “haz menos ejercicio”
5.2. Adelgazar (A)
5.2.1.Si las horas son menores de “3” y las calorías mayores de “5000”, el resultado
es “haz más ejercicio y come menos”, si no, si las horas son mayores de “3” y
las calorías mayores de “5000”, el resultado es “come menos”, en caso
contrario el resultado es “haz más ejercicio”
5.3. Cualquier otra posibilidad, el resultado será “has introducido algún dato mal”
-2- Caso práctico 3
HTML5, CSS3 y JavaScript N1
Caso Práctico 3
Ejercicio
6. En HTML crearemos un texto llamado “imprimir dieta”, que al recibir el evento
“onclick”, llamara a una función “imprimirDietas()”.
7. Se define la clase ticket
7.1. Donde hay un método llamado imprimir, el cual genera por pantalla un mensaje
(alert)
8. Se instancia un objeto llamado “ticket1” de la clase “ticket”.
9. Función imprimirDietas().
10. Se crea una propiedad del objeto “ticket1”, llamada “mensaje”, a la cual se le asigna
el valor de la variable “mensajeParaImprimir”
11. Se llama al método “imprimir” del objeto “ticket1”.
Vista gráfica
-3- Caso práctico 3
HTML5, CSS3 y JavaScript N1
Caso Práctico 3
Ejercicio
Al pulsar clic, aparece un mensaje que nos pide que deseamos hacer.
-4- Caso práctico 3
HTML5, CSS3 y JavaScript N1
Caso Práctico 3
Ejercicio
Un segundo mensaje que nos solicita calorías ingeridas diarias.
-5- Caso práctico 3
HTML5, CSS3 y JavaScript N1
Caso Práctico 3
Ejercicio
Un tercer mensaje que nos pide el número de horas de ejercicio diario
-6- Caso práctico 3
HTML5, CSS3 y JavaScript N1
Caso Práctico 3
Ejercicio
Para finalizar, aparece una ventana que nos muestra el resultado
-7- Caso práctico 3
HTML5, CSS3 y JavaScript N1
Caso Práctico 3
Ejercicio
En este caso imprimimos la dieta, pero trabajando con métodos y
propiedades.
-8- Caso práctico 3
