2.1 Los primeros años: páginas web estáticas

En 1991 Tim Berners-Lee comienza el desarrollo de HTML en el CERN. No sólo creó el lenguaje HTML si no que creó el protocolo HTTP (HyperText Transfer Protocol) y el primer servidor web.

En 1993 se publica y se propone como estándar por el IETF. En este momento las páginas web estaban formadas únicamente por HTML. Su contenido era completamente estático: mostraban texto, imágenes y enlaces, pero apenas existía interacción con el usuario.

Posteriormente, 1996, apareció CSS, que permitió separar el contenido de la presentación y mejorar el aspecto visual de las páginas.

2.2 JavaScript: el nacimiento de las páginas dinámicas

En 1995, la empresa Netscape desarrolló JavaScript con el objetivo de añadir pequeñas funcionalidades a las páginas web sin necesidad de comunicarse continuamente con el servidor.

Gracias a JavaScript fue posible:

• Validar formularios antes de enviarlos.
• Mostrar u ocultar elementos de la página.
• Crear menús interactivos.
• Responder inmediatamente a las acciones del usuario.

Con el paso de los años, JavaScript fue evolucionando hasta convertirse en un lenguaje de programación muy potente, capaz de desarrollar aplicaciones web completas.

Actualmente es el único lenguaje de programación que todos los navegadores ejecutan de forma nativa.

Netscape liberó el código de su navegador web y creó la organización Mozilla, que a su vez reescribió el navegador que posteriormente se convertiría en Firefox.

2.3 Java Applets: aplicaciones Java en el navegador

Poco después apareció otra tecnología muy popular: los Java Applets. Un Applet era un programa escrito en Java que se descargaba desde una página web y se ejecutaba en el ordenador del usuario mediante una Máquina Virtual de Java (JVM) instalada como complemento del navegador.

Los Applets permitían desarrollar aplicaciones mucho más complejas que las posibles con el JavaScript de aquella época. Por ejemplo:

• Juegos.
• Simulaciones.
• Herramientas de dibujo.
• Aplicaciones educativas.
• Visualizadores en tres dimensiones.

Sin embargo, presentaban varios inconvenientes:

• Era necesario instalar Java en el ordenador.
• Dependían de un complemento del navegador.
• Su tiempo de carga era elevado.
• Presentaban numerosos problemas de seguridad.

En 2017 se declaró obsoleto, y los navegadores dejaron de soportar los complementos necesarios para ejecutar Applets.

2.4 Adobe Flash: las animaciones de Internet

A finales de los años 90 y durante gran parte de los años 2000, Adobe Flash se convirtió en la tecnología dominante para crear contenido multimedia en Internet. Flash permitía desarrollar:

• Animaciones.
• Juegos.
• Reproductores de vídeo.
• Publicidad interactiva.
• Aplicaciones completas.

Durante muchos años fue muy utilizado porque los navegadores todavía no ofrecían muchas de estas capacidades de forma nativa. Sin embargo, Flash tenía varios problemas:

• Requería instalar un complemento.
• Consumía muchos recursos.
• Presentaba frecuentes vulnerabilidades de seguridad.
• No funcionaba correctamente en la gran mayoría de dispositivos móviles.

En 2010 Steve Jobs escribió una carta abierta llamada Reflexiones sobre Flash explicando por qué Apple no permitía Flash en los iPhone. Aunque hubo mucha crítica inicial, y había acusaciones que se podían argumentar contra Apple, años después se confirmaría que Flash consumía muchos recursos, batería y que era inseguro.

En 2020 Adobe dejó de dar soporte a Flash y los navegadores eliminaron completamente su compatibilidad.

2.5 AJAX: aplicaciones más rápidas

En 1999 Microsoft crea la técnica llamada AJAX (Asynchronous JavaScript and XML), como evolución a las etiquetas iframe de 1996, todo ello exclusivo de Internet Explorer 5.0.

Antes de AJAX, cada vez que el usuario realizaba una acción era necesario recargar completamente la página. Gracias a AJAX, el navegador podía comunicarse con el servidor en segundo plano y actualizar únicamente una parte de la página. Esto permitió crear aplicaciones mucho más rápidas y con una mejor experiencia de usuario.

2.6 jQuery: simplificando el desarrollo web

A partir de 2006, jQuery se convirtió en una de las bibliotecas de JavaScript más populares. En aquella época, desarrollar aplicaciones web con JavaScript puro resultaba complicado porque cada navegador implementaba el DOM y los eventos de forma ligeramente diferente. Además, muchas funcionalidades que hoy consideramos habituales, como querySelector(), fetch() o una gestión uniforme de eventos, todavía no existían o no estaban disponibles en todos los navegadores.

El principal objetivo de jQuery era ofrecer una API sencilla y compatible con todos los navegadores. Gracias a ello, los desarrolladores podían seleccionar elementos utilizando selectores similares a CSS, modificar el contenido de una página, gestionar eventos, crear animaciones o realizar peticiones AJAX sin preocuparse por las diferencias entre navegadores. Esto reducía considerablemente la cantidad de código necesario y facilitaba el desarrollo de aplicaciones web.

Durante varios años, jQuery estuvo presente en la mayoría de los sitios web de Internet y fue una herramienta casi imprescindible para cualquier desarrollador frontend. Su éxito fue tan grande que muchas de las funcionalidades que popularizó terminaron incorporándose de forma nativa a JavaScript y a los navegadores modernos.

Con la aparición de HTML5, la estandarización de las APIs del navegador y el desarrollo de frameworks como Angular, React y Vue.js, la necesidad de utilizar jQuery fue disminuyendo. En la actualidad sigue presente en algunos proyectos antiguos, pero en las nuevas aplicaciones web es mucho menos frecuente, ya que los navegadores modernos y los frameworks actuales ofrecen soluciones más completas y potentes.

Aunque jQuery fue la más conocida, durante esos años hubo otras librerías que trataban de extender JavaScript:

• Prototype, de 2005, muy utilizada junto con Ruby on Rails. Añadía métodos al DOM y simplificaba JavaScript.
• script.aculo.us, creada sobre Protoype, era una librería para crear animaciones, efectos visuales y drag & drop.
• Ext JS: Orientada a aplicaciones empresariales con interfaces muy similares a programas de escritorio. Sigue existiendo, aunque con un uso mucho menor.

2.7 HTML5: el navegador gana capacidades

• Reproducción de vídeo y audio sin complementos (Youtube empezó a usarlo como reproductor para el iPhone).
• Dibujos mediante la etiqueta <canvas>.
• Gráficos vectoriales con SVG.
• Almacenamiento local de datos.
• Geolocalización.
• APIs para acceder a diferentes recursos del dispositivo.

