JavaScript como nunca antes se lo habían contado E-Book

Tomás Domínguez Mínguez

• Herausgeber: Marcombo
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Spanisch
• Veröffentlichungsjahr: 2024

Seitenzahl: 360

Beschreibung

Si conoce HTML y CSS, ya habrá experimentado la satisfacción de poder desarrollar sus propias páginas web. Pero también se habrá dado cuenta de la limitación que conlleva trabajar únicamente con contenido estático. La necesidad de superar esta restricción fue precisamente la que motivó el nacimiento de JavaScript, cuya principal fortaleza es su capacidad para generar contenido de forma dinámica durante la interacción con el usuario. En este libro encontrará la descripción del lenguaje JavaScript desde cero, por lo que partirá de los conceptos de programación más básicos, como los tipos de datos primitivos, y llegará a otros más avanzados, como los objetos, que le llevarán al conocimiento de los modelos DOM (Document Object Model, modelo de objetos del documento) y BOM (Browser Object Model, modelo de objetos del navegador). Gracias a esta lectura podrá: •Crear y modificar páginas web de forma dinámica. Las etiquetas HTML se convertirán en piezas de LEGO que le permitirán construir la estructura que luego rellenará con el texto y las imágenes, a las que finalmente aplicará el estilo deseado. •Generar animaciones y juegos en los que existan objetos o personajes capaces de relacionarse entre sí o con el usuario. •Compartir datos entre páginas o almacenarlos en el propio dispositivo para recuperarlos posteriormente. •Desarrollar aplicaciones web que puedan ser manejadas tanto con un teclado y un ratón como a través de pantallas táctiles. •Utilizar sensores presentes en la mayoría de los teléfonos móviles, como el giroscopio o el acelerómetro, para controlar una aplicación web en base a su posición. Todos los conceptos introducidos en cada capítulo van seguidos de ejemplos que muestran cómo llevarlos a la práctica. Su código, ya sea HTML, CSS o JavaScript, se explica línea a línea para aclarar cualquier interrogante sobre su funcionamiento. No lo dude y adéntrese en el mundo de las aplicaciones web con JavaScript para dar un paso más allá como desarrollador de páginas HTML. Tomás Domínguez es ingeniero de telecomunicación y doctorado en inteligencia artificial. Su labor profesional se ha desarrollado en una multinacional de telecomunicaciones, donde ha ocupado diversos cargos relacionados con la tecnología. Asimismo, ha ejercido como profesor universitario de ingeniería informática en la Universidad Alfonso X el Sabio de Madrid.

Leseprobe

JavaScript como nunca antes se lo habían contado

Primera edición, 2024

© 2024 Tomás Domínguez Mínguez

© 2024 MARCOMBO, S. L.

www.marcombo.com

Ilustración de cubierta: Jotaká

Maquetación: quimdiaz.net

Corrector: Nuria Barroso

Directora de producción: M.a Rosa Castillo

La presente publicación tiene una finalidad educativa y se destina a la formación de estudiantes y profesionales. Su objetivo es informar de manera precisa y concisa. La elaboración del contenido, aunque se ha trabajado de modo escrupuloso, no puede comportar una responsabilidad específica para el autor ni el editor de los posibles errores o imprecisiones que pudiera contener la presente obra.

En algunas imágenes de este libro se emplean diversas ilustraciones de los autores Pixel perfect y Creative Stall Premium de Flaticon. También se utilizan diversas ilustraciones de los autores Khushmeen icons, Good Ware e Ikonate Icons de Iconfinder, con licencia Creative Commons Attribution 4.0 International (CC BY 4.0).

Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra.

ISBN del libro en papel: 978-84-267-3810-3

ISBN del libro electrónico: 978-84-267-3860-8

Producción del ePub: booqlab

TABLA DE CONTENIDO

1. INTRODUCCIÓN

1.1 ¡Hola Mundo!

2. SINTAXIS BÁSICA

3. VARIABLE Y CONSTANTES

3.1 Variables

3.2 Constantes

4. TIPOS DE DATOS PRIMITIVOS

4.1 Boolean

4.2 Number

4.3 String

4.4 Null y undefined

4.5 Conversión entre tipos de datos primitivos

4.5.1 Conversión a números

4.5.2 Conversión a cadenas

4.5.3 Conversión a valores booleanos

5. OPERADORES

5.1 Operadores aritméticos

5.2 Operadores de asignación

5.3 Operadores de comparación

5.4 Operadores lógicos .

5.5 El operador condicional .

5.6 El operador typeof

5.7 Precedencia de operadores

6. SENTENCIAS DE CONTROL DE FLUJO

6.1 if...else

6.2 switch...case

6.3 for

6.4 while y do...while

6.5 break y continue

7. FUNCIONES

7.1 Invocación de una función

7.2 El tipo de datos Function

7.3 Alcance de las variables

8. OBJETOS

8.1 Propiedades

8.2 Métodos

8.3 La función constructora

8.4 Mutabilidad

8.5 Objetos globales

8.5.1 El objeto Array

8.5.1.1 Acceso a los elementos de un array

8.5.1.2 Uso de arrays como colas o stacks

8.5.1.3 Métodos de unión, división y transformación de arrays

8.5.1.4 Métodos de ordenación de los elementos de un array

8.5.2 El objeto String

8.5.2.1 Acceso a los caracteres de una cadena

8.5.2.2 Métodos de manejo de cadenas

8.5.2.3 Plantillas literales

8.5.3 El objeto Date

8.5.3.1 Métodos de manejo de fechas

8.5.4 El objeto Math

9. EL DOM

9.1 Estructura de datos del DOM

9.2 Interfaz de programación del DOM

9.2.1 Nodos

9.2.2 Elementos HTML

9.3 Acceso a los elementos HTML de un documento HTML

