JavaScript

JavaScript se usa para que las páginas web sean interactivas, por ejemplo con menús que se abren, formularios que validan los datos y contenido que se actualiza sin recargar la página. También se ejecuta en servidores mediante Node.js y mueve muchas apps móviles y de escritorio. Todos los navegadores modernos ejecutan JavaScript de forma nativa.

JavaScript y Java son dos lenguajes de programación distintos que solo comparten parte del nombre. JavaScript se ejecuta sobre todo en los navegadores y tiene tipado dinámico, mientras que Java tiene tipado estático y se compila a bytecode para la máquina virtual de Java. El nombre parecido se debió a una decisión de marketing en los años noventa.

El DOM, o Document Object Model, es el árbol de objetos que el navegador construye a partir de una página HTML para que JavaScript pueda leerla y modificarla. A través del DOM, JavaScript encuentra elementos, cambia textos, añade clases y crea elementos nuevos. Todo cambio visible que un script hace en una página pasa por el DOM.

JavaScript se añade a una página HTML con una etiqueta script, que puede contener el código directamente o apuntar a un archivo JavaScript aparte con el atributo src. Poner la etiqueta script al final del body, o añadir el atributo defer, permite que el HTML cargue primero. Los archivos JavaScript separados son más fáciles de guardar en caché y de mantener.

En JavaScript, let y const tienen ámbito de bloque, mientras que var tiene ámbito de función y se puede volver a declarar. Una variable const no se puede reasignar, aunque un objeto guardado en ella sí puede cambiar por dentro. El JavaScript moderno usa const por defecto, let cuando el valor debe cambiar y evita var.

Los eventos en JavaScript son señales que envía el navegador cuando ocurre algo, como un clic, una tecla pulsada, el envío de un formulario o el fin de la carga de la página. Un script responde a un evento asociándole una función con addEventListener. Los listeners de eventos son la forma en que JavaScript hace que la página reaccione al usuario.

La delegación de eventos en JavaScript consiste en asociar un único listener a un elemento padre en lugar de uno a cada elemento hijo. El listener revisa el destino del evento para saber qué hijo se pulsó. Usa menos memoria y además funciona con elementos que se añaden a la página más tarde.

Para obtener datos de una API en JavaScript se usa la función fetch y después se lee el cuerpo con el método json de la respuesta. Fetch devuelve una promesa, así que el código suele esperar el resultado con async y await. Comprobar el estado de la respuesta y capturar los errores mantiene la página funcionando si falla la red.

Una promesa en JavaScript es un objeto que representa un valor que estará disponible más tarde, como el resultado de una petición de red. Puede estar pendiente, cumplida o rechazada. El código reacciona al resultado con then y catch, o con async y await.

Async y await permiten que el código JavaScript espere a una promesa de forma que se lee como código normal paso a paso. Una función marcada con async siempre devuelve una promesa, y await pausa esa función hasta que la promesa se resuelve. Los errores dentro de las funciones async se gestionan con un bloque try y catch normal.

ES6, también llamado ECMAScript 2015, es la gran actualización de 2015 del estándar del lenguaje JavaScript. Añadió let y const, funciones flecha, clases, plantillas de texto, desestructuración, módulos y promesas. Todos los navegadores modernos admiten ES6, y desde entonces se añaden novedades al lenguaje cada año.

Las funciones flecha en JavaScript son una forma más corta de escribir funciones con la sintaxis =>. No tienen su propio this, así que this conserva el valor del código que las rodea. Son habituales en callbacks cortos, como los que se pasan a map y filter.

JSON, o JavaScript Object Notation, es un formato de texto para guardar e intercambiar datos como pares de clave y valor. JavaScript convierte un objeto en texto JSON con JSON.stringify y vuelve a convertir el texto en objeto con JSON.parse. La mayoría de APIs web envían y reciben datos en JSON.

No, empezar con JavaScript es fácil para un principiante porque solo necesita un navegador y un editor de texto. Las partes difíciles llegan después, como el código asíncrono, el ámbito de las variables y las muchas herramientas que rodean al lenguaje. La mayoría de quienes aprenden crean páginas interactivas útiles en pocas semanas de práctica constante.

Sí, aprender JavaScript puro antes de React o Vue hace que cualquiera de los dos sea mucho más fácil de entender. Ambos se basan en funciones esenciales del lenguaje, como funciones, arrays, objetos, módulos y promesas. Quien domina lo básico también puede depurar el código del framework en lugar de adivinar.

TypeScript es JavaScript con tipos estáticos añadidos, desarrollado por Microsoft, que se compila a JavaScript normal. Los tipos permiten que el editor detecte muchos errores antes de ejecutar el código. TypeScript es muy popular en proyectos grandes en los que muchos desarrolladores comparten el mismo código.

Las páginas con JavaScript cargan más rápido si envías menos JavaScript, cargas los scripts con defer o async y divides los paquetes grandes para que cada página cargue solo lo que necesita. Minificar y comprimir los archivos reduce el tamaño de descarga. Sacar el trabajo pesado del hilo principal mantiene la página ágil ante clics y tecleo.

En JavaScript, === compara el valor y el tipo, mientras que == convierte los tipos antes de comparar. Por ejemplo, 0 == "0" es verdadero, pero 0 === "0" es falso. Usar === evita resultados sorprendentes y es la regla habitual en el JavaScript moderno.

Los módulos de JavaScript son archivos separados que exportan funciones o valores e importan lo que necesitan de otros archivos. Mantienen el código organizado, evitan las variables globales y facilitan el mantenimiento de proyectos grandes. Los navegadores cargan un módulo mediante una etiqueta script con el atributo type en module.

JavaScript se depura en el navegador con las herramientas para desarrolladores, que se abren con F12 o con clic derecho en la página y la opción Inspeccionar. La Consola muestra errores y valores registrados, y el panel Sources permite poner puntos de interrupción y avanzar línea a línea. El panel Network muestra todas las peticiones que hace la página y la respuesta de cada una.

El event loop es el mecanismo que permite a JavaScript, que usa un solo hilo, atender muchas tareas sin congelarse. El trabajo lento, como los temporizadores y las peticiones de red, espera en segundo plano, y el event loop ejecuta cada callback terminado cuando la pila de llamadas está vacía. El código que tarda mucho sigue bloqueando el event loop, por eso los bucles pesados dejan la página sin respuesta.

Sí, JavaScript se ejecuta en el servidor mediante entornos como Node.js, Deno y Bun. El JavaScript de servidor puede crear APIs, leer archivos y conectarse a bases de datos. Usar un solo lenguaje en el navegador y en el servidor permite al equipo compartir código y conocimientos.

El código JavaScript se mantiene seguro si nunca insertas en la página texto no fiable con innerHTML, si vuelves a validar todos los datos en el servidor y si no dejas secretos en el código del frontend. Cualquier cosa que se envía al navegador la pueden leer los usuarios, incluidas las claves de API. Una Content Security Policy y unas dependencias al día bloquean muchos ataques comunes.

En JavaScript, localStorage guarda los datos solo en el navegador, mientras que las cookies se envían al servidor con cada petición. localStorage admite más datos y encaja con ajustes como el tema elegido. Las cookies marcadas como HttpOnly y Secure son el lugar más seguro para las sesiones de inicio porque los scripts no pueden leerlas.

El código JavaScript fácil de mantener se escribe con funciones pequeñas, nombres claros, módulos, un formato coherente y un linter como ESLint. Evita las variables globales y separa el código que modifica el DOM del que gestiona los datos. Las pruebas automáticas hacen que los cambios futuros sean seguros.