2.8 Frameworks de JavaScript

A medida que las aplicaciones web crecían en tamaño, desarrollar todo el código únicamente con JavaScript resultaba cada vez más complicado. Por este motivo aparecieron diferentes frameworks, cuyo objetivo era facilitar el desarrollo de aplicaciones complejas.

Algunos de los más conocidos son:

• Vue.js
• React
• Angular

Estos frameworks permiten organizar el código, reutilizar componentes y desarrollar aplicaciones de gran tamaño de forma más sencilla.

Hoy en día también existe TypeScript, que es un lenguaje de programación de alto nivel que se transpila a JavaScript. Es un superset de JavaScript. Hoy en día distintos frameworks y aplicaciones lo utilizan. El código TypeScript no se ejecuta en entorno cliente.

2.9 WebAssembly: ejecución de binarios en el navegador

En los últimos años ha aparecido una nueva tecnología llamada WebAssembly (Wasm). WebAssembly no es un lenguaje de programación, sino un formato binario que los navegadores pueden ejecutar de forma muy eficiente. Permite utilizar lenguajes de programación como C, C++, Rust, Java que se compilan para desarrollar aplicaciones que posteriormente se ejecutan dentro del navegador.

Esta tecnología es especialmente útil para aplicaciones que requieren un alto rendimiento, como:

• Videojuegos.
• Editores de imagen.
• Modelado 3D.
• Simulaciones científicas.
• Edición de vídeo.

Aunque WebAssembly puede ejecutar código compilado muy rápidamente, JavaScript sigue siendo necesario para interactuar con el navegador y con la página web.

3.1 Tecnologías del lado del cliente

Tal como hemos visto previamente, actualmente existen tres tecnologías fundamentales que se usan en el entorno cliente:

• HTML: define la estructura de una página.
• CSS: define el aspecto visual.
• JavaScript: es un lenguaje de programación que se ejecuta en el navegador Web de forma nativa que añade comportamiento, permite modificar el aspecto visual de manera interactiva, puede realizar peticiones al servidor de manera asíncrona, …

Más adelante nos adentraremos más en ellos.

4.1 ¿Qué hace un navegador?

Tras ejecutar la petición al servidor, el proceso que sigue el navegador es el siguiente:

1. Descarga el HTML.
2. Descarga el CSS.
3. Descarga JavaScript.
4. Construye el DOM.
5. Aplica los estilos.
6. Ejecuta JavaScript.
7. Muestra el resultado.

4.2 Motores de renderizado

Según StatCounter, a 2026 los navegadores más utilizados son:

• Google Chrome
• Safari
• Microsoft Edge
• Mozilla Firefox

Los navegadores web son programas muy complejos (y cada vez más) y es por eso que desde que se inventó la Web han existido distintos programas, e incluso hubo una guerra de navegadores.

Antiguamente cada navegador web utilizaba un motor de renderizado distinto. El motor de renderizado es el encargado de coger el documento HTML, y junto con el CSS y el JavaScript, y generar el aspecto visual final con el que interactúa el usuario.

Cada motor de renderizado cumplía “a su manera” el estándar. Aparte, podían añadir ciertas características propias no estándar, lo que en hacía que las páginas webs se pudiesen llegar a ver de manera muy diferente dependiendo del navegador a utilizar, o que incluso no funcionase si se hacía uso de alguna de esas características.

Para comprobar si los navegadores cumplían con los estándares aparecieron distintos tests, entre los que se pueden destacar el Acid2 y Acid3.

Hoy en día, debido a lo complejo que es crear un motor de renderizado, aunque existen muchos navegadores web, no existen apenas motores de renderizado. Esto quiere decir, que aunque uses Google Chrome o Microsoft Edge u Opera, los tres hacen uso del mismo motor de renderizado.

• Gecko: El motor de renderizado creado por Mozilla y utilizado por Firefox y sus distintos forks.
• WebKit: Apple creó este motor en 1998 haciendo un fork del código de KHTML (navegador web creado por el proyecto KDE). Aunque actualmente principalmente se usa en dispositivos Apple, Sony ayudó en su desarrollo y lo usó en PS3, y también en las consolas de Nintendo. Apple obliga a hacer uso de este motor en todos los navegadores web de dispositivos iOS e iPad. Esto quiere decir que aunque uses la aplicación Chrome, el motor de renderizado en iOS es Webkit.
• Blink: En 2013 Google anuncia que crea un fork de Webkit para crear su propio motor y de esta manera ser más independiente de Apple en el desarrollo del motor. Es el motor utilizado en el navegador web de código abierto Chromium. Hoy día es el motor más usado ya que muchos navegadores hacen uso de él: Microsoft Edge, Opera, Vivaldi, Brave…

En la Wikipedia se puede ver una comparativa de navegadores web y otra comparativa de los motores de renderizado.

6.1 La estandarización del lenguaje

En 1997 la organización ECMA International publicó la primera especificación oficial del lenguaje que recibió el nombre de ECMAScript. A partir de ese momento, los navegadores comenzaron a implementar el mismo estándar, reduciendo progresivamente las diferencias entre ellos. Actualmente todos los navegadores modernos implementan las especificaciones publicadas por ECMAScript.

6.2 JavaScript fuera del navegador

Aunque JavaScript nació como un lenguaje para navegadores, actualmente puede ejecutarse en muchos otros entornos. Algunos ejemplos son:

• Servidores web mediante Node.js como entorno de ejecución.
• Aplicaciones de escritorio.
• Aplicaciones móviles.
• Herramientas de automatización.
• Scripts de administración.
• Dispositivos IoT.

Esto ha convertido a JavaScript en uno de los lenguajes más versátiles de la actualidad.

7.1 Evolución

En 2009 apareció una nueva versión del lenguaje denominada ECMAScript 5 (ES5). Esta versión mejoró considerablemente la estabilidad y la compatibilidad entre navegadores. Sin embargo, el cambio más importante llegó en 2015 con la publicación de ECMAScript 2015 (ES6), que transformó el lenguaje.

Desde 2015, cada año se publican nuevas versiones del estándar incorporando pequeñas mejoras y nuevas funcionalidades. En la Wikipedia se puede ver el historial de versiones.

7.2 Línea temporal

7.3 Compatibilidad entre navegadores

Debido a la evolución del lenguaje, los motores de ejecución y navegadores no tienen por qué estar siempre a la última, o pueden priorizar las distintas nuevas características. Para consultar las compatibilidades de los navegadores podemos usar las siguientes webs:

• Mozilla Developer Network: La documentación oficial más utilizada por los desarrolladores.
• ECMAScript Compatibility Table: Para consultar la compatibilidad de las características del lenguaje JavaScript.
• Can I use: para consultar HTML, CSS, APIs del navegador, …

8.1 Seguridad y limitaciones

JavaScript fue diseñado para ejecutarse en el navegador del usuario, por lo que se ejecuta en el ordenador o dispositivo del usuario y no en el servidor. Esta característica ofrece ciertas ventajas, como una mayor interactividad y una respuesta más rápida de las aplicaciones. Sin embargo, también plantea importantes retos relacionados con la seguridad.

Los navegadores modernos implementan medidas para impedir que una página web pueda acceder libremente al ordenador del usuario o interferir con otras páginas abiertas.

8.2 Entorno aislado (Sandbox)

Una de las principales medidas de seguridad consiste en ejecutar el código JavaScript dentro de un entorno aislado, conocido como sandbox (caja de arena). El sandbox limita las acciones que puede realizar un programa JavaScript, evitando que tenga acceso directo al sistema operativo. Gracias a este mecanismo, una página web no puede, por ejemplo:

• Leer cualquier archivo del disco duro.
• Modificar archivos del sistema.
• Instalar programas.
• Ejecutar aplicaciones del sistema operativo.
• Acceder libremente a la información de otras aplicaciones.
• Acceder al hardware directamente. Antes de acceder a recursos (cámara, microfono, ubicación, …) pedirá autorización al usuario.

Estas restricciones protegen al usuario frente a posibles páginas maliciosas.

8.3 Política del mismo origen (Same-Origin Policy)

Una medida de seguridad muy importante es la Política del mismo origen (Same-Origin Policy). Esta política impide que una página web pueda acceder libremente a la información de otra página perteneciente a un sitio diferente. Si el usuario tiene abiertas simultáneamente dos páginas distintas, el código de una de ellas no podrá acceder al contenido de la otra.

8.4 Restricciones en las peticiones HTTP

Las aplicaciones web suelen comunicarse con servidores mediante peticiones HTTP. Sin embargo, los navegadores también aplican restricciones a estas comunicaciones. Cuando una aplicación intenta acceder a un servidor diferente al que ha servido la página, el servidor remoto debe autorizar expresamente dicha comunicación mediante una técnica denominada CORS (Cross-Origin Resource Sharing).

Si el servidor no está configurado para permitir el acceso, el navegador bloqueará la petición. Esta medida evita que páginas maliciosas accedan a servicios web sin autorización.

8.5 El código JavaScript es visible

A diferencia de otros lenguajes utilizados en el servidor, el código JavaScript llega al navegador del usuario. Cualquier persona puede visualizarlo utilizando las herramientas de desarrollo del navegador, y por lo tanto incluso modificarlo. Por este motivo:

• No deben incluirse contraseñas.
• No deben almacenarse claves privadas.
• No deben incorporarse datos confidenciales.
• No deben implementarse mecanismos de seguridad basados únicamente en código JavaScript.

Todo el código enviado al navegador debe considerarse público, aunque existen herramientas para ofuscarlo.

9.1 Código integrado

El código integrado consiste en escribir el código JavaScript directamente dentro del documento HTML mediante la etiqueta <script>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
    <!-- esto es un comentario HTML -->
    <script>
        // esto es un comentario en JavaScript
        console.log("Hola desde JavaScript");
    </script>
</body>
</html>

Cuando el navegador encuentra la etiqueta <script>, interpreta y ejecuta inmediatamente el código contenido en su interior. Dentro de la misma página web puede haber varias etiquetas, que se ejecutarán en orden.

9.2 Código en un fichero externo

La forma más habitual a la hora de escribir código JavaScript es en un fichero independiente con extensión .js, por ejemplo js/app.js. Desde el fichero HTML se referencia el archivo JavaScript.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
    <script src="js/app.js"></script>
</body>
</html>

console.log("Hola desde un fichero externo");

Cuando el navegador recibe el código HTML lo analizará y verá el atributo src, por lo que realizará una nueva petición al servidor para descargar el fichero y así poder ejecutarlo. Es la opción recomendada en prácticamente cualquier proyecto ya que cuenta con unas ventajas que el código integrado no tiene:

• El código HTML es más limpio.
• Se separa la estructura de la lógica.
• El mismo fichero puede reutilizarse en varias páginas.
• Es más sencillo localizar errores.
• Facilita el trabajo en equipo.
• El navegador puede almacenar el archivo en caché para futuras visitas. No volverá a pedirlo al servidor.

Cuando un proyecto crece puede ser recomendable separar el código en distintos ficheros.

function saludar(nombre) {
    console.log(`Hola ${nombre}`);
}

saludar("Bob");

9.3 ¿Dónde cargar el JavaScript?

Tradicionalmente existían dos posibilidades.

• Dentro del []{verbatim}: Este método puede provocar problemas. Mientras el navegador descarga deja de construir la página HTML. Como consecuencia, el usuario puede percibir una carga más lenta, y si realiza alguna ejecución, como el HTML no está construido, puede haber errores.
• Antes de cerrar []{verbatim}: Durante muchos años la recomendación fue colocar los scripts justo antes del cierre del elemento []{verbatim}.

<head>
    <script src="03.js"></script>
</head>
<body>
    <h1 id="titulo">Título</h1>

<body>
    <h1 id="titulo">Título</h1>
...
    <script src="03.js"></script>
</body>

<head>
  <script src="app.js" defer></script>
</head>

9.4 Comparación y buenas prácticas

Tal como se ha podido ver, existen distintas maneras a la hora de cargar el código JavaScript, por lo que es importante entender dónde poner el código y que quizá sea necesario usar atributos al cargar los ficheros.

En la siguiente imagen se puede ver una representación visual de los distintos métodos de carga:

En la siguiente tabla se resumen también cómo se pueden usar.

9.5 Gramática del lenguaje

Como todos los lenguajes de programación, JavaScript cuenta con su propia gramática y léxico. En la documentación de MDN se explica el léxico completo.

11.1 Comentarios JSDoc

Al igual que sucede en otros lenguajes de programación, en proyectos profesionales es habitual utilizar un formato especial de programación. En el caso de Java se suele usar Javadoc y para JavaScript, con sintaxis similar, se puede usar JSDoc.

Permite documentar funciones, clases y otros elementos del programa de forma estructurada. Su sintaxis comienza con /**.

/**
 * Devuelve la suma de dos números.
 *
 * @param {number} a Primer número.
 * @param {number} b Segundo número.
 * @returns {number} Resultado de la suma.
 */
