Читать книгу JavaScript: Guía completa - Alessandra Salvaggio - Страница 11
Оглавление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 |
Cadenas multilínea
Otro aspecto interesante de las plantillas de cadena es que se pueden crear fácilmente cadenas multilínea sin necesidad de recorrer a otros operadores.
Para evitar que la cadena multilínea se refleje en el HTML en una única línea, necesitamos un bloque de código <pre>.
Así, añadimos a la parte del HTML de nuestro archivo la línea siguiente:
<pre id="output1"></pre>
Después, en la parte de JavaScript, agregamos este código:
const mensaje1 = `dime¿qué tienes programado para hoy?`……document.getElementById('output1').innerHTML = mensaje1;
Puedes encontrar este ejemplo en el archivo CaritaMensajeInicio .html
La Figura 4.2 muestra la salida de este fragmento en un navegador.
Figura 4.2 – La cadena multilínea en el navegador.
Muy a menudo se recurre a las cadenas multilínea para crear un código HTML con formato.
Para hacer una prueba, sustituye la etiqueta <pre> por una etiqueta <div> que podremos rellenar después con otros objetos HTML:
<div id="output1"></div>
Ahora, corrige también el valor de la constante mensaje1:
const mensaje1 = `<h1>hola</h1><p>¿qué tienes programado para hoy?</p>`
Puedes encontrar este ejemplo en el archivo CaritaMensajeInicioHTML .html
Ya no necesitamos realizar más cambios. Prueba el archivo en un navegador y muestra la estructura (pulsando F12 en el teclado, en la mayoría de los navegadores) o el código fuente de la página (Figura 4.3).
Observa que en la etiqueta <div> el código HTML que hemos insertado permanece distribuido de forma ordenada en varias líneas.
Figura 4.3 – La estructura de la página en el navegador.
Insertar el backtick o acento grave
Para insertar el carácter backtick con el teclado italiano, hay que pulsar la combinación de teclas ALT + 96 desde el teclado numérico.
Esto es un problema con los PC portátiles, muchos de los cuales no disponen de teclado numérico (algunos cuentan con teclas que corresponden al teclado numérico pulsando a la vez la tecla fn, pero no es lo habitual).
Por esta razón, vamos a ver cómo podemos obtener este caracter. Te proponemos dos soluciones: el mapa de caracteres y el teclado italiano 142.
La solución más inmediata, aunque quizás poco práctica, es la que implica el uso del mapa de caracteres, desde el cual podemos copiar el carácter que necesitamos (Figura 4.4).
Para abrir el mapa de caracteres, en Windows 7, selecciona Inicio > Todos los programas > Accesorios > Herramientas del sistema > Mapa de caracteres o, en Windows 10, Inicio > Todas las aplicaciones > Accesorios de Windows > Mapa de caracteres.
Otras solución, que, para nosotros, es más cómoda si se debe utilizar el backtick con frecuencia, consiste en utilizar el teclado italiano de 142 caracteres, que sería el teclado italiano para programadores.
Figura 4.4 – Backtick en el mapa de caracteres.
Para activarlo, debemos acceder a la sección Reloj, idioma y región del panel de control. (Figura 4.5).
Figura 4.5 – La sección Reloj, idioma y región del panel de control.
Para abrir esta ventana, con Windows 7 selecciona Inicio > Panel de control > Reloj, idioma y región, y con Windows 10 selecciona Inicio > Sistema de Windows > Panel de control > Hora e idioma > Región e idioma > Opciones adicionales de fecha, hora y configuración regional.
En esta ventana, selecciona Cambiar métodos de entrada y, después, en la ventana siguiente, haz clic sobre Opciones correspondiente al idioma italiano.
En la nueva ventana, haz clic en Agregar un método de entrada (Figura 4.6). En la ventana siguiente, localiza el teclado Querty Italiano 142 y haz clic en Añadir.
Figura 4.6 – Elige un nuevo método de entrada para el idioma italiano.
Una vez añadido el teclado, cierra las ventanas del panel de control y, en la barra de aplicaciones, localiza el icono del teclado actual: para el teclado italiano, aparecerá el icono IT. Pulsa sobre él y elige el teclado italiano 142 (Figura 4.7).
Figura 4.7 – Activar el teclado italiano 142.
A partir de ahora, para insertar el backtick, sencillamente deberás utilizar la combinación de teclas AltGr + ù.
Si has elegido insertar el teclado italiano 142, ten en cuenta que las combinaciones de teclas para la tecla Alt Gr se volverán a asignar.
Las nuevas combinaciones son las siguientes:
AltGr + Q = @
AltGr + 3 = #
AltGr + 5 = ¤
AltGr + 8 = [
AltGr + 9 = ]
AltGr + 7 = {
AltGr + 0 = }
AltGr + + = ~
