JavaScript – Tutorial completo

JavaScript es uno de los pilares fundamentales del desarrollo web, junto con HTML y CSS. Permite crear páginas interactivas, dinámicas y con comportamientos avanzados del lado del cliente.

Existen distintas formas de agregar JavaScript a un documento HTML, ya sea mediante scripts internos, archivos externos o código inline, siguiendo buenas prácticas de rendimiento y mantenimiento.

console.log() es una herramienta fundamental para depurar código. Te ayudará a comprender mejor los siguientes puntos y ejemplos de esta guía para aprender a usar JavaScript mostrando información en la consola del navegador.

Las variables en JavaScript son contenedores que permiten almacenar datos para ser utilizados y manipulados a lo largo del programa. Son fundamentales para guardar información, realizar cálculos y controlar el flujo de la aplicación.

• Qué son las variables (con ejemplos)
• Ámbito (scope) de una variable.
• Hoisting en variables: qué es y cómo funciona

El operador typeof permite conocer el tipo de dato de una variable o valor en JavaScript. Es una herramienta clave para depuración, validaciones y control del flujo del programa.

El shadowing ocurre cuando una variable declarada en un ámbito interno tiene el mismo nombre que otra variable en un ámbito externo, “ocultando” temporalmente su valor.

Los tipos de datos definen la naturaleza de los valores que puede manejar JavaScript, como números, cadenas de texto, valores booleanos, null y undefined. Comprenderlos es esencial para escribir código correcto y predecible.

Los operadores en programación permiten realizar cálculos, asignaciones, comparaciones y operaciones lógicas, siendo fundamentales para controlar el comportamiento de los programas.

Los operadores en JavaScript permiten realizar cálculos, comparaciones, asignaciones y evaluaciones lógicas. Son fundamentales para manipular datos y controlar el flujo de ejecución de un programa.

• Operadores aritméticos
• Operadores de asignación
• Operadores de comparación
• Operadores lógicos
• Operador condicional (ternario)
• Operadores bit a bit (Bitwise)
• Operador COMA

Al activar el modo estricto ("use strict"), se aplican reglas y restricciones más rigurosas en el código con el objetivo de ayudarte a escribir JavaScript más limpio, seguro y menos propenso a errores comunes.

La estructura condicional if…else permite ejecutar distintos bloques de código según se cumpla o no una condición, siendo una de las bases del control de flujo en JavaScript.

La estructura switch se utiliza para evaluar una expresión y ejecutar distintos bloques de código según los valores posibles, ofreciendo una alternativa clara al uso de múltiples if.

El bucle for permite repetir un bloque de código un número determinado de veces, siendo ideal cuando se conoce de antemano la cantidad de iteraciones.

El bucle while ejecuta un bloque de código mientras una condición sea verdadera, siendo útil cuando no se conoce previamente el número de repeticiones.

El bucle do…while es similar al while, pero garantiza que el bloque de código se ejecute al menos una vez antes de evaluar la condición.

Un array en JavaScript es una estructura de datos que permite almacenar múltiples valores en una sola variable, facilitando la organización y manipulación de colecciones de datos.

Los arrays pueden declararse de distintas formas en JavaScript, ya sea utilizando corchetes o el constructor Array, dependiendo del contexto y la claridad del código.

Acceder a los elementos de un array permite obtener o modificar valores específicos utilizando índices numéricos que comienzan desde la posición cero.

Los métodos de los arrays permiten manipular, recorrer y transformar datos de forma eficiente, utilizando funciones integradas como push, pop, map y filter.

La propiedad length permite conocer la cantidad de elementos que contiene un array en JavaScript, siendo fundamental para recorrerlo y manipular sus datos correctamente.

Recorrer un array consiste en iterar sobre cada uno de sus elementos para leerlos, modificarlos o realizar operaciones, utilizando bucles como for, while o métodos específicos.

JavaScript ofrece métodos como push, pop, shift y unshift para agregar o quitar elementos de un array de forma dinámica.

Vaciar un array significa eliminar todos sus elementos, lo cual puede lograrse de distintas formas dependiendo del contexto y del manejo de referencias en memoria.

El método sort() permite ordenar los elementos de un array, ya sea alfabéticamente o numéricamente, teniendo en cuenta el criterio de comparación utilizado.

Invertir un array consiste en cambiar el orden de sus elementos, colocando el último como primero y viceversa. Esto puede lograrse fácilmente con métodos nativos de JavaScript.