function sumar(a, b) {
    return a + b;
}

12.1 Declaración e inicialización

Es importante distinguir dos conceptos.

• Declarar la variable: Consiste en crear la variable. Todavía no tiene un valor.
• Inicializar la variable: Consiste en asignarle un valor por primera vez.
• Ambas acciones e pueden hacer a la vez.

let edad;

edad = 20;

let edad = 20;

12.2 Diferencias entre let, const y var

A la hora de declarar variables podemos usar tres palabras reservadas:

• let: Es la forma recomendada para declarar variables cuyo valor puede cambiar.
• const: Declara una constante. Una constante debe recibir un valor en el momento de su creación. Cuando una constante almacena un objeto o un array, lo que permanece constante es la referencia al objeto, no necesariamente su contenido. Por convenio, cuando una constante representa un valor fijo global suele escribirse en mayúsculas.
• var: Antes de ECMAScript 2015 era cómo se declaraban, pero no se recomienda utilizarla en código nuevo. El motivo es que presenta un comportamiento diferente respecto al ámbito de las variables y a la elevación (hoisting), lo que puede provocar errores difíciles de detectar.

let contador = 0;
contador++;
contador++;
console.log(contador);

const PI = 3.141592;
PI = 3; // TypeError:
const letras = ["a", "b"];
// permitido
letras.push("c");

var nombre = "Ana";

12.3 Ámbito de las variables

El ámbito (scope) determina desde qué partes del programa puede accederse a una variable. Existen cuatro ámbitos:

• Global scope: El ámbito por defecto para todo el código en modo script.
• Module scope: El ámbito para el código de módulos (lo veremos más adelante).
• Function scope: El ámbito dentro de una misma función.
• Block scope: Para variables let y const el ámbito que hay entre llaves (un bloque).

Sirva como resumen la siguiente tabla:

12.4 Convención de nombres

JavaScript permite utilizar muchos nombres distintos, pero existen convenciones ampliamente aceptadas.

• camelCase: Es la convención utilizada en JavaScript. La primera palabra comienza en minúscula y las siguientes empiezan con mayúscula. Ejemplo de nombres: nombreCompleto, numeroAlumnos, fechaNacimiento, …
• Snake_Case: Usado en Python, PHP, … Ejemplo de nombres: nombre_completo, numero_alumnos, …

Por otro lado, habría que decidir el idioma de las variables, cómo poner los comentarios… todo depende del idioma usado por los programadores, si el código va a ser publicado…

13.1 Tipos primitivos

Como otros lenguajes de programación, JavaScript cuenta con unos tipos de datos primitivos, que representan un valor:

• Boolean: Valores que sólo pueden ser true y false.
• null: Palabra especial que determina que es un valor nulo.
• undefined: Valor primitivo asignado a las variables que no se han declarado todavía.
• Number: Número entero o de coma flotante. Por ejemplo: 42 o 3.14159.
  • Puede resultar en valores Infinity y -Infinity que representan el valor máximo y mínimo posibles.
  • NaN: Not a Number, el resultado de saber si un tipo de datos es un número y resultao que no lo es: Number("hola")
• BigInt: Un entero de precisión arbitraria. Por ejemplo: 9007199254740992n.
• String: Una secuencia de caracteres que forman un texto. Se puede escribir con:
  • Comillas simples: 'hola'
  • Comillas dobles: "hola"
  • Comillas invertidas: `hola`
• Symbol: Es un tipo de datos que garantiza que es único e inmutable.

let verdadero = true;
let falso = false;
let nulo = null;
let edad = 18;
let temperatura = 22.5;
let saldo = -150.75;
// Infinity
console.log(42 / 0);
// -Infinity
console.log(-42 / 0);

let nombre = "Charlie";
let ciudad = 'Bilbao';
let saludo = `Hola`;
console.log("Hola "+nombre)
console.log("Hola %s",nombre)
console.log(`Hola ${nombre}`)
let edad;
// undefined
console.log(edad);

13.2 Objetos

El resto de tipos de datos no descritos previamente son de tipo Object, entre los que se pueden incluir funciones, arrays, expresiones regulares, Map o objetos de tipo Error.

Un objeto ejemplo de objeto sería el siguiente:

const alumno = {
    nombre: "Alice",
    edad: 20,
    aprobado: true
};
console.log(alumno.nombre)

Más adelante profundizaremos en la sección de Objetos.

13.3 Operador typeof

JavaScript incorpora el operador typeof, que permite conocer el tipo de un dato.

let nombre = "Bob";
typeof nombre;

13.4 Conversión de tipos

Muchas veces es necesario convertir un tipo de datos a otro, puede que de manera temporal o en otras ocasiones de manera permanente. Se va a explicar la conversión explícita, ya que existen algunos casos que se van a explicar después con los operadores.

let edad = Number("25");
//NaN
Number("Hola")
parseInt("123")
// 123
parseInt("123px")
parseInt(123.4)
parseFloat("12.75")

String(25)
String(true)
Boolean(1)
Boolean("123")
Boolean(0)
Boolean("")
Boolean(null)
Boolean(undefined)
Boolean(NaN)

13.5 Comparación entre == y ===

Debido a las conversiones automáticas que realiza JavaScript por defecto, hace que se vea especialmente afectados los operadores de comparación. Esto hace que a veces podamos tener fallos en nuestro código no deseados:

Para evitar las conversiones automáticas existe el operador === o strict equality que devuelve un Boolean y tiene en cuenta tanto el valor como el tipo de datos.

El operando de negación es !==.

14.1 Operadores aritméticos

Los operadores aritméticos permiten realizar operaciones matemáticas.

14.2 Operadores de asignación

Permiten almacenar un valor en una variable. Aunque el operador más utilizado es = también existen otros operadores que nos permiten escribir de operaciones de manera abreviada.

14.3 Operadores de incremento y decremento

Permiten aumentar o disminuir una variable en una unidad. Pueden colocarse antes o después de la variable, y depende de dónde se pongan varía su comportamiento.

let x = 5;
x++;
console.log(x++);
console.log(++x);

let x = 5;
x--;
console.log(x--);
console.log(--x);

14.4 Operadores de comparación

Permiten comparar dos valores. El resultado siempre es un valor booleano: true o false.

14.5 Operadores lógicos

Permiten combinar varias condiciones. Los usaremos más adelante en las sentencias condicionales.

14.6 Operador de concatenación

El operador + también puede utilizarse para unir cadenas de texto, pero actualmente suele preferirse el uso de template literals.

