de pensar en lo que este código hace realmente, observa que las líneas de código JavaScript terminan con un punto y coma (;).
Dicho esto, vemos que en esta línea se crea una constante con el nombre saludo y se le asigna el valor ‘Hola mundo’.
La constante se crea mediante la instrucción const y es una parte de la memoria a la cual se asignan un nombre y un valor fijo que permanece inmutable durante toda la ejecución del código. Con el nombre de la constante del código se hará referencia a su valor.
Una constante puede ser utilizada varias veces en el código y, el hecho de asignarles el valor en un único punto, permite más adelante una actualización más sencilla y una gestión más fácil del valor mismo.
| NOTA | Imagínate si hubiéramos usado la constante cinco o seis veces en el código y, después, decidiéramos cambiarle el valor. Bastará cambiar el valor a la constante para que dicho valor cambie en todo el código. Si hubiéramos utilizado directamente el valor, deberíamos modificarlo cada vez que aparece. |
El nombre de una constante, o indicador, debe empezar con una letra, un guión bajo (_) o el signo del dólar ($) y puede contener caracteres alfabéticos, numéricos o guiones bajos.
Nuestra constante, concretamente, es de tipo cadena, es decir, es un texto, y se sitúa entre apóstrofes o comillas simples.
Ya anticipamos que, además del tipo cadena, una constante puede tener valores de otros tipos. Concretamente:
•booleano: es decir, un valor como verdadero/falso - true/false.
•null: un valor nulo.
•undefined: un valor no definido (la constante existe, tiene un nombre pero no un valor; a decir verdad, no es demasiado útil).
•number: un número sobre el cual se pueden realizar operaciones matemáticas.
•cadena: un conjunto de caracteres alfanuméricos.
•symbol: (nuevo en ECMAScript 2015): un tipo que se utiliza para identificar propiedades concretas dentro de los objetos (no te preocupes si no entiendes esta definición, pues todo quedará más claro cuando presentemos el concepto de objeto).
En el transcurso de este libro, tendremos la ocasión de profundizar en el tema de los tipos de datos. Sin embargo, debemos advertir de que JavaScript, a diferencia de otros lenguajes, no necesita que el tipo de constante (o de la variable, como veremos más adelante) sea declarado explícitamente. JavaScript intenta identificar el tipo de valor que se asigna.
Después de esta digresión sobre los tipos, volvamos a nuestro código y, en concreto, a la segunda línea a analizar:
document.getElementById('output').innerHTML = saludo;
El objeto document representa todo el documento HTML, del cual, mediante la función getElementById, seleccionamos el elementos con el id output.
Una vez seleccionado el objeto, que recordemos que es un elemento <p>, cambiamos su contenido HTML mediante la propiedad innerHTML: así, mostramos en su interior el contenido de la constante saludo.
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