Iterar un array implica recorrer sus elementos uno por uno utilizando distintos métodos como forEach, map, for...of o bucles tradicionales.

JavaScript ofrece distintos métodos para buscar elementos dentro de un array, como indexOf, includes y find, facilitando la localización de datos específicos.

Los arrays multidimensionales permiten almacenar estructuras de datos más complejas, como matrices o tablas, utilizando arrays dentro de otros arrays.

La desestructuración de arrays permite extraer valores de un array y asignarlos a variables de forma rápida y clara, mejorando la legibilidad del código.

Los objetos en JavaScript permiten agrupar datos relacionados y comportamientos dentro de una misma estructura, representando entidades del mundo real de forma clara y organizada.

Crear objetos es una de las bases del lenguaje. Pueden definirse usando notación literal, constructores o funciones, permitiendo estructurar datos de múltiples maneras.

La palabra clave this hace referencia al objeto actual desde el cual se está ejecutando un método, permitiendo acceder a sus propiedades y métodos internos.

El operador spread permite copiar, combinar o expandir objetos de forma sencilla, evitando mutaciones y facilitando el trabajo con estructuras de datos complejas.

Comparar objetos en JavaScript no es tan directo como comparar valores primitivos, ya que los objetos se comparan por referencia y no por su contenido.

La desestructuración de objetos permite extraer propiedades en variables independientes de forma rápida, clara y muy utilizada en código moderno.

Pasar objetos como parámetros permite enviar múltiples valores a una función de forma ordenada y flexible, mejorando la legibilidad del código.

Set y Map son estructuras modernas que permiten almacenar datos únicos o pares clave-valor de forma más eficiente que los objetos tradicionales.

Las funciones son bloques de código reutilizables que realizan una tarea específica en JavaScript. Permiten organizar y estructurar mejor los programas al encapsular lógica que puede ejecutarse varias veces.

Los parámetros permiten que las funciones reciban valores de entrada, haciendo que el código sea más flexible, reutilizable y dinámico.

Los parámetros REST permiten agrupar múltiples argumentos en un solo parámetro, facilitando el manejo de funciones con una cantidad variable de datos.

El objeto arguments permite acceder a todos los valores pasados a una función, incluso cuando no se han definido parámetros explícitos.

El retorno de valores permite que una función devuelva un resultado luego de ejecutarse, posibilitando reutilizar ese valor en otras partes del programa.

El alcance o scope determina desde dónde pueden ser accedidas las variables y funciones dentro del código, evitando conflictos y errores inesperados.

El currying es una técnica funcional que transforma una función con múltiples argumentos en una serie de funciones que reciben un argumento a la vez.

Los closures permiten que una función recuerde y acceda a variables de su entorno aun después de que la función externa haya terminado su ejecución.

Las funciones expresadas se asignan a una variable, permitiendo mayor control sobre el flujo del código y facilitando su uso como valores dentro de JavaScript.

Las funciones flecha ofrecen una sintaxis más corta y clara, además de un comportamiento especial del contexto this, ideal para funciones simples y callbacks.

Las funciones anónimas no tienen nombre y suelen utilizarse como funciones temporales, especialmente en eventos y callbacks.

En JavaScript, las funciones son de primera clase, lo que significa que pueden asignarse a variables, pasarse como argumentos y retornarse desde otras funciones.

Las funciones de orden superior son aquellas que pueden recibir otras funciones como argumentos o devolverlas como resultado, permitiendo un estilo de programación más flexible y expresivo.

La recursividad permite que una función se llame a sí misma para resolver problemas complejos dividiéndolos en casos más simples, siempre controlando una condición de salida.

Las funciones generadoras permiten pausar y reanudar la ejecución de una función, produciendo valores de forma controlada mediante la palabra clave yield.

Las funciones autoejecutables se definen y ejecutan inmediatamente, ayudando a evitar la contaminación del scope global y a organizar mejor el código.

Los módulos permiten dividir el código JavaScript en archivos independientes, facilitando la reutilización, el mantenimiento y una mejor organización de proyectos modernos.

Las expresiones regulares son patrones que permiten buscar, validar y manipular texto de forma avanzada dentro de cadenas en JavaScript.

Los temporizadores permiten ejecutar código después de un determinado tiempo o de forma repetitiva, utilizando setTimeout() y setInterval().

El manejo de errores permite controlar fallos en la ejecución del código mediante estructuras como try, catch y finally.

El objeto Math proporciona propiedades y métodos matemáticos para realizar cálculos comunes como redondeos, potencias, raíces y números aleatorios.

