Kitabı oku: «JavaScript: Guía completa», sayfa 2
Integrar los comandos JavaScript en las páginas HTML
Tras haber visto la variedad de herramientas que pueden facilitar el trabajo, vamos a ver cómo hacer que convivan JavaScript y HTML.
Básicamente, contamos con dos posibles soluciones:
•Insertar el código JavaScript dentro del mismo archivo que contiene el HTML.
•Escribir el código JavaScript en un archivo externo con extensión .js y después llamar este archivo en el HTML.
Empezamos con un ejemplo del primer caso:
<!doctype html><html lang="es"><head><meta charset="utf-8"><title>Prova1</title><meta name="description" content="Prueba1"></head><body><p id="output" /><script type="text/javascript">const msgHello = 'Hola mundo';document.getElementById('output').innerHTML = msgHello;</script></body></html>
Independientemente de lo que hace este código y de su sintaxis, observa que las instrucciones de JavaScript están insertadas en la etiqueta <script> y se especifica como atributo el tipo de código contenido en la etiqueta (que es text/javascript).
Observa también que el código está escrito al final de la página, justo antes del cierre de la etiqueta <body>, de manera que el código sea llamado cuando todo el DOM del documento HTML haya sido cargado.
Esta posición del código no es obligatoria, pero sí muy recomendable para evitar problemas derivados de la no carga (temporal) de elementos a los cuales podría referirse el código.
| NOTA | DOM, Document Object Model, es el conjunto de objetos de un documento HTML que pueden ser manipulados mediante código. Hablaremos de ello de forma detallada en un capítulo dedicado. |
El segundo caso, que es más práctico si el código JavaScript es complejo y largo o si este se debe utilizar en más de un archivo, consiste en crear dos archivos distintos, el HTML y el .js, con código JavaScript y después llamar al archivo .js dentro del archivo HTML, como en el siguiente ejemplo:
<!doctype html><html lang="es"><head><meta charset="utf-8"><title>Prueba1</title><meta name="description" content="Prueba1"><!--<link rel="stylesheet" href="css/styles.css?v=1.0">--></head><body><p id="output" /><script type="text/javascript" src="http://litres.rucodice.js"></script></body></html>
El archivo .js es llamado mediante el atributo src de la etiqueta <script>. También en este caso, el código JavaScript es llamado al final del cuerpo del documento.
En realidad, los dos casos (archivo externo, código interno en el archivo) pueden coexistir. Podríamos decir que el archivo externo contiene código genérico que es válido para varias páginas, mientras que el interno del archivo HTML solo tiene código específico para la página o para una acción puntual. En este caso, se necesitan dos (o más) etiquetas <script>, una para llamar al archivo externo y otra, para el código gestionado de forma interna.
<script type="text/Javascript" src="http://litres.rufunzCookie.js"></script><script>let nombreUsuario = leerCookie('userName');if (nombreUsuario != '') {document.getElementById('saludo').innerHTML = `Hola ${nombreUsuario}`;} else {nombreUsuario = prompt('No te conozco. Escribe tu nombre:', '');if (nombreUsuario != '' && nombreUsuario != null) { configuraCookie('userName', nombreUsuario, 3);}}</script>
Advertencia
La solución más común para la escritura del código es la que prevé tener el código en un archivo externo que se llamará en el archivo HTML, pero, para facilitar el uso de los ejemplos del libro, hemos mantenido el código interno en el archivo HTML.
Así, cada archivo es “autosuficiente” y funcional, sin necesidad de muchas dependencias.
¡Hola mundo!
Cuando se aprende a programar, el primer ejemplo siempre es el de mostrar un mensaje de saludo. Nosotros también lo haremos así.
Temas tratados
•Escribir dentro de un elemento HTML
•Crear comentarios en el código
•Crear constantes y variables
•Tipos de datos
•Usar instrucciones condicionales (if)
•Crear y utilizar objetos de tipo dato
•Modificar la clase de estilo asignada a un elemento HTML
Aportamos solo la parte <body> del archivo que, evidentemente, deberá completarse con un encabezado.
<body><p id="output" ></p><script type="text/javascript">// Constante de tipo textoconst saludo = 'Hola mundo';// Busco en el DOM la etiqueta con ID = 'output' y asigno su contenidodocument.getElementById('output').innerHTML = saludo;</script></body>
Puedes encontrar este ejemplo en el archivo Holamundo .html .
Para empezar, creamos una etiqueta <p> a la cual asignamos el id “output” que después manipularemos vía código. Es importante asignar el atributo id a los elementos HTML que vamos a gestionar vía código, puesto que el valor de este atributo permite hacer referencia fácilmente al objeto en cuestión.
La parte Javascript de nuestro archivo está formada por dos líneas de código y dos líneas de comentarios. Las líneas de comentario son las que empiezan con una doble barra inclinada (//) y son líneas que no se ejecutan, sino que permiten al desarrollador insertar notas y comentarios concretos para facilitar una futura lectura o una gestión por parte de otros desarrolladores.
JavaScript también permite comentar un bloque entero de líneas, sin tener que poner necesariamente la doble barra delante de cada línea.
Para comentar en bloque un grupo de líneas, basta con poner barra asterisco (/*) al inicio de la primera línea que deseamos comentar y asterisco barra (*/) al final de la última:
/* primera línea comentadasegunda línea comentadatercera línea comentada */
Después de este paréntesis acerca de los comentarios, centrémonos en las dos líneas de código auténtico, empezando por la primera.
const saludo = 'Hola mundo';
Antes 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 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.
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 día, cargaremos una imagen distinta.
document.getElementById('carita').src = valorSrc;
La técnica que hemos visto para escribir las cadenas funciona perfectamente y se utiliza en casi todos los lenguajes de programación, pero ECMAScript 6 introdujo otra técnica muy interesante que se basa en plantillas de cadena (o template litterals, en inglés).
En lugar de usar la instrucción:
const valorSrc ='Carita' + dia + '.png';
podríamos haber escrito
const valorSrc = `Carita${dia}.png`;
El resultado habría sido idéntico, pero habríamos utilizado una plantilla de cadena.
Lo primero que debemos observar en las plantillas de cadena es que no están encerradas entre comillas como las cadenas normales, sino entre el carácter backtick (` `) o acento grave. Este carácter se obtiene pulsando la tecla situada a la derecha de la tecla P.
| NOTA | Resulta muy incómodo escribir el carácter backtick en los ordenadores portátiles que no tienen teclado numérico. En la sección Insertar el backtick o acento grave, al final de este capítulo, proponemos algunas soluciones para ello. |
Las plantillas de cadena pueden contener marcadores. Estos se indican con el signo del dólar y entre llaves (${expresión}). Durante la ejecución, el marcador queda sustituido con el valor de la expresión que contiene. En nuestro caso, está sustituido por el valor de la constante dia.
Un aspecto interesante de las plantillas de cadena es que dentro del marcador las expresiones se ejecutan y, por lo tanto, se pueden llevar a cabo, por ejemplo, operaciones matemáticas.
Añade al código propuesto anteriormente las líneas siguientes:
let mensaje;mensaje = `Faltan ${6 - dia} días para el fin de semana`……document.getElementById('output').innerHTML = mensaje;
Nuestra variable mensaje contiene una plantilla de cadena. En su interior, hay un marcador en el cual se ejecuta una operación matemática. El resultado de esta operación será sustituido por el marcador.
Dentro de las plantillas de cadena, también es posible insertar código HTML. Podríamos modificar nuestro ejemplo de la siguiente manera:
mensaje = `Faltan <strong> ${6 - dia} </strong> días para el fin de semana`
Podríamos complicar un poco nuestro ejemplo mostrando un mensaje distinto si el día en que nos encontramos es sábado o domingo (de hecho, no tiene demasiado sentido que en estos días se muestren los días que faltan para el fin de semana).
Así, pues, podríamos sustituir la línea de código anterior con la instrucción if siguiente:
if (dia === 0 || dia === 6) mensaje = 'Buen fin de semana'else mensaje = `Faltan ${6 - dia} días para el fin de semana`
Puedes encontrar este ejemplo en el archivo caritaMensaje .html
La parte else de este códido es absolutamente clara: centrémonos en la parte if, que contiene muchas novedades.
En primer lugar, encontramos el nuevo operador === que verifica la igualdad entre el valor de la variable dia y los números 0 o 6.
El operador === os puede sorprender un poco, y existe también en JavaScript el operador ==, aunque la verificación de igualdad es menos estricta.
La Tabla 4.1 resume el significado de los distintos operadores que utilizan el símbolo =.
Otra novedad de este código consiste en el hecho de que la instrucción condicional, de hecho, verifica dos condiciones: que dia sea igual a 0 o que sea igual a 6 (es decir, que sea domingo o sábado).
Las dos comparaciones están unidas por el operador ||, que indica un or booleano, es decir, la condición en su conjunto es verdadera si como mínimo una de las dos (o más) condiciones unidas por el operador || es verdadera.
| NOTA | Para obtener el operador || hay que teclear dos veces el carácter |, que se encuentra en la tecla 1 del teclado alfanumérico. Para obtenerlo, debes pulsar la combinación AltGr + 1. |
Si se desea que las condiciones en su conjunto sean verdaderas cuanto todas las condiciones especificadas son verdaderas, hay que unirlas con el operador &&, que indica un and booleano. Obviamente, en este caso específico, el uso de && no tendría ningún sentido porque la variable dia no puede tener el valor 0 y 6 simultáneamente. Su valor puede ser o 0 o 6.
Tabla 4.1 – Operadores.
| Operador | Significado | Ejemplo |
| = | Asigna un valor a una variable o a una constante | const hora = 5Declara la constante hora y le asigna como valor el número 5 |
| == | Operador de igualdad. Verifica la igualdad entre las expresions a su derecha y a su izquierda. Las expresiones deben ser iguales en el valor pero no necesariamente en el tipo | hora == "5"Verifica si hora es igual a la cadena “5”.Esta expresión devuelve Verdadero porque los valores son iguales incluso si los tipos son distintos (en realidad, hora es un número) |
| === | Operador comparativo. Verifica la igualdad entre las expresiones a su derecha y a su izquierda. Las expresiones deben ser iguales tanto en el valor como en el tipo | hora === "5"hora === 5La primera expresión es falsa, porque los tipos son distintos, mientras que la segunda es verdadera porque los tipos son iguales |