9.3.1 Acceso directo

9.3.2 Acceso a través de la estructura del DOM

9.4 Modificación de la estructura de un documento HTML

9.5 Gestión de eventos

9.5.1 Eventos

9.5.2 Controladores de eventos

9.5.3 Prácticas de manejo de eventos.

9.5.3.1 Validación de los datos de un formulario

9.5.3.2 Editor gráfico

9.5.3.3 Menú contextual

9.5.4 Burbujeo de eventos

10. HERRAMIENTAS PARA DESARROLLADORES DE CHROME

10.1 Mensajes de traza

10.2 La sentencia debugger

10.3 Breakpoints

11. EL BOM

11.1 La ventana del navegador

11.1.1 Dimensiones y posición de la ventana del navegador

11.1.2 Carga de los elementos de una página

11.1.3 Cuadros de diálogo

11.1.4 Foco

11.2 Temporizadores

11.2.1 Prácticas

11.2.1.1 Animación de imágenes

11.2.1.2 Movimiento de imágenes en una ventana

11.2.1.3 Movimiento de imágenes dentro de una zona de la ventana

11.2.1.4 Gestión del tamaño de la ventana

11.2.1.5 El juego del frontón

11.3 La pantalla del dispositivo

11.4 El navegador

11.5 Las direcciones web

12. ALMACENAMIENTO DE DATOS

12.1 Prácticas

12.1.1 Almacenamiento de sesión

12.1.2 Almacenamiento persistente

13. APLICACIONES MÓVILES

13.1 El servidor web de XAMPP

13.2 Pantallas táctiles

13.2.1 Prácticas

13.2.1.1 Editor de páginas web

13.2.1.2 Atrapa el zombi

13.3 Sensores de orientación espacial

13.3.1 Bloqueo de la orientación de la pantalla

13.3.2 Control basado en la orientación del dispositivo

13.3.3 Prácticas

13.3.3.1 Efecto de flotación

13.3.3.2 Efecto de gravedad

14. ANEXO

14.1 Explosión de un globo con efecto sonoro

14.1.1 Código HTML

14.1.2 Código JavaScript

14.2 Gestión del tamaño de la ventana

14.2.1 Código HTML

14.2.2 Código JavaScript

14.3 Juego del frontón manejado con el ratón

14.3.1 Código HTML

14.3.2 Código JavaScript

14.4 Almacenamiento de datos de sesión

14.4.1 Código HTML

14.4.1.1 Página de acceso

14.4.1.2 Página de popup

14.4.1.3 Página privada

14.4.2 Código JavaScript

14.4.2.1 Página de acceso

14.4.2.2 Página de popup

14.4.2.3 Página privada

14.5 Juego del frontón con ventana de configuración

14.5.1 Código HTML

14.5.2 Código JavaScript

Unidad 1

INTRODUCCIÓN

A principios de los años 90, en los inicios de la WWW (World Wide Web), las páginas web se escribían básicamente en HTML (aunque, tímidamente, empezaba a utilizarse CSS), lenguajes con los que se daba estructura y forma al contenido publicado en Internet. Sin embargo, estos lenguajes solo permitían mostrar contenido estático, por lo que cualquier interacción con el usuario (tal como ya se hacía con las aplicaciones de escritorio tradicionales) pasaba por el envío de información al servidor, que, tras procesarla, devolvía otra página estática como respuesta. Esto suponía una importante limitación para las primeras aplicaciones web ya que, según iban aumentando en complejidad, tardaban cada vez más en cargarse debido a las velocidades de comunicación existentes en aquella época (se utilizaban módems de 28 800 bits/sg). La simple verificación de los datos de un formulario suponía tiempos de respuesta que impedían una interacción ágil con el usuario, lo que provocaba un rechazo que amenazaba el despegue, incluso la viabilidad, de este nuevo tipo de aplicaciones basadas en tecnología web.

Por ese motivo, cuando la empresa Netscape (creadora del primer navegador comercial) contrató a Brendan Eich (cofundador del proyecto Mozilla), lo primero que le encargó fue un nuevo lenguaje de programación ligero que se ejecutara en su navegador. El objetivo era dotarle de la capacidad necesaria para realizar algunas de las tareas de procesamiento que hasta ese momento venían haciendo únicamente los servidores web. Se quería evitar la comunicación de ida y vuelta (y el consecuente tiempo de espera) entre las peticiones del usuario y las respuestas del servidor.

Como resultado de este encargo, Brendan creo en 1995 LiveScript (fue el nombre inicial de JavaScript), que se incorporó al navegador Netscape Navigator 2.0, convirtiéndose en el primero que incluía soporte a un lenguaje de script en las páginas web. Originalmente apenas servía para algo más que para validar formularios, pero resultó ser un gran éxito, por lo que se fue expandiendo con rapidez.

El cambio de nombre a JavaScript se realizó tras la compra de Netscape Navigator por parte de Sun Microsystems (adquirida posteriormente por Oracle en 2010), empresa creadora de Java. Los motivos no están claros. Algunos creen que fue una cuestión de marketing, ya que Java era la palabra de moda en el mundo de la informática e Internet en aquella época. Sin embargo, otras fuentes señalan que se quería evitar problemas legales con Microsoft, que acababa de lanzar JScript (lenguaje prácticamente idéntico) para su navegador Internet Explorer.

En este contexto técnico y comercial, Netscape decidió estandarizar el lenguaje JavaScript para evitar una guerra de tecnologías. Por ese motivo, en 1997 se envió la especificación JavaScript 1.1 al organismo ECMA (European Computer Manufacturers Association), que creó el comité TC39 con objeto de normalizar un lenguaje de script multiplataforma e independiente del navegador donde se ejecutara. El primer estándar de este comité fue el denominado ECMA-262, en el que se definió el lenguaje ECMAScript (nombre que algunos programadores prefieren utilizar, en vez de JavaScript). Poco después, dicha especificación también se convirtió en un estándar ISO (Internacional Organization for Standardization, Organización Internacional de Normalización), en concreto, el ISO/IEC-16262.