El objeto Date permite trabajar con fechas y horas en JavaScript, obteniendo información como día, mes, año, hora actual y más.

El DOM (Document Object Model) es una representación estructurada del documento HTML que permite a JavaScript acceder, modificar y manipular dinámicamente el contenido de una página web.

Acceder al DOM consiste en seleccionar elementos HTML desde JavaScript utilizando distintos métodos como selectores por ID, clase, etiqueta o selectores CSS.

El recorrido del DOM permite navegar entre nodos padres, hijos y hermanos, facilitando la manipulación de estructuras complejas dentro del documento.

JavaScript permite modificar el contenido de los elementos HTML utilizando propiedades como textContent, innerText e innerHTML.

Los atributos y propiedades del DOM permiten cambiar dinámicamente valores como src, href, id y otros comportamientos de los elementos HTML.

JavaScript permite modificar clases y estilos CSS de los elementos para cambiar su apariencia visual y comportamiento dinámicamente.

Crear y eliminar nodos permite agregar o quitar elementos HTML dinámicamente, construyendo interfaces más interactivas y flexibles.

Los eventos en el DOM permiten detectar e interpretar las acciones del usuario o del navegador, como clics, teclas, movimientos del mouse y cargas de página.

addEventListener() permite asociar funciones a eventos específicos sin sobrescribir otros manejadores, siguiendo buenas prácticas de JavaScript moderno.

El objeto de evento contiene información clave sobre el evento ocurrido, como el elemento objetivo, el tipo de evento y propiedades adicionales útiles para su control.

El burbujeo y la captura describen cómo se propagan los eventos a través del DOM, permitiendo controlar su flujo desde el elemento origen hacia los padres o viceversa.

JavaScript ofrece múltiples tipos de eventos como eventos de mouse, teclado, formularios, ventana y táctiles, fundamentales para crear interfaces interactivas.

Los eventos de carga permiten ejecutar código en momentos clave del ciclo de vida de la página, destacándose DOMContentLoaded y load.

La delegación de eventos es una técnica que permite manejar múltiples eventos utilizando un solo listener en un elemento padre, aprovechando el mecanismo de burbujeo del DOM para mejorar el rendimiento y la escalabilidad del código.

event.preventDefault() es un método que se utiliza para cancelar el comportamiento por defecto que el navegador ejecuta ante determinados eventos, como el envío de un formulario o la navegación de un enlace.

event.stopPropagation() es un método que detiene la propagación del evento a través del DOM, evitando que el evento continúe burbujeando hacia elementos padres.

El manejo de formularios en JavaScript permite capturar, validar y procesar los datos ingresados por el usuario antes de enviarlos, mejorando la experiencia de uso y evitando recargas innecesarias de la página.

El prototipo en JavaScript es el mecanismo que permite que los objetos hereden propiedades y métodos entre sí, formando la base del sistema de herencia del lenguaje y optimizando el uso de memoria.

La cadena de prototipos es el proceso mediante el cual JavaScript busca propiedades y métodos en un objeto y, si no los encuentra, continúa la búsqueda en sus prototipos superiores.

La herencia prototípica es el mecanismo mediante el cual los objetos en JavaScript pueden heredar propiedades y métodos de otros objetos a través del sistema de prototipos, permitiendo reutilización de código y estructuras más eficientes.

Los prototipos nativos en JavaScript son los objetos base que forman parte del propio lenguaje, como Object, Array o Function. A través de sus propiedades prototype, permiten compartir métodos entre instancias y constituyen la base del sistema de herencia prototípica.

• ¿Qué son los prototipos nativos?
• Function.prototype
• Object.prototype
• Array.prototype

Las clases en JavaScript son una forma moderna de crear objetos y estructurar código utilizando una sintaxis más clara basada en la programación orientada a objetos. Permiten definir propiedades, métodos y facilitar la reutilización del código.

La declaración de clases es la forma más común de definir una clase en JavaScript. Permite crear plantillas para generar objetos con propiedades y métodos, utilizando una sintaxis clara que forma parte de la programación orientada a objetos moderna.

Las propiedades de clase permiten definir datos asociados a una clase o a sus instancias. En JavaScript pueden ser públicas, privadas o estáticas, lo que ayuda a organizar mejor la información y controlar el acceso a los datos dentro de una estructura orientada a objetos.

