JavaScript
Guía completa
JavaScript
Guía completa
Es cierto que JavaScript no es un lenguaje nuevo en el panorama de la programación para web pero, en los últimos años, ha experimentado un interés y un éxito renovados.
JavaScript existe desde hace más de 20 años y ha vivido, con más o menos suerte, la evolución del mundo de Internet.
A veces desairado y considerado un lenguaje más para aficionados que para profesionales, a veces adorado por su versatilidad y simplicidad, en los últimos años está viviendo una auténtica nueva juventud.
Estándar y, por lo tanto, más riguroso según el IEEE, el lenguaje inventado por Brendan Eich dentro del proyecto para el navegador Netscape Navigator cada vez se utiliza más para grandes proyectos, no solo en entornos web. Actualmente existen aplicaciones enteras desarrolladas en JavaScript.
Por evidentes razones de espacio y para no dispersar demasiado el discurso, este libro se centrará esencialmente en el uso de JavaScript en el contexto web.
Los lectores deberán conocer en profundidad el lenguaje HTML (por descontado) y tener conocimientos de CSS; en cambio, no necesitarán competencias especiales en el campo de la programación.
El libro empieza por conceptos básicos hasta llegar a argumentos más avanzados.
El camino es exigente pero, en estas páginas, trataremos de guiar al lector paso a paso para que pueda llegar a ser autónomo y desarrollar sus propios proyectos en JavaScript.
Podéis descargar los archivos para llevar a cabo los ejercicios del libro en la página www.marcombo.info, con el código JAVA2.
JavaScript es un lenguaje de programación nacido hace más de 20 años. ¿Vale la pena aprenderlo hoy? Intentemos responder a dicha pregunta haciendo un recorrido por la evolución de este lenguaje.
JavaScript (con las letras J y S en mayúsculas y muchas veces indicado con la sigla JS) es un lenguaje de programación creado en 1995 dentro del proyecto para el navegador Netscape Navigator con el objetivo de hacer la navegación web más dinámica e interactiva.
Tal y como fue concebido inicialmente, los programas escritos en JavaScript son ejecutados por el navegador web y, por lo tanto, en el navegador del usuario y no en el servidor donde se encuentra hospedado el sitio.
Por su características, JavaScript es un lenguaje un poco anómalo y no fácilmente clasificable: su diseñador, Brendan Eich, tomó decisiones muy criticadas por los puristas de la programación, puesto que JavaScript reúne en sí mismo, de manera no siempre armoniosa, características de varios lenguajes conocidos en la época de su nacimiento.
El resultado parecía algo un poco “híbrido”: por ejemplo, su sintaxis procede en gran parte de la del lenguaje Java (por eso se denominó JavaScript, aunque la sintaxis es la única conexión entre ambos lenguajes), pero también se aleja de él en puntos fundamentales, “filosóficos”. Un ejemplo evidente: JavaScript define, igual que Java (y otros lenguajes como SmallTalk) el concepto de objeto (volveremos a este concepto en el transcurso de este libro), pero, por sus características, no puede definirse como un auténtico lenguaje orientado a objetos.
JavaScript posee características de lenguajes funcionales (como Scheme) y, de hecho, define funciones como elementos de primera clase (first class function), pero no es un lenguaje funcional puro.
A este “pecado original”, se añadieron para arruinar la reputación de JavaScript los efectos de la denominada guerra de navegadores, es decir, una amarga competitividad entre Microsoft y los otros fabricantes de navegadores para hacerse con el liderazgo del mercado.
¿Y qué tiene que ver JavaScript con todo esto? Tratemos de entenderlo. En 1996, Microsoft creó, para Internet Explorer 3, el lenguaje jScript, una versión propia de JavaScript con características específicas y comportamientos distintos a los de JavaScript, lo que hizo que los sitios desarrollados con una de las dos versiones del lenguaje no fueran compatibles con todos los navegadores.
Todos estos elementos de confusión, unidos a la concepción difusa de finales de los años 90 y principios de los 2000, según la cual las aplicaciones “serias” se ejecutaban sobre servidores y no sobre el cliente (PC del usuario), provocaron que los desarrolladores profesionales adoptaran una posición muy negativa contra JavaScript, considerado solo un lenguaje para aficionados y gráficos.
Así, pues, ¿debemos considerar JavaScript como un lenguaje de serie B? Nosotros creemos que no. Vamos a ver por qué.
A principios de esa década, la situación empezó a cambiar. Nacieron muchos elementos nuevos que contribuyeron a generar una consideración distinta de JavaScript por parte de la comunidad de desarrolladores. Resumimos aquí brevemente los principales.
En primer lugar, el nacimiento de Chrome (2008), impulsado por el gigante Google, produce un fuerte cambio en el mercado de los navegadores: su motor de ejecución de JavaScript (V8) incrementó hasta tal punto la velocidad de JavaScript que permitió tener aplicaciones complejas en ejecución en el navegador, es decir, sin tener que instalarlas antes en el PC. Esta posibilidad hoy en día parece más bien normal, pero hace 10 años no lo era en absoluto. Fue una gran revolución.
|
NOTA |
Las estadísticas de uso de los navegadores (por ejemplo, https://www.w3counter.com/globalstats.php) indican que Chrome es el navegador más utilizado, seguido de lejos por Safari (para móvil). Internet Explorer, Opera y Firefox quedan muy por detrás. |
En segundo lugar, los nuevos procesadores multicore o multinúcleo (dual, quad...) permiten una ejecución real en paralelo de los programas. Esta potencia puede ser bien explotada con técnicas “asíncronas” de programación que encuentran en JavaScript un entorno muy adecuado (encontrarás los detalles de la ejecución asíncrona en el capítulo dedicado a Ajax).
No podemos olvidarnos del nacimiento de la denominada web 2.0 que, con su fuerte integración entre los servicios ofrecidos por los distintos sitios (por ejemplo, el modo en que las redes sociales se integran entre ellas), ha impulsado la creación de aplicaciones basadas en los navegadores.
Por último, pero no menos importante, la creación de un estándar del lenguaje Java-Script aceptado por todos los fabricantes de navegadores ha llevado a una especie de “ennoblecimiento”.
La creación de un estándar, conocido como ECMAScript, fue obra de la ECMA (European Computer Manufacturers Association, conocida actualmente como ECMA International).
Esta asociación fue fundada, con sede en Ginebra, en 1961 con el deber de crear estándares para el sector informático y de las telecomunicaciones.
En 1996, Netscape confió JavaScript a ECMA con la tarea específica de crear un estándar. En 1997 nació la primera edición de ECMA-262, lo que actualmente se conoce como ECMAScript (nombre de compromiso entre las instancias sobre todo de Netscape y Microsoft).
Desde entonces se han ido sucediendo distintas versiones de ECMAScript, de las cuales JavaScript es una implementación.
Todos estos acontecimientos han determinado un renovado y creciente interés por Javascript, incluso fuera de su entorno tradicional (el web). Actualmente, de hecho, es posible crear aplicaciones stand alone en JavaScript que no necesitan un navegador. Entre estas aplicaciones destacamos:
•Aplicaciones de escritorio (que se instalan en el PC) como Visual Code, de la cual hablaremos en un apéndice y que hemos utilizado para escribir los ejemplos de este libro.
•Aplicaciones de servidor gracias a plataformas como Node.js.
•Aplicaciones móviles (tabletas y smartphones).
•Aplicaciones IoT (Internet of Things o Internet de las cosas).
Estas aplicaciones SIN navegador no forman parte de este libro, que se centrará, en cambio, en el uso de JavaScript en el entorno de los sitios de Internet y de la web.
Sin embargo, esto no quita que el uso de JavaScript fuera de la web haya contribuido a hacer crecer su fuerza y su popularidad.
En los últimos años, como hemos podido ver, JavaScript se ha convertido en un lenguaje con una importancia y una presencia significativas, en muchos ámbitos y marcos distintos.
Siempre es difícil medir la popularidad y la difusión de un lenguaje, pero los principales indicadores sitúan a JavaScript de forma estable entre los 10 primeros: por ejemplo, ocupa la primera posición en la clasificación de GitHub (https://octoverse.github.com/), la séptima en la del IEEE (https://spectrum.ieee.org/computing/software/the-2017-top-programming-languages) y la octava para TIOBE (https://www.tiobe.com/tiobe-index), etc.
Clasificaciones a parte, JavaScript es un lenguaje que vale la pena tener en cuenta para proyectos propios y, si aún necesitas más confirmaciones, te aconsejamos que visites la página http://shouldilearnjavascript.com/.
Existen 8 versiones de ECMA-262; la publicación de nuevas versiones se produce en estos momentos anualmente, por lo que, desde la edición 6 del estándar, el nombre de la versión sigue el año de publicación, aunque se ha elegido mantener también el número de orden de las ediciones.
La última versión disponible en estos momentos es ECMAScript 2017, también conocida como ES8 por ser la octava edición del estándar. Existe una nueva versión, la ECMAScript 2018, en fase avanzada de definición.
Si consideramos el ámbito que nos interesa (el web), esta última edición es incluso demasiado nueva para contar con un buen soporte por parte de los navegadores.
Podemos decir que las versiones de referencia son la 5 y la 6 (la primera conocida también con el nombre del año, ECMAScript 2015).
|
NOTA |
El proyecto Kangax en GitHub aporta algunas tablas que detallan el nivel de compatibilidad de los navegadores (y de aplicaciones como Node.js), en función de la edición de ECMAScript: ES5: https://kangax.github.io/compat-table/es5/ ES6: https://kangax.github.io/compat-table/es6/ ES2016/2017: http://kangax.github.io/compat-table/es2016plus/ |
A finales de 2017, los cuatro navegadores principales (Chrome, Safari, Firefox y Microsoft
Edge) cuentan con un muy buen soporte (>95 %) del ES6; es a esta versión a la que haremos referencia en este libro.
Las críticas de los teóricos hacia JavaScript favorecieron el nacimiento de variantes de JavaScript que lo “mejoran” en los puntos considerados como más débiles.
Los programas escritos con estos lenguajes, para no perder la posibilidad de ser utilizados dentro de los navegadores, los cuales soportan solo programas escritos en JavaScript, deben ser posteriormente traducitos a JavaScript. La traducción se lleva a cabo de forma automática por medio de programas especiales denominados transpiler, que toman el programa escrito en un lenguaje y lo traducen a otro programa escrito en un lenguaje distinto.
Entre estos lenguajes variantes de JavaScript, uno de los más populares es el TypeScript de Microsoft. Angular, uno de los frameworks de JavaScript más utilizados, desde su versión 2, está escrito en TypeScript y no en JavaScript.
Antes de empezar a describir el potencial de JavaScript, queremos hacer una panorámica de las herramientas que pueden ser útiles para trabajar y mostrar cómo integrar los comandos de este lenguaje en las páginas HTML.
Temas tratados
•Herramientas de trabajo
•Integración de código JavaScript en páginas HTML
Empecemos por las herramientas de trabajo.
Si bien, teóricamente, para escribir código JavaScript y HTML basta con disponer de un editor de textos (como el Bloc de notas) y un navegador, cuando se empieza a escribir código de un modo un poco más “serio”, las herramientas adecuadas pueden realmente marcar la diferencia.
Sin pretender ser exhaustivos, en las páginas siguientes proponemos una panorámica de las herramientas (gratuitas) más conocidas.
Una primera alternativa al Bloc de notas está formada por editores de texto “más evolucionados”.
Recordemos tres de ellos:Notepad ++, Atom y Visual Studio.
El primero de ellos, Notepad ++, es un editor gratuito que puede descargarse desde el sitio https://notepad-plus-plus.org/.
Su interfaz es sencilla y de fácil uso.
Dispone de una serie de características muy útiles:
•Resaltado de la sintaxis.
•Agrupación de partes homogéneas de código (Syntax Folding) para poder ocultar o mostrar partes de un documento largo.
•Resaltado de la sintaxis y Syntax Folding personalizado por el usuario.
•Resaltado de los paréntesis.
•Búsqueda/reemplazo mediante expresiones regulares (Perl Compatible Regular Expression).
•Función Autocompletar de la sintaxis.
•Marcadores.
•Pantalla con pestañas.
•Visualización de documentos en paralelo para su comparación.
Atom es un editor gratuito que se puede descargar desde el sitio https://atom.io/ disponible para distintas plataformas (OS X, Windows y Linux). Puede ser completado con distintos paquetes de código abierto y dispone de soporte para el sistema de control de versiones Git.
Entre los puntos fuertes de Atom se encuentra:
•Función Autocompletar.
•Resaltado de la sintaxis.
•Función de búsqueda y reemplazo entre distintos archivos.
•Posibilidad de abrir varios archivos en paneles paralelos para poder compararlos.
Visual Studio Code es el editor que hemos utilizado para escribir los ejemplos de este libro. También hemos dedicado un apéndice a su instalación y configuración. Es un editor desarrollado por Microsoft para diversas plataformas (OS X, Windows y Linux). Se trata de una herramienta gratuita que se puede descargar desde la página https://code.visualstudio.com/.
Dispone de Git integrado y se puede completar con otros paquetes.
Entre sus puntos fuertes se encuentran:
•Función Autocompletar.
•Resaltado de la sintaxis.
•Función de búsqueda y reemplazo entre distintos archivos.
•Posibilidad de fijar breakpoints o puntos de interrupción.
•Trabaja directamente con archivos y carpetas sin necesidad de crear proyectos.
Un linter es un programa que por lo general se integra con un editor de código y permite resaltar los errores de sintaxis o, en general, de escritura del código.
Uno de los linter para JavaScript más conocido es ESLint (https://eslint.org/).
En el apéndice dedicado a Visual Studio Code explicaremos cómo integrar esta útil herramienta en el editor de Microsoft.
Muchos de los ejemplos de este libro pueden ser ejecutados desde un sistema de archivos, pero, en ciertos casos, es preciso ejecutar las pruebas del código desde un servidor web.
Puedes utilizar un servicio online o bien, y esta es la solución que te recomiendo si quieres evitar tener que transferir archivos por FTP (corres el riesgo de probar los archivos en una versión que no sea la última y crear confusión), se puede instalar un servidor web en el ordenador local. Aconsejamos XAMPP (https://www.apachefriends.org/es/index.html), a cuya instalación hemos dedicado un breve apéndice.
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="codice.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="funzCookie.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>
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.
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 texto
const saludo = 'Hola mundo';
// Busco en el DOM la etiqueta con ID = 'output' y asigno su contenido
document.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 comentada
segunda línea comentada
tercera 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.
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 sistema
const 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 contenido
document.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: • • • |
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: • • • • • • • • • Para las funciones que acabamos de ver, existen los correspondientes 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.
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 |
Declara 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 |
Verifica si hora es igual a la cadena “5”. Esta expresión devuelve |
|
=== |
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 |
La primera expresión es falsa, porque los tipos son distintos, mientras que la segunda es verdadera porque los tipos son iguales |
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.
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 + + = ~