A partir de entonces, ECMA ha ido sacando nuevas versiones conocidas por su nombre abreviado ES1, ES2, etc., hasta ES6, en 2015. A partir de ese año, pasaron a llamarse ECMAScript 2016, 2017, etc. De todas ellas, la que ha marcado los fundamentos del lenguaje JavaScript tal como lo conocemos actualmente es la ES6 (también conocido como ECMAScript 2015, por el año de su lanzamiento), motivo por el que es la especificación en la que se basa esta obra.

1.1 ¡HOLA MUNDO!

Si ha estudiado otros lenguajes de programación, seguramente sospechara que empezaría desarrollando el conocido ¡Hola Mundo! Aunque no hay normas escritas sobre lo que debe hacer, generalmente muestra en pantalla el texto que le da nombre. Se emplea para dar una visión general de las principales características del lenguaje y tener un contacto inicial con su entorno de desarrollo y ejecución. A este último respecto no tendrá que hacer uso de ninguno en concreto, ya que el código se puede escribir en cualquier editor de texto y ejecutar en cualquier navegador.

En relación a los editores de texto, una buena opción son los de uso libre, como, por ejemplo, Atom, Notepad++, GNU Emacs o Visual Studio Code. También son válidos aquellos que vienen de serie con los sistemas operativos, como el Bloc de notas de Windows o TextEdit en OS X. Sin embargo, evite los paquetes ofimáticos (por ejemplo, Office 365) porque introducen elementos ocultos que provocan errores de ejecución.

Entre todos ellos destaca Visual Studio Code, ya que también es muy popular como editor de código HTML y CSS. Aunque no sea un editor específico de JavaScript, una vez que abre o crea un archivo con la extensión “.js” presupone que contiene código escrito en dicho lenguaje y ofrece de forma nativa multitud de ayudas y menús contextuales que facilitan su escritura. No tendrá que realizar ninguna configuración ni tampoco instalar ningún plugin específico para empezar a usar funciones como la de IntelliSense (autocompletado), formateo de código e, incluso, herramientas de depuración, por poner algún ejemplo.

Si todavía no dispone de esta herramienta, no dude en descargarla de https://code.visualstudio.com/download. Aunque una vez instalada podrá empezar a utilizarla de forma casi inmediata, le animo a documentarse sobre las múltiples facilidades que ofrece. Solo así podrá sacar el máximo provecho, tanto del propio editor como de los complementos que, de forma opcional, añaden todo tipo de características que mejoran su experiencia de uso.

De las opciones ofrecidas en la página de descarga de Visual Studio Code, la más sencilla es descargar el instalador. Hay dos: User Instaler (instalador de usuario) y System Instaler (instalador del sistema). La diferencia entre ambos es que el primero instala el editor en su carpeta de usuario y no necesita privilegios de administrador, mientras que el segundo lo instala para todos los usuarios del sistema.

Si el desarrollo de código JavaScript solo requiere un editor como Visual Studio Code, su ejecución solo exige un navegador. Puede usar cualquiera de los más conocidos, como Firefox, Chrome, Opera, Safari o Edge (Internet Explorer está fuera de soporte). Aunque en los ejercicios descritos a lo largo de este libro se utilice exclusivamente Chrome, todos ellos disponen de un motor JavaScript que interpreta los programas desarrollados en este lenguaje. Sin embargo, no todos los navegadores son compatibles al 100% con el estándar ECMAScript, por lo que, al igual que sucede con HTML y CSS, los resultados podrían llegar a variar de unos a otros.

Ahora sí, abra Visual Studio Code (o su editor favorito), cree un nuevo fichero llamado “holaMundo.html” y escriba el siguiente código:

Como puede observar, el código JavaScript forma parte de la etiqueta <script> situada dentro de la cabecera (etiqueta <head>), aunque también habría podido incluirse en el cuerpo del documento HTML (etiqueta <body>). Se trata de un código muy sencillo formado por una sentencia alert() que abre una ventana emergente con el texto pasado como argumento (“Hola Mundo”).

Una vez guardado el archivo, acceda a la carpeta donde se encuentra y pulse sobre él con el botón derecho del ratón. En el menú contextual que aparece, seleccione la opción “Abrir con” y, finalmente, “Google Chrome”.

Aunque en todas las prácticas se haga referencia a Google Chrome, puede utilizar cualquier otro navegador. Si fuera el configurado por defecto en su ordenador, solo tendría que abrirlo igual que hace con los archivos de cualquier otra aplicación.

El resultado es el que puede ver a continuación, en el que el navegador muestra el texto “Hola Mundo” en una ventana de alerta.

Al pulsar el botón “Aceptar” desaparecería dicha ventana. Si refrescara la página, volvería a ejecutarse el código JavaScript y aparecería de nuevo esta misma ventana.

El código JavaScript no solo puede estar en la propia página web sino en un archivo independiente (de forma similar a como se hace con las hojas de estilo CSS). De esta forma, al separar del código HTML y JavaScript se facilitaría su lectura y, en consecuencia, su mantenimiento sería más sencillo. Si se decantara por esta opción, la etiqueta con la que se importaría el código JavaScript en una página web seguiría siendo la misma (<script>), solo que ahora no tendría ningún contenido sino un atributo src cuyo valor sería el nombre del fichero donde estuviera almacenado el programa.

Para demostrarlo, cree un nuevo fichero llamado “holaMundo.js” en la misma carpeta donde se encuentra “holaMundo.html” y añada únicamente esta línea de código:

alert("Hola Mundo");