La herencia entre clases permite que una clase herede propiedades y métodos de otra. En JavaScript esto se logra utilizando la palabra clave extends y el método super(), facilitando la reutilización del código y la creación de jerarquías de objetos.

El operador instanceof permite comprobar si un objeto es instancia de una función constructora o clase determinada, verificando su relación dentro de la cadena de prototipos.

Los mixins son una técnica que permite reutilizar funcionalidades en múltiples clases u objetos sin necesidad de utilizar herencia directa, promoviendo un diseño más flexible y modular.

Las funciones callback se pasan como argumentos a otras funciones y se ejecutan posteriormente, siendo fundamentales en la programación asincrónica.

Las promesas en JavaScript son objetos que representan la eventual finalización (o falla) de una operación asíncrona y su valor resultante. Permiten manejar código asíncrono de forma más clara y estructurada que los callbacks tradicionales.

El encadenamiento de promesas permite ejecutar múltiples operaciones asíncronas de forma secuencial utilizando .then(), evitando el uso excesivo de callbacks y mejorando la legibilidad del código.

Los métodos estáticos de Promise como all(), race(), allSettled() y any() permiten manejar múltiples promesas en paralelo y controlar su comportamiento según diferentes escenarios.

async/await es una forma moderna de trabajar con código asíncrono en JavaScript, permitiendo escribir promesas con una sintaxis más clara y similar al código síncrono, mejorando la legibilidad y el manejo de errores.

El Event Loop es el mecanismo que permite a JavaScript gestionar la ejecución de tareas asíncronas. Las microtasks (como promesas) tienen prioridad sobre las macrotasks (como setTimeout), lo que influye directamente en el orden de ejecución del código.

Las Web APIs son interfaces proporcionadas por el navegador que permiten a JavaScript interactuar con funcionalidades externas como el DOM, eventos, almacenamiento, temporizadores y peticiones HTTP, ampliando las capacidades del lenguaje más allá de su núcleo.

El modelo cliente-servidor es una arquitectura de comunicación donde un cliente realiza solicitudes y un servidor responde proporcionando datos, recursos o servicios. Es la base del funcionamiento de aplicaciones web, sitios de internet y sistemas distribuidos modernos.

Las peticiones HTTP son solicitudes que un cliente envía a un servidor para obtener, enviar o modificar información. Utilizan métodos como GET, POST, PUT y DELETE, siendo fundamentales para la comunicación entre navegadores, servidores y APIs web.

Una API REST es una interfaz que permite la comunicación entre sistemas mediante el protocolo HTTP, utilizando recursos y métodos como GET, POST, PUT y DELETE. Es uno de los estilos más utilizados para crear servicios web modernos, escalables y fáciles de integrar.

JSON es un formato de intercambio de datos basado en texto que permite convertir objetos JavaScript en cadenas y viceversa usando JSON.stringify() y JSON.parse().

XMLHttpRequest es un objeto tradicional que permite realizar peticiones HTTP al servidor. Aunque hoy en día ha sido reemplazado en gran medida por Fetch, sigue siendo importante para entender la evolución de las solicitudes asíncronas en JavaScript.

Fetch() es una función moderna de JavaScript que permite realizar peticiones HTTP de forma asíncrona, facilitando la comunicación con servidores para obtener o enviar datos, como APIs REST, reemplazando en gran medida a XMLHttpRequest.

La Fetch API junto con Async/Await permite escribir código asíncrono de forma más clara y legible, eliminando la necesidad de encadenar promesas con .then() y facilitando el manejo de respuestas y errores mediante estructuras como try…catch.

La Fetch API permite enviar datos desde JavaScript al servidor mediante solicitudes HTTP como POST, PUT o PATCH. Es una herramienta moderna, basada en promesas, que facilita la comunicación con APIs y el envío de formularios sin recargar la página.

FormData es una interfaz que permite construir fácilmente conjuntos de datos clave-valor para enviarlos al servidor, especialmente útil en el envío de formularios, incluyendo archivos, sin necesidad de procesarlos manualmente.

La Web Storage API proporciona mecanismos para almacenar datos en el navegador mediante localStorage y sessionStorage. Permite guardar información de forma sencilla, ya sea de manera persistente o temporal, mejorando la experiencia del usuario sin necesidad de recurrir al servidor.

Las cookies en JavaScript permiten almacenar pequeños fragmentos de información en el navegador del usuario. Son utilizadas para gestionar sesiones, recordar preferencias y realizar seguimiento, aunque tienen limitaciones de tamaño y seguridad frente a otras alternativas modernas.