const nombre = "John";
const apellido = "Doe";
console.log(nombre + " " + apellido);
// mejor así
console.log(`Hola ${nombre} ${apellido}`);

14.7 Operador de asignación si izquierda nula ??

Existe el operador nullish coalescing assignment que coge el dato de la derecha únicamente cuando el de la izquierda vale null o undefined.

const a = { duration: 50 };
a.speed ??= 25;
console.log(a.speed);
// Salida esperada: 25

a.duration ??= 10;
console.log(a.duration);
// Salida esperada: 50

Este operador evita muchos errores relacionados con valores inexistentes.

15.1 Salida mediante la consola

La forma más habitual durante el desarrollo consiste en utilizar la consola del navegador. La función más utilizada y la que se ha estado utilizando hasta ahora. Aparte del formato log podemos utilizar otros métodos detallados a continuación:

console.log("Hola mundo");
console.info("Información");
console.warn("Advertencia");
console.error("Error");

Para los dos últimos métodos, algunos navegadores los muestran utilizando diferentes colores o iconos.

15.2 Solicitar datos mediante prompt()

La función prompt() muestra una ventana solicitando información al usuario, que deberá escribir el valor y pulsar el botón Aceptar. El valor deberá ser guardado en una variable

const nombre = prompt("Introduce tu nombre");

Esta función hoy en día no se usa ya que tiene varios inconvenientes y su función se puede obtener a través de formularios:

• Interrumpen la ejecución del programa.
• Bloquean la interacción con la página.
• Su apariencia depende del navegador.
• No pueden personalizarse.

15.3 Mostrar mensajes mediante alert()

La función alert() muestra una ventana con un mensaje. El programa permanece detenido hasta que el usuario pulse el botón de aceptación. Hoy en día apenas se usa por las mismas razones que prompt().

alert("Bienvenido");

15.4 Solicitar confirmación mediante confirm()

La función confirm() muestra una pregunta con dos botones para Aceptar o Cancelar, que nos devolverá un valor booleano.

const borrar = confirm("¿Desea eliminar el registro?");

De nuevo, una función apenas usada ya que es habitual usar modals

15.5 Mostrar información en la página

Además de la consola, JavaScript puede modificar el contenido de una página web. Profundizaremos más adelante, pero sirva el siguiente ejemplo como un adelanto.

<p id="mensaje"></p>

document.getElementById("mensaje").textContent = "Hola!";

16.1 Estructuras condicionales

Tal como existe en otros lenguajes de programación la estructura condicional if es la más sencilla y ejecutará el contenido si se cumple una condición. Si esa condición no se cumple y existe el bloque else se ejecutará este segundo bloque.

const edad = 20;

if (edad >= 18) {
    console.log("Mayor");
}

const edad = 20;

if (edad >= 18) {
    console.log("Mayor");
} else {
    console.log("Menor");
}

En la condición se pueden usar los operadores de comparación vistos previamente y si queremos concatenar más de una condición, los operadores lógicos.

const edad = 20;

if (edad >= 18 && edad <=65) {
    console.log("Mayor");
} else {
    console.log("Menor o jubilado");
}

let edad = 20;

if (edad >= 65) {
    console.log("Jubilado");
} else if (edad >= 18){
    console.log("Mayor");
} else {
    console.log("Menor");
}

Tal como se puede ver, también se puede utilizar else if si queremos comprobar una nueva condición que no se valide en la anterior.

const edad = 20;

const mensaje = edad >= 18 ? "Mayor" : "Menor";

switch (action) {
  case "draw":
    console.log("draw");
    break;
  case "eat":
    console.log("eat");
    break;
  default:
    console.log("default");
}

17.1 El bucle while

El bucle while ejecuta un bloque mientras la condición sea verdadera. La condición se evalúa antes de cada iteración, y por tanto, si la condición es falsa, no se realizará el bucle.

let contador = 1;

while (contador <= 5) {
    console.log(contador);
    contador++;
}

let contador = 1;

while (contador <= 5) {
    console.log(contador);
}

17.2 El bucle do…while

En este caso la condición se evalúa después de ejecutar el bloque.

let contador = 1;
do {
    console.log(contador);
    contador++;
} while (contador <= 5);

17.3 El bucle for

Es el bucle más utilizado cuando conocemos de antemano el número de repeticiones.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

En este caso en la sentencia se diferencian tres partes:

• Inicialización: let i = 0
• Condición: i < 10
• Actualización: i++

17.4 El bucle for…of

JavaScript moderno incorpora el bucle for…of, diseñado para recorrer objetos iterables (Aray, Map, Set…).

Es la forma recomendada para recorrer arrays.

const colores = ["Rojo", "Verde", "Azul"];

for (const color of colores) {
    console.log(color);
}

17.5 El bucle for…in

Con el bucle for…in se puede recorrer las propiedades de un objeto.

const alumno = {
    nombre: "Bob",
    edad: 20
};

for (const propiedad in alumno) {
    console.log(propiedad);
}

También puede utilizarse sobre arrays, aunque no es recomendable. Para recorrer arrays utilizaremos siempre for…of.

17.6 Resumen de bucles

En la siguiente tabla se puede ver un resumen de los tipos de bucles y para qué deberíamos usarlos.

17.7 Las sentencias break y continue

En ocasiones es necesario modificar el comportamiento normal de un bucle, y para ello están las siguiente instrucciones:

• break: finaliza inmediatamente el bucle.
• continue: salta la iteración actual y continúa con la siguiente.

const numeros = [4, 8, 15, 23];

for (const numero of numeros) {
    if (numero === 15) {
        console.log("Encontrado");
        break;
    }
}

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log(i);
}

18.1 Estructura try…catch

La estructura de gestión de excepciones que está presente en muchos lenguajes de programación es try…catch, y JavaScript no iba a ser la excepción.

Si realizamos una sentencia que es propensa a generar un error, el programa puede pararse. Si esa sentencia se realiza dentro de un try…catch podemos controlar la gestión del error.

try {
    console.log(variableInexistente);
}
catch (error) {
    console.log("Error: "+error);
}

try {
    console.log("Inicio");
}
catch (error) {
    console.log("Error: "+error);
}
finally {
    console.log("Fin");
}

18.2 Generar errores con throw

También es posible producir errores de forma intencionada con la sentencia throw.

const edad = -5;

if (edad < 0) {
    throw new Error("La edad no puede ser negativa.");
}

19.1 Declaración y uso de funciones

La forma clásica de crear una función consiste en utilizar la palabra reservada function. Para llamar a la función usaremos la palabra reservada junto con ().

function saludar() {
    console.log("Hola.");
}

