Alessandra Salvaggio - JavaScript - Guía completa

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.

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.

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 horatenga un valor menor que 13. Si la condición se verifica, la variable mensajeasume 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 horaes un número menor que 21, mensajeasume el valor ‘buenas tardes’ y si horaes un número menor que 24, mensajeasume el valor ‘buena noches’.

Si ninguna de estas condiciones alternativas se verifica, entonces (instrucción else), mensajeasume el valor ‘hola’.

else mensaje = 'hola';

Las instrucciones else ify elseson 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 ifagrupando 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:

Puedes encontrar este ejemplo en el archivo Holamundodinamico2 .html