Elimine esa misma línea del archivo “holaMundo.html”. Además, añada el atributo src a la etiqueta <script> y asígnele como valor el nombre del archivo que acaba de crear, tal como se muestra a continuación:

El efecto producido al recargar la página web será el mismo de antes.

Naturalmente, si el archivo con el código JavaScript no estuviera en la misma carpeta que el de la página HTML, el valor del atributo src sería el path donde se encontrara (puede ser absoluto o relativo). En cambio, si fuera parte de los recursos ofrecidos por un servidor web, su valor sería el URL de acceso.

Unidad 2

SINTAXIS BÁSICA

Tal como se mencionó en el capítulo de introducción, JavaScript cumple con la especificación ECMAScript (ES), cuya versión ES6 (ECMAScript 2015) será la descrita en esta obra por ser la que realmente ha marcado los fundamentos del lenguaje tal como lo conocemos actualmente.

El nombre de este lenguaje ya da una idea de cuál es su orientación, el desarrollo de scripts. Como cualquier otro programa, un script está formados por un conjunto de instrucciones, llamadas sentencias, que indican al ordenador (en concreto, al navegador, ya que es quien las interpreta) la secuencia de acciones que debe realizar en cada momento.

Las sentencias se separan entre sí con un punto y coma (‘;’).

Aunque JavaScript interpreta por defecto el retorno de carro como el final de una sentencia, se aconseja encarecidamente añadir siempre un punto y coma, ya que, cuando menos se lo espere, obtendrá errores inexplicables muy difíciles de corregir.

Cuando una sentencia sea muy larga, podrá dividirse en varias líneas para mejorar su legibilidad. Pese a que pueda hacerlo allí donde haya un espacio (siempre que este no forme parte de un texto entrecomillado), lo adecuado es partir la sentencia después de un operador o una coma.

Si bien no es lo habitual, varias sentencias cortas podrían llegar a escribirse en una misma línea:

sentencia;...;sentencia;

Las sentencias se componen de:

• Valores

• Variables (o constantes)

• Operadores

• Palabras clave

Los valores son los datos que manejan los programas. Estos pertenecen a un tipo que determina sus características y las operaciones en las que pueden participar. Los tipos de datos más comunes en JavaScript son los booleanos (representan los conceptos de cierto y falso), los números y los textos. Se trata de tipos primitivos porque representan un único dato, a diferencia de aquellos formados por estructuras que los agrupan en listas u objetos. Dichos valores pueden usarse directamente o almacenarse en variables (o constantes). En ese caso, cuando haga referencia a ellas lo estará haciendo al valor que contengan en ese momento.

Las variables y/o los valores podrán combinarse mediante operadores para formar expresiones que permitan obtener nuevos valores. Por ejemplo, la expresión:

2 + 3

estaría formada por dos valores (el número 2 y el 3) y un operador (la suma), cuyo resultado sería otro valor (el número 5).

Por último, las palabras clave del lenguaje son las que especifican la acción que debe realizarse. Por ejemplo, la palabra clave let indica a JavaScript que cree una variable, tal como se hace en la siguiente sentencia con la que se crea la variable x:

let x;

La lista completa de palabras reservadas de JavaScript la puede encontrar en https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords.

Todo lo que se escribe en un script es susceptible de ser ejecutado. Si no quiere que sea así, deberá formar parte de un comentario. Generalmente, los comentarios son textos que explican lo que hace el código, ayudan a entenderlo y, en consecuencia, facilitan su mantenimiento. También son útiles durante la fase de pruebas, ya que al comentar una sentencia se evita su ejecución, lo que permite descartar que sea la causa de un problema o dirigir la atención hacia determinadas partes del código que pudieran estar provocando el error.

Un comentario puede ocupar una o varias líneas.

Los comentarios de una línea comienzan con los caracteres “//”. Pueden ir solos o a continuación de la sentencia que describen. Por ejemplo:

En los comentarios de más de una línea, la primera empezaría con los caracteres “/*” y la última finalizaría con “*/”.

La guía de referencia completa de JavaScript se encuentra en https://developer.mozilla.org/es/docs/Web/JavaScript/Reference.

Unidad 3

VARIABLE Y CONSTANTES

Los elementos más básicos de un programa son las variables y las constantes, ya que son los encargados de mantener en memoria la información utilizada durante su ejecución. Por su nombre ya habrá deducido que las primeras permiten modificar su valor, mientras que en las segundas permanece inalterable.

Con el fin de afianzar estos dos conceptos fundamentales (y aquellos otros que se vayan introduciendo en secciones posteriores), se supone que los códigos JavaScript usados de ejemplo se encuentran en un archivo llamado “pruebas.js” situado en la misma carpeta que la página web desde la que se importan. Si bien el código JavaScript de cada ejercicio sustituye al anterior, el código HTML será siempre el mismo.

Aunque el nombre de este archivo resulta indiferente, se ha optado por llamarlo “pruebas.html”.

Como puede observar, se trata de un archivo HTML básico en el que la cabecera contiene la etiqueta <meta> con la que se establece el juego de caracteres UTF-8 (imprescindible para que el navegador muestre correctamente caracteres especiales, como la letra ‘ñ’ y los acentos). Allí también se encuentra la etiqueta <script> que importa el código JavaScript desarrollado en cada ejercicio (almacenado en el archivo “pruebas.js”).

Ahora sí, empecemos el estudio de las variables.

3.1 VARIABLES

Una variable es un espacio de memoria donde se almacena información. Se distinguen entre ellas por un nombre (identificador) que, al ser referenciado, permite guardar o recuperar los datos que contiene. En JavaScript las variables se crean cuando se declaran con la palabra clave let seguida de su identificador:

letidentificador

