Читать книгу JavaScript: Guía completa - Alessandra Salvaggio - Страница 10
Un poco de dinamismo
ОглавлениеAsí como está, el código que hemos escrito no sirve para mucho: habría sido mucho más rápido escribir directamente nuestro mensaje en el código HTML.
Las cosas cambian si queremos mostrar un mensaje distinto según el momento del día.
Muestro solo la parte JavaScript del código, puesto que la parte HTML se mantiene igual.
<script type="text/javascript">// hora del sistemaconst hora = new Date().getHours();let mensaje;if (hora < 13) mensaje = 'buenos días';else if (hora < 21) mensaje = 'buenas tardes';else if (hora < 24) mensaje = 'buenas noches';// Busco en el DOM la etiqueta con el ID = 'output' y le asigno el contenidodocument.getElementById('output').innerHTML = mensaje;</script>
Puedes encontrar este ejemplo en el archivo Holamundodinamico .html
Este código contiene varias novedades: analicémoslas una a una.
Empecemos por el valor de la constante hora.
const hora = new Date().getHours();
Mediante la instrucción new Date() se construye un nuevo objeto de tipo fecha. Como no especifica la fecha que el objeto debe contener entre los paréntesis, el objeto fecha contiene la fecha y la hora del sistema y, por tanto, la fecha y la hora en que se ejecuta el comando.
| NOTA | Existen tres posibilidades para asignar a un objeto del tipo fecha una fecha determinada:•new Date(milisegundos): la fecha se especifica como el número de milisegundos transcurridos desde el 1 de enero de 1970, que es la fecha 0.•new Date(fecha como cadena): la fecha se expresa como una cadena que utiliza el sistema de notación americano con eventuales nombres de los meses escritos en inglés (new Date("september 05, 2018 11:43:00")) o usando el formato mes día año (new Date("09/05/2018")). Ambas fechas de los ejemplos propuestos indican el 5 de septiembre de 2018.•new Date(año, mes, día, hora, minutos, segundos, milisegundos): la fecha se crea especificando año, mes, día... No es necesario especificar todos los valores si no son necesarios. Ten en cuenta que el mes se expresa con un número que va del 0 al 11. new Date(2018,08,05) crea la fecha 5/9/2018. |
Una vez se ha creado el objeto fecha, con la función getHours() recuperamos la hora memorizada en la fecha. La hora se representa con un número del 0 al 23.
| NOTA | Existen diferentes funciones que permiten extraer partes de la fecha/hora almacenada en un objeto fecha:•getDate()getDay(): devuelve el número del día de la semana con un valor del 0 (domingo) al 6 (sábado);•getFullYear(): devuelve el año con un número de cuatro cifras;•getMilliseconds()getMinutes()getMonth()getSeconds()getTime()getTimezoneOffset()getUTCDate(), getUTCDay(), getUTCFullYear(), getUTCHours(), getUTCMilliseconds(), getUTCMinutes(), getUTCMonth() y getUTCSeconds()) que se comportan exactamente como los anteriores, pero hacen referencia al UTC. |
Una vez hemos recuperado la hora, podemos recurrir a instrucciones condicionales (if) para decidir qué mensaje mostrar.
Antes de explicar la sintaxis de la instrucción condicional, debemos indicar que el mensaje queda almacenado en una variable denominada precisamente mensaje. La variable, como las constantes, es una porción de memoria a la cual se puede asignar un valor. A diferencia del valor de la constante, el valor de una variable, como la misma palabra indica, puede cambiar durante la ejecución del código.
let mensaje;
Una variable se declara con la palabra clave let y las reglas para su denominación son las mismas que hemos visto para los nombres de las constantes.
Ahora que disponemos de nuestra variable, podemos utilizarla para almacenar el mensaje que queremos mostrar dentro del párrafo con el id output.
El mensaje variará según la hora, es decir, si se verifica una determinada condición; por ejemplo, para que el mensaje sea ‘buenos días’, la hora debe ser un número menor que 13.
Para efectuar este tipo de verificación, debemos recurrir a las instrucciones condicionales.
En su forma más simple, una instrucción condicional tiene esta forma:
if (condición a verificar) acción a ejecutar si se verifica la condición
Esta es la forma de nuestra primera instrucción condicional:
if (hora < 13) mensaje = 'buenos días';
La condición que se debe comprobar es que la constante hora tenga un valor menor que 13. Si la condición se verifica, la variable mensaje asume el valor ‘buenos días’.
¿Y si la condición no se verifica?
En este caso en concreto, se realizan otras dos comprobaciones con las instrucciones else if.
else if (hora < 21) mensaje = 'buenas tardes';else if (hora < 24) mensaje = 'buenas noches';
Si hora es un número menor que 21, mensaje asume el valor ‘buenas tardes’ y si hora es un número menor que 24, mensaje asume el valor ‘buena noches’.
Si ninguna de estas condiciones alternativas se verifica, entonces (instrucción else), mensaje asume el valor ‘hola’.
else mensaje = 'hola';
Las instrucciones else if y else son opcionales y se podría limitar a especificar una acción si se verifica una única condición mediante una simple instrucción if.
En nuestro ejemplo, hemos utilizado una forma “abreviada” de las instrucciones if agrupando en una sola línea tanto la condición a verificar como la acción a cumplir si la condición se verifica.
Y hemos podido hacerlo porque la acción que se debe llevar a cabo es una.
Podríamos haber adoptado la forma más amplia:
if (hora < 13) {mensaje = 'buenos días';} else if (hora < 21) {mensaje = 'buena tardes';} else if (hora < 22) {mensaje = 'buenas noches';} else {mensaje = 'hola';}
En esta forma, la acción que se debe llevar a cabo está encerrada entre llaves.
Este sistema de notación es obligatorio si las acciones a ejecutar en el caso en que se verifique una condición son más de una.
Observa el ejemplo siguiente:
<head><style type="text/css">.mañana { background-color: #A0EEF0; color: #971D78;}.tarde { background-color: #47B8FE; color: #DCFE24;} .noche { background-color: #FA8F6F; color: #971D78;}.madrugada { background-color: #0A0D2C; color: #FFFFFF;}</style></head><body class="mañana"><p id="output"></p><script type="text/javascript">// hora del sistema const hora = new Date().getHours(); let mensaje; let nombreEstilo;if (hora < 13) {mensaje = 'buenos días'; nombreEstilo = 'mañana';} else if (hora < 21) {mensaje = 'buenas tardes';nombreEstilo = 'tarde';} else if (hora < 24) {mensaje = 'buenas noches';nombreEstilo = 'noche';} else {mensaje = 'hola';nombreEstilo = 'madrugada';}document.getElementById('output').innerHTML = mensaje; document.body.className = nombreEstilo;</script></body>
Puedes encontrar este ejemplo en el archivo Holamundodinamico2 .html
Hemos añadido a nuestro archivo una parte de clases CSS. Según el horario que sea, asignamos también un valor a la variable nombreEstilo. Esta variable se utilizará para asignar esa clase específica al elemento <body> en nuestra página y, concretamente, cambiar su color de fondo y el color del texto insertado.