saludar();
saludar();

19.2 Parámetros

En muchas ocasiones una función debe trabajar con datos diferentes cada vez que se ejecuta y para ello se utilizan los parámetros. Un parámetro es una variable que recibe un valor cuando la función es llamada. Una función puede recibir varios parámetros.

function saludar(nombre) {
    console.log(`Hola ${nombre}`);
}

saludar("Ann");
saludar("Bob");

Aunque es habitual llamar como sinónimos “parámetro” o “argumento”, existe una pequeña diferencia:

• Parámetro: variable definida en la función.
• Argumento: valor que se pasa al llamar a la función.

function saludar(nombre="Usuario") {
    console.log(`Hola ${nombre}`);
}

saludar();
saludar("Alice");

function sumar(a, b) {
    console.log(a+b);
}

sumar(4);

19.3 Valor de retorno

Muchas funciones no solo realizan una tarea, sino que además producen un resultado. Para ello se utiliza la palabra reservada return para devolver el resultado.

function sumar(a, b) {
    return a + b;
}

let resultado = sumar(4,6);
console.log(resultado);

Si una función no tiene return el valor que devuelve por defecto es undefined.

19.4 Funciones anónimas y funciones flecha (arrow Functions)

JavaScript moderno incorpora una sintaxis para crear funciones anónimas, más compacta para definir funciones que carecen de nombre/identificador. Otra manera de crear funciones anónimas son las conocidas como “funciones flecha” (arrow functions).

Las funciones anónimas son usadas cuando no es necesario reutilizar su código, para asignar valores directamente a una variable, para asignar como argumento a otra función o para ser devueltas desde una función.

A continuación distintos ejemplos de funciones anónimas y la sintaxis que se puede utilizar.

const m = function(x, y){
  return x * y;
};

const m = (x, y) => {
    return x * y;
}

const m = (x, y) => x * y;

const m = () => "Hola!";

Objetos

20.1 Propiedades

Tal como se ha mencionado, un objeto contiene una colección de propiedades, y sobre ellas tenemos la posibilidad de realizar distintas operaciones que vamos a detallar a continuación:

console.log(alumno.nombre);
console.log(alumno.edad);
console.log(alumno.direccion.calle);

console.log(alumno["nombre"]);
console.log(alumno["direccion"]["calle"]);
//evitad mezclar
console.log(alumno["direccion"].calle);

let propiedad = "direccion";
console.log(alumno[propiedad])

alumno.nombre = "Bob";
alumno.curso = "2º DAW";

delete alumno.curso;

const profesor = null;
console.log(profesor?.nombre); // undefined
console.log(profesor.nombre);  // error

if ("edad" in alumno) {
    console.log("tiene edad")
} else {
    console.log("no tiene edad")
}

const alumno = {
    nombre: "Alice",
    edad: 20,
    ciudad: "Bilbao"
};

for (const propiedad in alumno) {
    console.log(propiedad);
}

const propiedades = Object.keys(alumno);
console.log(propiedades);
// recorrer propiedades
for (const propiedad of Object.keys(alumno)) {
    console.log(propiedad);
}

console.log(Object.values(alumno));

console.log(Object.values(alumno));
// recorrer propiedad/valor
for (const [propiedad, valor] of Object.entries(alumno)) {
    console.log(propiedad, valor);
}

20.2 Métodos

Los objetos también puede contener funciones, que reciben el nombre de métodos. Los métodos se pueden declarar de dos maneras tal como podemos ver a continuación:

const alumno = {
    nombre: "Carol",
    saludar: function () {
        console.log("Hola.");
    }
};
alumno.saludar();

const alumno = {
    nombre: "David",
    saludar (saludo) {
        console.log(`Hola ${saludo}`);
    }
};
alumno.saludar("tu");

const alumno = {
  nombre: "Eve",
  saludar() {
    console.log(`Hola ${this.nombre}`);
  }
};
alumno.saludar();

const alumno = {
  nombre: "Frank",
  saludar: => () {
    console.log(`Hola ${this.nombre}`);
    //undefined
  }
};
alumno.saludar();

20.3 Copia de objetos

En muchas ocasiones necesitamos crear una copia de un objeto para modificarla sin alterar el original. Sin embargo, copiar un objeto en JavaScript no siempre produce el resultado esperado. Para comprender este comportamiento es necesario recordar que las variables que almacenan objetos guardan una referencia al objeto, no el objeto en sí.

Imaginemos el siguiente ejemplo en el que creamos un objeto y creamos otra variable asignando el objeto:

const alumno1 = {
    nombre: "Grace",
    edad: 20
};
const alumno2 = alumno1;

Ambas variables hacen referencia al mismo objeto:

Esto hace que aunque modifiquemos alumno2 el cambio también se ve reflejado en alumno1. Es más, si realizamos la comparación con === nos devuelve que es true, porque son el mismo objeto.

const alumno1 = {
    nombre: "Heidi",
    edad: 20
};
const alumno2 = alumno1;
console.log(alumno1 === alumno2);
const alumno3 = {
    nombre: "Heidi",
    edad: 20
};
console.log(alumno1 === alumno3);

const alumno1 = {
    nombre: "Ivan",
    edad: 20,
    direccion: {
        ciudad: "Bilbao"
    }
};
const alumno2 = {...alumno1};
console.log(alumno1 === alumno2);

const alumno1 = {
    nombre: "Alice",
    edad: 20,
    direccion: {
        ciudad: "Bilbao"
    }
};
const alumno2 = Object.assign({}, alumno1);
console.log(alumno1 === alumno2);

const alumno1 = {
    nombre: "Bob",
    edad: 20,
    direccion: {
        ciudad: "Bilbao"
    }
};
const alumno2 = structuredClone(alumno1);

20.4 Combinar objetos

El operador spread también puede utilizarse para combinar objetos.

const persona = {
    nombre: "Carol"
};
const datos = {
    ...persona,
    edad: 20,
    ciudad: "Bilbao"
};
console.log(datos);

20.5 Sobrescribir propiedades

Si una propiedad aparece varias veces, prevalece la última.

const alumno = {
    nombre: "Dan",
    edad: 20
};

const copia = {
    ...alumno,
    edad: 21
};

21.1 Acceder y modificar elementos

Para acceder y modificar elementos de un array debemos hacerlo a través de su índice. En JavaScript los índices empiezan en 0.

console.log(datos[0]);

datos[2] = 30;

21.2 Longitud del array

Para poder saber cuántos elementos tiene el array tenemos la propiedad length. Por lo tanto, si queremos acceder al último elemento, tendremos que restarle 1.