Por compatibilidad con viejos navegadores, también se permite declarar variables con la palabra clave var (en vez de let). Aunque básicamente hacen lo mismo, existen sutiles diferencias de comportamiento que pueden modificar los resultados de un programa según se emplee una u otra. Por ese motivo, en esta obra únicamente se utilizará let.

Los nombres de las variables solo pueden estar formados por letras, dígitos o los símbolos $ y _. El primer carácter no puede ser un dígito y, por supuesto, no es posible utilizar las palabras reservadas del propio lenguaje. Por ejemplo, let o 1identificador no podrán ser nombres de variables, a diferencia de _variable, $variable o identificador1, que son identificadores válidos. Un último apunte, los caracteres en mayúsculas y en minúsculas son diferentes, por lo que la variable identificador1 es diferente de Identificador1.

No use nunca guiones (‘-‘) ya que se confundirían con el operador de la resta.

Naturalmente, al declarar una variable también es posible asignarle un valor:

letidentificadorvalor

Por ejemplo, la siguiente sentencia crea la variable texto y la inicia con el valor “Hola Mundo”:

En una misma línea de código se pueden declarar varias variables, sean del mismo o de diferente tipo.

Aunque la sentencia anterior ocupa una sola línea, si resultara muy larga podría dividirse en varias.

El valor de las variables que no se inician cuando se declaran es undefined. Compruébelo usted mismo escribiendo estas dos líneas de código en el archivo “pruebas.js”:

La primera sentencia solo declara la variable x (no la inicia) y la segunda muestra su valor en una ventana informativa.

Al cargar la página “pruebas.html” en el navegador obtendría el siguiente resultado:

Por convención (no es obligatorio), las variables con un nombre compuesto (constituido por varias palabras) suelen seguir la nomenclatura camel case. Según dicha nomenclatura, la primera palabra empezaría en minúsculas y las siguientes en mayúsculas. Por ejemplo, nombreLargoDeVariable.

El perfil ondulante que se genera (similar al de las jorobas de los camellos) es lo que da nombre a esta nomenclatura.

Aunque JavaScript permite asignar un valor a una variable sin haberla declarado previamente, no se aconseja hacerlo para evitar que se creen variables cuyo nombre se haya escrito de forma incorrecta. La mejor forma de evitar este problema es utilizar la siguiente directiva como primera línea de código:

"use strict"

Además de obligar a declarar todas las variables, esta directiva tiene más implicaciones, muchas de ellas relacionadas con los objetos (estructuras de datos que se estudian más adelante), ya que lo que realmente hace es activar la ejecución del código en modo estricto. Esto permite localizar errores de manera temprana, evitando el uso de malas prácticas permitidas por el propio lenguaje (que todavía se mantienen por compatibilidad con programas desarrollados en versiones anteriores).

Si quiere conocer todas las implicaciones que tiene el uso de la directiva "use strict", visite la página https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Strict_mode.

A modo de ejemplo, analicemos el siguiente código:

En la primera sentencia se declara la variable variableConTexto y en la segunda se le asigna el valor “Hola Mundo” ... o eso era lo que se pretendía, ya que en la ventana de alerta aparece un resultado inesperado.

Efectivamente, la variable variableConTexto tiene el valor undefined porque tras haber sido declarada, no se le ha dado ningún valor. Por error, la cadena “Hola Mundo” se asignó a la variable varibleConTexto (le falta una ‘a’).

Aunque en este caso concreto le haya resultado fácil encontrar el error, los programas que desarrolle en la práctica pueden llegar a tener cientos de líneas de código, decenas de variables y nombres compuestos en los que la pérdida o cambio de un carácter es difícilmente reconocible (el cerebro muchas veces completa o convierte de manera subconsciente una palabra mal escrita en otra conocida).

Si hubiera usado la directiva "use strict" al principio del programa esto no hubiera sucedido, ya que al tratar de asignar el valor “Hola Mundo” a la variable varibleConTexto se hubiera generado un error fácilmente reconocible, evitándole la consiguiente pérdida de tiempo y esfuerzo. Pero, sobre todo, le hubiera librado de las sensaciones de desánimo, disgusto, desesperación y abatimiento que se producen en situaciones en apariencia ilógicas.

Añada, pues, la directiva "use strict" al principio del programa y recargue de nuevo la página.

Las directivas no son sentencias, por lo que no es necesario que acaben en punto y coma (‘;’).

En esta ocasión no aparecerá la ventana de alerta, señal inequívoca de que se ha producido un error antes de la sentencia en la que se llamaba al comando alert() y, en consecuencia, el programa dejó de ejecutarse en ese punto.

Seguramente se esté preguntando qué ventaja aporta el uso de esta directiva ya que, aparentemente, sigue sin saber cuál es el motivo del error... a no ser que sepa cómo abrir las herramientas para desarrolladores de Chrome.

Aunque el manejo de esta herramienta sea objeto de estudio de una sección posterior, en esta aprenderá cómo abrirla y consultar los mensajes de error. Solo tiene que pulsar sobre el menú desplegable que tiene Chrome en la esquina superior derecha (representado por tres puntos verticales), seleccionar la opción “Más herramientas” “Herramientas para desarrolladores”.

Aparecerá una nueva ventana en la que, por defecto, se muestra la pestaña correspondiente a la consola de JavaScript. Allí encontrará el error producido: “...varibleConTexto is not defined”, es decir, que la variable varibleConTexto no se ha declarado.

Seguramente, los textos de estas herramientas le aparezcan en español (excepto el mensaje de error). Si no fuera así, pulse el botón “Switch DevTools to Spanish” que hay en la parte superior de la ventana para cambiarlos de idioma.

Si bien JavaScript permite asignar un valor a una variable sin declararla, lo que no deja es darle un valor y luego declararla. Para comprobarlo, solo tiene que modificar ligeramente el programa anterior:

Observe que no es necesario el uso de la directiva "use strict".

En este caso, el error que aparece en la consola es: “...Cannot acces ‘variableConTexto’ before initialization...”.

Por último, debe saber que JavaScript es un lenguaje de tipado dinámico, por lo que una variable puede contener un valor de cualquier tipo en cualquier momento. Por ejemplo, en este código se asigna primero el número 123 y luego la cadena “Hola Mundo” a la variable x (algo completamente legal):

Lo que no se puede hacer es declarar más de una vez la misma variable, por lo que este otro código provocaría un error:

Si todavía tiene abierta la consola, al recargar la página “pruebas.html” verá que aparece el error “...Identifier ‘x’ has already been declared...”, lo que indica que la variable x ya había sido declarada.

Solo tiene que pulsar sobre el enlace con el nombre del archivo (“pruebas.js”) señalado en la imagen anterior, para que se abra una nueva vista en la herramienta para desarrolladores (pestaña “Fuentes”) donde se identifica la sentencia que provoca el error. Como era previsible, se trata de aquella en la que se declara por segunda vez la variable x.

No se olvide guardar los cambios cada vez que modifique el archivo “pruebas.html”.

3.2 CONSTANTES

Las constantes, al igual que las variables, son espacios de memoria donde se almacenan datos. Sin embargo, a diferencia de estas, una vez asignado un valor ya no puede variarse. Las constantes se declaran con la palabra clave const, seguida de un identificador y un valor:

Por lo tanto, a diferencia de las variables es obligatorio asignarles un valor en el momento de declararlas. Por ejemplo, el siguiente código sería incorrecto:

La declaración de esta constante tendría que haberse hecho así:

Aunque los nombres de las constantes siguen la misma nomenclatura que el de las variables, para distinguir unas de otras se escriben habitualmente en mayúsculas. Adicionalmente, cuando el nombre es compuesto, las palabras se separan mediante un guion bajo (‘_’), por ejemplo, NOMBRE_LARGO_DE_CONSTANTE.

Si una vez asignado un valor a una constante este no se puede cambiar, con más motivo tampoco podrá formar parte de dos declaraciones diferentes. Por esa razón, estas dos sentencias, situadas en diferentes partes de un programa, provocarían un error de ejecución:

Unidad 4

TIPOS DE DATOS PRIMITIVOS

En informática, los datos se agrupan en tipos que determinan el conjunto de valores que lo componen y las operaciones en las que pueden intervenir (además de la forma en la que se representan internamente por el ordenador). Por ese motivo, muchos lenguajes de programación establecen el tipo de una variable en el momento de crearla. Sin embargo, en JavaScript esto no es necesario ya que usa un tipado dinámico.

Los tipos de datos pueden ser primitivos (los más básicos con los que se puede trabajar) o compuestos (formados por uno o más datos primitivos). En esta sección solo se estudiarán los tipos primitivos, que en JavaScript son:

•Boolean. Abarca únicamente los valores true y false.

•Number. Constituye cualquier número, tanto entero, como decimal.

•BigInt. Son números enteros más grandes que los de tipo Number.

•String. Sus valores son cadenas de caracteres. Podrán ir entre comillas dobles o simples. Eso significa que, por ejemplo, “perro” y ‘perro’ son iguales.

•Null. Solo puede tomar el valor null, que representa un valor nulo o vacío.

•Undefined. Solo puede tomar el valor undefined, que conceptualmente es la falta de valor. Por ese motivo, es el que tiene una variable cuando se declara sin iniciarla.

Existe un último tipo de datos primitivo (Symbol), que no se va a estudiar en esta obra.

Analicemos con algo más de detalles estos tipos de datos primitivos, empezando por el primero de la lista.

4.1 BOOLEAN

Como se acaba de indicar, el tipo de datos Boolean está formado solo por los dos valores, que representan los conceptos de verdadero (true) y falso (false). Ambos valores son el resultado de la evaluación de expresiones de comparación y/o lógicas y se utilizan para saber si hay que ejecutar un bloque de código u otro en sentencias condiciones de tipo if..then...else o switch...case. También se emplean para determinar cuándo debe finalizar la ejecución de un bucle de tipo for, while o do...while.

Todas estas sentencias se explicarán en un capítulo posterior.

4.2 NUMBER

A diferencia de otros lenguajes de programación que distinguen entre enteros, con signo, sin signo, decimales de simple o doble precisión, etc., en JavaScript todos los valores numéricos forman parte del tipo de datos Number. Internamente, estos se almacenan como decimales y ocupan 64 bits en memoria.

JavaScript almacena los números en un formato de coma flotante de doble precisión (descrito en el estándar IEEE 754). De los 64 bits que ocupa, el número se encuentra en los bits 0 a 51, el exponente en los bits 52 a 62 y el signo en el bit 63.

Aunque en un principio pueda parecer intrascendente la forma de almacenar un número, lo cierto es que determina los valores límite dentro de los que se puede trabajar con una precisión del 100%. Más allá de esos límites, un valor quedaría almacenado de forma aproximada, algo que puede llegar a ser problemático dependiendo del ámbito de uso de la aplicación. En este sentido, JavaScript solo representa de forma exacta los números enteros comprendidos entre –(253 – 1) y 253 – 1, es decir, entre -9007199254740991 y 9007199254740991. Superados estos límites, se produce un redondeo, tal como deja en evidencia la siguiente sentencia:

alert(9007199254740993);

Como el número que se pretende mostrar supera el del máximo entero, a veces el valor mostrado no coincide con el asignado sino con el almacenado por JavaScript, que es otro aproximado.

Esa falta de precisión también se produce con números decimales, como demuestra esta otra sentencia:

alert(0.1 + 0.2);

