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.
Trabajar con cadenas
ECMAScript nos permite trabajar con cadenas de un modo muy interesante. En este capítulo, queremos explorar algunas posibilidades en las que profundizaremos más adelante.
Temas tratados
•Operador booleano or ||
•Operador booleano and &&
•Cargar una imagen trabajando con la propiedad src de un elemento IMG
•Operador de concatenación +
•Operadores de igualdad == y ===
•Plantillas de cadena
Como primer ejemplo, queremos comprobar el día de la semana (recuerda que con la función getDay de un objeto fecha podemos obtener un número que corresponde al día de la semana) y mostrar en la página HTML una carita correspondiente al día.
En nuestro sitio web encontrarás siete imágenes (Figura 4.1) cuyo nombre está formado por la palabra "carita" y un número que corresponde al día de la semana al cual se refiere la figura. Recuerda que el número 0 corresponde al domingo y el 6, al sábado. Son imágenes de tipo .png.
Figura 4.1 – Las caritas que se utilizarán en este ejercicio.
Para cargar la imagen correcta, tras haber adivinado el número correspondiente al día de la semana, escribiremos el nombre de la imagen y pasaremos vía código este nombre a la propiedad src del objeto imagen.
Para simplificar, almacenamos el archivo HTML en la misma carpeta que las imágenes, aunque nada nos impide escribir el nombre de la imagen que se cargará con la ruta correcta para llegar a ella.
<body><p id="output" ></p><img id="carita" /><script type="text/javascript"> const dia = new Date().getDay(); const valorSrc ='Carita' + dia + '.png'; document.getElementById('carita').src = valoreSrc; </script></body>
Puedes encontrar este ejemplo en el archivo Carita .html
Mostramos toda la parte <body> del archivo HTML, puesto que hemos añadido una etiqueta <img>. La etiqueta tiene un atributo id, de manera que posteriormente sea posible llegar a ella a través del código. En cambio, falta el atributo src que se añadirá vía código.
Pasemos ahora a la parte JavaScript de este archivo. En primer lugar (const dia = new Date().getDay();), almacenamos en la constante dia el número del día de la semana de la fecha del sistema, después, creamos la constante valorSrc y le asignamos como valor el resultado de la escritura de la palabra “Carita” con el número del día, seguido de la extensión ".png”.
const valorSrc ='Carita' + dia + '.png';
Para crear el nombre de la imagen, hemos utilizado el operador de concatenación +, que permite unir las cadenas entre ellas.
De este modo, tenemos exactamente el valor para el atributo src de nuestra imagen: cada