console.log(datos.length);

datos[datos.length-1];

21.3 Recorrer un array

La forma clásica consiste en utilizar un bucle for, aunque actualmente se hace uso de for…of.

for (let i=0; i<datos.length; i++) {
    console.log(datos[i]);
}

for (const dato of datos) {
    console.log(dato);
}

21.4 Métodos de arrays

JavaScript incorpora numerosos métodos para trabajar con arrays. Muchos de ellos modifican el contenido del array y otros devuelven uno nuevo. A continuación veremos los más utilizados, pero es interesante ver la documentación de arrays para ver todos.

const numeros = [10, 20, 30, 40, 50];
// añadir elemento al final
numeros.push(60);
// eliminar último elemento
numeros.pop();
// añadir al inicio
numeros.unshift(5);
// eliminar el primero
numeros.shift();
// obtener una parte del array
const nums = numeros.slice(1, 3);

const colores = ["Rojo","Verde","Azul"];
// buscar un elemento
console.log(colores.includes("Verde"));
// obtener la posición
console.log(colores.indexOf("Azul"));
// concatenar arrays
const nuevo = numeros.concat(colores);
const letras = ["C", "A", "B"];
// ordenar
letras.sort();
// invertir
letras.reverse();
// convertir en cadena
console.log(colores.join(", "));

En la siguiente tabla un resumen de los métodos vistos:

21.5 Copia de arrays

Al igual que pasaba con los objetos, si tenemos un array creado, al asignarlo a otra variable no estamos realizando una copia, sino una referencia al dato. Es importante tener esto en cuenta, por lo que recuerda lo visto en copia profunda de los objetos para hacerlo con arrays.

Programación Orientada a Objetos

22.1 Resumen de conceptos en POO

Aunque ya se ha programado con orientación a objetos, a continuación se resume los conceptos más importantes:

• Clase: describe cómo serán los objetos.
• Objeto: es una instancia concreta creada a partir de esa clase.
• Propiedades/Atributos: representan el estado del objeto (nombre, edad, …).
• Métodos: representan el comportamiento, o funciones, que puede realizar el objeto.

Tradicionalmente la Programación Orientada a Objetos se basa en cuatro conceptos fundamentales, que ya nos deberían sonar, o al menos, saber utilizar:

• Abstracción: consiste en representar un sistema enfocándose en sus características esenciales
• Encapsulación: es la agrupación de datos con los métodos que operan en esos datos.
• Herencia: gracias a la herencia se pueden crear nuevas clases partiendo de una ya preexistente.
• Polimorfismo: se refiere a la propiedad por la que es posible enviar mensajes sintácticamente iguales a objetos de tipos distintos.

23.1 Encapsulación

Uno de los principios fundamentales de la Programación Orientada a Objetos es la encapsulación, que consiste en proteger el estado interno de un objeto y controlar la forma en que puede accederse a él.

En lugar de permitir que cualquier parte del programa modifique libremente los datos, el propio objeto decide cómo deben utilizarse.

class Cuenta {
    constructor(saldo) {
        this.saldo = saldo;
    }
    setSaldo(saldo){
        this.saldo = saldo;
    }
}

const cuenta = new Cuenta(1000);
// nada impide hacer
cuenta.saldo = -5000;
// debería ser
cuenta.setSaldo(1500);

Desde el punto de vista de la programación, acceder a un campo y modificarlo es posible, pero puede afectar al comportamiento del mismo. Es por eso que para evitar problemas deberíamos hacer uso de la encapsulación y crear métodos que modifiquen las propiedades.

23.2 Campos y métodos privados

Aunque pueda parecer extraño, JavaScript incorporó los elementos y métodos privados en julio del 2021. Para declarar propiedades y métodos privados se hace usando el símbolo #.

Una propiedad y un método privado sólo se podrá acceder desde la propia clase, tal como sucede en otros lenguajes que cuentan con programación orientada a objetos.

class Cuenta {
    #saldo;
    constructor(saldo) {
        this.#saldo = saldo;
    }
    #privado() {
        console.log("Priv");
    }
    getSaldo() {
        this.#privado();
        return this.#saldo;
    }
}

const cuenta = new Cuenta(1000);
// obtener dato
console.log(cuenta.getSaldo());