En teoría, el resultado que debería mostrarse en la ventana de alerta es 0.3, pero en la práctica, esta forma de representar los números hace que no siempre sea así, como sucede en este caso en concreto.

En lo que respecta a los números enteros, esta falta de presión podría superarse utilizando el tipo de datos BigInt, para lo cual solo habría que añadir el carácter ‘n’ al final del número, tal como se ha hecho en esta nueva sentencia (similar a otra anterior):

alert(9007199254740993n);

Ahora, la ventana de alerta sí mostraría el número real y no uno redondeado.

No se aconseja la combinación de valores de tipo Number y BigInt en operaciones aritméticas. Y recuerde, un número del tipo BigInt no tiene decimales (es un número entero).

Con el fin de facilitar la escritura de números muy grandes, estos se pueden formular en notación exponencial. Por ejemplo, la forma de escribir 123 (12×12×12) sería:

12e3

Naturalmente, tanto la base como el exponente pueden ser números negativos. De este modo, la forma de escribir la expresión:

sería:

-12e-3

Además de números, el tipo de datos Number tiene dos valores simbólicos que representan el infinito matemático (+Infinity, -Infinity).

Estos serían el resultado de indeterminaciones matemáticas o, simplemente, de expresiones que devuelven un número tan grande que no se pueda manejar en JavaScript (los mayores de 1.79×10308).

En matemáticas, una indeterminación clásica es la división por cero de cualquier número. Eso es precisamente lo que hace la siguiente sentencia, que muestra en una ventana de alerta el resultado de dividir el número 1 por 0:

Si recuerda las matemáticas estudiadas en el bachillerato, sabrá que el resultado de esta división es infinito, valor que coincide con el que aparece en pantalla.

Aparte de +Infinity y -Infinity, el tipo de datos Number dispone de otro valor muy especial. Se trata de NaN (acrónimo de Not A Number, no es un número), que es el que devolvería una expresión aritmética que no pudiera llevarse a cabo. Por ejemplo, el resultado de dividir el texto “naranja” por 2 no sería media naranja sino algo que para JavaScript no es un número.

Para verificarlo solo tiene que ejecutar la siguiente sentencia:

alert("naranja"/2);

cuyo resultado sería el mostrado a continuación:

4.3 STRING

El tipo de datos String se utiliza para el manejo de textos, formados por una secuencia de caracteres entre comillas (tanto simples como dobles). Por ejemplo, estados dos cadenas representan el mismo texto:

Las cadenas de caracteres pueden combinar comillas simples o dobles, siempre que sean de tipos diferentes, como, por ejemplo:

Los caracteres que componen una cadena no solo pueden ser los alfanuméricos habituales sino secuencias de escape que se preceden por una barra invertida (‘\’). Las más habituales son:

• \b → retroceso

• \n → salto de línea

• \r → retorno de carro

• \t → tabulador

Las secuencias de escape también se utilizan para que el navegador no malinterprete ciertos caracteres propios del lenguaje. Por ejemplo, la siguiente sentencia provocaría un error de ejecución:

El motivo es porque las segundas comillas dobles se interpretan como el final del texto utilizado como argumento del comando alert(), cuando realmente son parte de la cadena. En esa situación, JavaScript espera a continuación el paréntesis de cierre de dicho comando, en vez de la secuencia de caracteres Don Quijote de la Mancha""). Eso es precisamente lo que indica el mensaje de error que aparece en la consola:

Para resolver este problema, las comillas simples, las dobles e, incluso, la barra invertida utilizada como carácter de escape, se deben preceder con dicha barra invertida:

De ese modo, la forma correcta de escribir la sentencia anterior sería:

Al volver a cargar la página HTML, esta vez sí se mostraría el texto correctamente en la ventana de alerta.

En el caso anterior, también sería posible mezclar las comillas simples con las dobles de la siguiente forma:

alert(‘El libro que más me gusta es "Don Quijote de la Mancha"’);

A veces, los mensajes mostrados al usuario pueden ser muy largos y requieran partirse en varias líneas utilizando la secuencia de escape ‘\n’. En ese caso, también podría estar tentado de dividir la cadena de texto mediante retornos de carro en el propio editor de código para verla correctamente. Eso es precisamente lo que se ha hecho (incorrectamente) en esta sentencia utilizada de ejemplo:

El resultado sería un error de ejecución, debido a que el navegador interpreta ambas líneas como dos sentencias, en la primera de las cuales se abre una cadena que luego no se cierra:

La forma correcta de dividir una cadena en varias líneas en el editor de código es finalizar cada una de ellas con el carácter ‘\’ de la siguiente forma:

Dicho carácter no forma parte de la cadena de caracteres mostrada en la ventana de alerta, ya que se utiliza para indicar al navegador que la cadena continúa en la siguiente línea.

Una vez hecho el cambio, vuelva a cargar de nuevo la página HTML y compruebe que el resultado obtenido en esta ocasión es el deseado (un texto formado por dos líneas):

Le animo a seguir practicando con las secuencias de escape, ya que tendrá que usarlas con frecuencia en los mensajes de texto generados por sus programas.

4.4 NULL Y UNDEFINED

Ambos tipos de datos solo tienen un único valor, null y undefined, respectivamente. Aunque podrían llegar a confundirse, conceptualmente son diferentes ya que el primero representa un valor nulo o irrelevante, mientras que el segundo es el que tiene una variable a la que todavía no se le ha asignado ningún valor. De hecho, la especificación ECMAScript define null como el valor primitivo que representa la ausencia intencional de cualquier valor de objeto.

Por ejemplo, en este código de ejemplo se asigna de forma intencionada el valor null a la variable x, mientras el de la variable y es undefined:

4.5 CONVERSIÓN ENTRE TIPOS DE DATOS PRIMITIVOS

