Scribd
Cargar
109 vistas

UD3-Caso Practico HTML5 CSS3 JavaScript Nivel1

Este documento presenta un caso práctico de JavaScript que calcula la dieta recomendada para adelgazar o engordar dependiendo de las horas de ejercicio y calorías consumidas diarias. Usa programación secuencial y orientada a objetos, creando funciones para solicitar datos al usuario, calcular la dieta, e imprimir el resultado usando un objeto "ticket".

Cargado por

Carlosxcrew
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
109 vistas

UD3-Caso Practico HTML5 CSS3 JavaScript Nivel1

Este documento presenta un caso práctico de JavaScript que calcula la dieta recomendada para adelgazar o engordar dependiendo de las horas de ejercicio y calorías consumidas diarias. Usa programación secuencial y orientada a objetos, creando funciones para solicitar datos al usuario, calcular la dieta, e imprimir el resultado usando un objeto "ticket".

Cargado por

Carlosxcrew
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

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

También podría gustarte