//esto dará error
console.log(cuenta.#privado());
//esto dará error
console.log(cuenta.#saldo);

Tal como se puede ver, para obtener acceso a la propiedad privada debemos hacer uso de un método creado a tal efecto getSaldo(), que es público. Lo mismo si queremos modificar la propiedad, se debe hacer a través de un método.

Es importante matizar que en navegadores Chrome desde la consola de desarrollador es posible acceder al método privado, por lo que no dará error.

23.3 Getters y setters

Aunque anteriormente hemos visto cómo acceder a una propiedad, hemos utilizado el estilo clásico de otros lenguajes como Java. En cambio, JavaScript incorpora una sintaxis especial denominada getter y setter.

Un getter permite consultar una propiedad como si fuese un atributo, mientras que el setter permite modificar una propiedad.

class Cuenta {

    #saldo;

    constructor(saldo) {
        this.#saldo = saldo;
    }

    get saldo() {
        return this.#saldo;
    }
    set saldo(valor) {
        if (valor >= 0) {
            this.#saldo = valor;
        }
    }
}

console.log(cuenta.saldo);
cuenta.saldo = 500;
console.log(cuenta.saldo);

27.1 Estructura del árbol DOM

El DOM organiza todos los elementos mediante relaciones familiares.

Cada nodo puede tener:

• Un padre (parent): En el ejemplo anterior el padre de <h1> es <body>.
• Uno o varios hijos (children): <body> tiene dos hijos.
• Hermanos (siblings): el <h1> tiene un hermano a nivel jerárquico que es el <p>.

Comprender estas relaciones facilita enormemente la navegación por el documento. Cada elemento conoce su posición dentro del árbol, y gracias a ello es posible recorrer toda la estructura del documento. Un símil sería una estructura de ficheros, eligiendo un fichero de manera aleatoria, podemos ver si tiene hijos (si es un directorio), hermanos (otros ficheros en la misma ruta) o subir al directorio padre.

27.2 Tipos de nodos

Aunque habitualmente trabajaremos con elementos HTML, el DOM contiene distintos tipos de nodos:

• Documento.
• Elementos HTML.
• Comentarios.
• Texto.

En el siguiente ejemplo el elemento <p> es un nodo. El texto "Bienvenido" también constituye otro nodo.

<p>Bienvenido.</p>

28.1 Selección de elementos

JavaScript proporciona varios métodos para realizar esta tarea, y todos ellos pertenecen al objeto document.

<h1 id="titulo">Mi página</h1>

const titulo = document.getElementById("titulo");

<h1 id="titulo">Mi página</h1>
<p class="vip">Muy VIP</p>
<p>otro texto</p>

const titulo = document.querySelector("#titulo");
const vip = document.querySelector(".vip");
const p = document.querySelector("p");

const parrafos = document.querySelectorAll("p");

for (const parrafo of parrafos) {
    console.log(parrafo);
}

28.2 Recorrer los elementos del DOM

En el apartado anterior hemos aprendido a localizar elementos dentro del DOM. Una vez localizado un elemento, también es posible desplazarse por el árbol DOM utilizando las relaciones de parentesco existentes entre los elementos. A través de un elemento podemos acceder a:

• El elemento padre.
• Los elementos hijos.
• El primer hijo.
• El último hijo.
• Los elementos hermanos.

Estas propiedades resultan especialmente útiles cuando conocemos la posición de un elemento dentro del documento y queremos movernos a partir de él.

Para los siguientes ejemplos vamos a partir del siguiente HTML:

<ul id="lista">
    <li id="html">HTML</li>
    <li id="css">CSS</li>
    <li id="javascript">JavaScript</li>
</ul>

const elemento = document.querySelector("#html");
console.log(elemento.parentElement);

const lista = document.getElementById("lista");
console.log(lista.firstElementChild);

const lista = document.getElementById("lista");
console.log(lista.lastElementChild);

const lista = document.getElementById("lista");
console.log(lista.children);

for (const elemento of lista.children) {
    console.log(elemento.textContent);
}

const lista = document.getElementById("lista");
const hijo = lista.firstElementChild;
console.log(hijo.nextElementSibling);

const e = document.querySelector("li:last-child");
console.log(e.previousElementSibling);

let elemento = lista.firstElementChild;

while (elemento) {
    console.log(elemento.textContent);
    elemento = elemento.nextElementSibling;
}

29.1 Propiedad textContent

La propiedad textContent permite obtener o modificar todo el texto contenido en un elemento. Supongamos el siguiente HTML.

<h1 id="ti">Hola</h1>
<p id="hola">
  Ey <span>Alice</span>
</p>

const ti = document.querySelector("#ti");
console.log(ti.textContent);
ti.textContent = "JavaScript";

Tal como se puede ver, se puede obtener el texto del elemento y también modificarlo.

29.2 Propiedad innerHTML

innerHTML permite leer o modificar el contenido HTML de un elemento. Resulta muy cómodo para modificar un componente y añadir nuevo HTML, el problema es que puede introducir problemas de seguridad de ejecutar código JavaScript malicioso ya que interpreta el código introducido.

<h1 id="ti">Hola</h1>
<p id="hola">
  Ey <span>Alice</span>
</p>
<p id="nuevo"></p>

const h = document.querySelector("#hola");
h.innerHTML = "<strong>Alice</strong>";
const n = document.querySelector("#nuevo");
n.innerHTML = `
  <h2>Noticias</h2>
  <p>bla bla</p>
`;

29.3 Propiedad innerText

innerText también trabaja con texto, pero únicamente tiene en cuenta el contenido visible. Es decir, ignora texto oculte (hidden) y código de estilo o de etiquetas <script>. En la documentación de MDN hay un ejemplo.

30.1 Obtener atributos

Si queremos obtener los nombres de los atributos que están seteados de un elemento podemos utilizar getAttributeNames(). Este método nos devolverá un array con los nombres, por lo que podemos recorrerlo con un bucle de los que hemos visto previamente.

Si lo que queremos es obtener el contenido de un atributo en concreto usaremos getAttribute("nombre").

<img src="img.png" id="foto">

<a href="https://kernel.org">
    Visitar
</a>

<input type="text">

const imagen = document.querySelector("#foto");
let nombres = imagen.getAttributeNames();

for (let n of nombres){
    console.log(n);
    imagen.getAttribute(n);
}

//acceder directamente al id
console.log(imagen.id);

Si conocemos los atributos del objeto podemos acceder a ellos directamente a través del objeto.

30.2 Modificar atributos

Podemos modificar atributos de un elemento, o crear nuevos atributos, usaremos la función setAttribute()

const enlace = document.querySelector("a");
//modifica el atributo HTML
enlace.setAttribute("target","_blank");

//modifica el objeto DOM
enlace.href="https://www.google.com";

30.3 Crear atributos personalizados

Aunque nada nos impide a crear atributos personalizados con el nombre que queramos, las buenas prácticas y el estándar nos dice que tenemos que crearlos con el nombre empezando por data-. La documentación nos indica que de esta manera esa información se intercambiará entre el HTML y el DOM.

const enlace = document.querySelector("a");

enlace.setAttribute("data-grado","DAW");
enlace.setAttribute("data-curso",2);

//obtener todos los atributos personalizados
console.log(enlace.dataset);
//acceder a un atributo personalizado concreto
console.log(enlace.dataset.grado);
console.log(enlace.dataset.curso);

Estos atributos resultan muy útiles para almacenar información relacionada con un elemento.

30.4 Eliminar atributos

Al igual que podemos crear, también podemos eliminar un atributo concreto

enlace.removeAttribute("target");

30.5 Comprobar si existe

Para comprobar si un atributo existe podemos usar hasAttribute() que nos devolverá un booleano.

console.log(enlace.hasAttribute("href"));

31.1 Añadir clases

Si queremos añadir una clase a un elemento concreto se puede usar classList.add().

const mensaje = document.querySelector("#mensaje");
mensaje.classList.add("destacado");

31.2 Alternar una clase

El método classList.toggle() añade la clase si el elemento no la tiene, y si la tiene la elimina.

const mensaje = document.querySelector("#mensaje");
mensaje.classList.toggle("italica");

31.3 Comprobar si existe una clase

Para saber si un elemento tiene una clase podemos usar la función classList.contains(), que nos devuelve un booleano.

const mensaje = document.querySelector("#mensaje");
console.log(mensaje.classList.contains("italica"));

31.4 Reemplazar una clase

Si queremos modificar una clase por otra tenemos la función classList.replace().

const mensaje = document.querySelector("#mensaje");
mensaje.classList.replace(
    "destacado", // reemplaza esta clase
    "normal"     // por esta otra
);

31.5 Añadir varias clases

Si queremos añadir varias clases en lugar de ir una a una, podemos utilizar classList.add()

const mensaje = document.querySelector("#mensaje");
mensaje.classList.add(
    "rojo",
    "grande",
    "centrado"
);