Si bien los operadores están pensados para trabajar con operandos del mismo tipo, cuando esto no ocurre JavaScript trata de convertirlos automáticamente al tipo adecuado. No obstante, si se quiere mantener un mayor control sobre la ejecución del programa, lo más seguro es forzar de forma explícita dicha conversión con las siguientes funciones globales:

•Number(). Convierte un tipo de datos primitivo en un número.

•String(). Convierte un tipo de datos primitivo en una cadena.

•Boolean(). Convierte un tipo de datos primitivo en un valor booleano.

El concepto de función y método global se estudia más adelante. De momento, piense en ellas como si fueran comandos del propio lenguaje.

Veamos en detalle cada una de estas funciones de conversión de tipos.

4.5.1 Conversión a números

La función global que transforma cualquier tipo de dato primitivo en un número es:

Number(valor)

A continuación, se muestran diversas expresiones de ejemplo y el resultado de su evaluación como un comentario al lado de cada una de ellas:

Observe que los espacios en blanco al principio o al final de la cadena no afectan a la conversión.

Si no se pudiera realizar la conversión, se devolvería el valor NaN, tal como sucede en estas otras expresiones:

Las cadenas que están vacías o solo tienen espacios se convierten en el número 0:

La conversión de cadenas a números se hace de forma automática en todas las operaciones aritméticas (siempre que el valor de la cadena sea numérico), excepto en la suma. Por ese motivo, en las siguientes expresiones no sería necesario usar la función Number():

Donde sí sería imprescindible dicha función es en expresiones donde se realice una suma, como en esta:

De lo contrario, ambas cadenas se concatenarían y el resultado sería otra cadena (en este caso, "102"), no un número.

Además de la función Number(), JavaScript ofrece estas funciones adicionales:

•parseInt(cadena, base). Convierte una cadena en un número entero. Opcionalmente, este método puede incluir un segundo argumento con la base en la que está expresado el número que hay dentro de la cadena (binaria, decimal, hexadecimal, etc.).

•parseFloat(cadena, base). Convierte una cadena en un número de coma flotante (se trata de un número real, es decir, entero o decimal con signo). Al igual que el método anterior, admite un segundo argumento opcional con la base en la que estaría expresado el número incluido en la cadena.

En matemáticas, la base de un número es la cantidad de cifras o dígitos que se utilizan para representarlo. Habitualmente se trabaja en base 10, ya que todos los números se presentan con 10 dígitos (0, 1, 2, 3, ..., 9). Sin embargo, en informática también se trabaja con números binarios (en base 2, formada por los dígitos 0, 1) y hexadecimales (en base 16, formada por los números 0, 1, ... 9 y las letras A, B, ..., F).

Las siguientes expresiones muestran algunos ejemplos de uso del método global parseInt():

Observe que este método solo devuelve el valor NaN cuando la cadena no comienza por un número. Por otra parte, como su resultado siempre es un número entero, elimina los decimales sin hacer ningún tipo de redondeo. La última expresión de ejemplo muestra una conversión de un número binario a otro decimal.

Los resultados de la evaluación de las expresiones anteriores serían los mismos con el método parseFloat(), excepto en esta, que devolvería el número decimal 1.23:

No solo las cadenas se pueden convertir en números. También es posible hacerlo con valores booleanos, tal como se pone de manifiesto a continuación:

El valor null tampoco es ninguna excepción, ya que se convertiría en el número 0, no así undefined, para el que la función Number() devolvería NaN como resultado:

4.5.2 Conversión a cadenas

La función global que transforma cualquier otro tipo de datos primitivo en una cadena es:

String(valor)

Así, por ejemplo, la siguiente expresión devolvería la cadena “123”:

String(123)

Los valores booleanos también se pueden convertir en cadenas. En concreto, el valor true se transformaría en la cadena “true” y el valor false en la cadena "false":

Lo mismo sucede con los valores primitivos null y undefined, que se convertirían en las cadenas “null” y “undefined”:

De forma alternativa, si el valor a convertir fuera de tipo booleano o un número, también se podría utilizar el siguiente método:

toString()

Al tratarse de un método (no de una función), deberá llamarse de una forma muy particular:

valor.toString()

Cuando estudie los objetos, descubrirá qué son los métodos y entenderá el motivo de esta “extraña” sintaxis.

Las siguientes expresiones son ejemplo de uso de este método:

Otros métodos de conversión de números a cadenas que le podrían resultar interesantes son:

•toFixed(número, decimales). Convierte el número en una cadena, que se redondearía con los decimales indicados opcionalmente como argumento.

•toExponential(número, decimales). Su comportamiento es similar al del método anterior, excepto que el número se expresaría en notación exponencial.

•toPrecision(número, dígitos). Su comportamiento vuelve a ser similar al del primer método, solo que, en este, el argumento opcional indicaría el número de dígitos al que se redondearía el número.

El siguiente código muestra un ejemplo del comportamiento de estos tres métodos:

Tal como se aprecia en la imagen mostrada a continuación, el número π aparece con tres decimales, con tres dígitos y de forma exponencial. Observe que el redondeo a tres decimales hace que el tercero pase a ser 2 (en el número original era 1).

4.5.3 Conversión a valores booleanos

Una vez conocidas las diversas formas de transformar un valor en un número o en una cadena, solo faltaría saber cómo convertirlo en true o false. Para ello deberá utilizar la función global:

Boolean(valor)

Se trata de una función poco utilizada, ya que JavaScript realiza automáticamente esta conversión en las expresiones de comparación y/o lógicas donde se emplea este tipo de valores.

Las siguientes expresiones son ejemplos representativos de su comportamiento:

En general, cualquier cadena que no esté vacía (aunque solo tenga espacios) se convierte en true. Por el mismo motivo, cualquier número que no sea el 0 (con o sin decimales) también se convertiría en true.