Introducción a JavaScript
Descubre qué es JavaScript, cómo funciona en el navegador, y por qué es el lenguaje fundamental del desarrollo web moderno. Una introducción clara y sin atajos para entender sus bases, su historia y su papel en el frontend.
JavaScript es el lenguaje de la Web.
Si HTML define la estructura, y CSS la apariencia (estilo), JavaScript proporciona el comportamiento interactivo.
Es el lenguaje que hace posible que una app responda a interacciones del usuario sin recargar la página, que se muestren mensajes de error sin redirecciones, que se envíen formularios de forma asíncrona o que se filtre contenido en tiempo real.
Sin JavaScript, una web es un documento estático. Con JavaScript, una web se convierte en una aplicación.
¿Dónde se ejecuta JavaScript?
Tu código JavaScript se ejecuta en el motor del navegador del usuario. Cada navegador moderno incluye uno:
- V8 (Chrome, Edge).
- SpiderMonkey (Firefox).
- JavaScriptCore (Safari).
<!DOCTYPE html>
<html>
<body>
<script>
console.log('I am JS');
</script>
</body>
</html>
También puede ejecutarse fuera del navegador mediante Node.js (que también usa V8), pero en FrontendLeap nos centraremos en su uso en desarrollo Frontend.
Verificación práctica
Aunque el motor JavaScript no aparece de forma explícita, puedes inspeccionar tu navegador con:
console.log('User agent:', navigator.userAgent);
Si ves "Chrome" en la cadena, estás usando V8 (motor de JavaScript de Chromium).
Los motores más comunes son:
- Chrome / Edge / Brave → V8.
- Firefox → SpiderMonkey.
- Safari → JavaScriptCore.
Cada uno ejecuta el mismo lenguaje, pero con optimizaciones y comportamientos internos distintos.
Relación con HTML y CSS
JavaScript interactúa directamente con el DOM (Document Object Model), la representación viva de tu HTML en memoria.
- HTML define qué elementos existen.
- CSS define cómo se ven.
- JavaScript define qué hacen y cómo cambian.
document.body.innerHTML = '<button id="demo-button">Wanna press?</button>'
document.getElementById('demo-button').addEventListener('click', function() {
this.textContent = 'Pressed!';
});
Este código:
- Selecciona un elemento del DOM.
- Escucha una interacción del usuario.
- Modifica el contenido en tiempo real.
Características del lenguaje
JavaScript es un lenguaje:
- Interpretado: No necesita compilación previa*. Se ejecuta línea por línea.
- Dinámicamente tipado: Las variables pueden cambiar de tipo en tiempo de ejecución.
let valor = "texto"; // string
valor = 42; // ahora es number
valor = true; // ahora es boolean
- Flexible (a veces en exceso): Permite operaciones que otros lenguajes bloquearían.
const usuario = { nombre: 'Juan' };
console.log(usuario.edad.toUpperCase()); // Error en runtime
Esta flexibilidad da poder, pero exige criterio. Muchos errores vienen de asumir que algo existe cuando no es así.
- Orientado a eventos: Está diseñado para reaccionar a lo que hace el usuario (el navegador es el interfaz de eventos).
document.addEventListener('click', handleClick);
window.addEventListener('resize', handleResize);
form.addEventListener('submit', handleSubmit);
¿JavaScript es interpretado o compilado?
JavaScript se ejecuta sin necesidad de compilarlo manualmente como otros lenguajes (C, Rust, etc.), pero eso no significa que nunca se compile.
Los motores modernos (como V8) compilan JavaScript a código máquina en tiempo de ejecución usando técnicas JIT (Just In Time).
Esto les permite ejecutar código mucho más rápido que con interpretación pura.
Así que técnicamente, JavaScript es compilado dinámicamente, no interpretado en bruto.
Lo importante para ti: no necesitas compilarlo manualmente, pero saber que hay compilación JIT te explica por qué el rendimiento importa.
Por qué entenderlo para luego dominarlo es crítico
Frameworks como React, Vue, Angular o Svelte están construidos sobre JavaScript.
Sin dominarlo:
- No entiendes qué hacen esos frameworks internamente.
- No puedes depurar más allá del tutorial.
- Te vuelves dependiente de recetas copiadas.
- No puedes optimizar ni resolver errores reales.
JavaScript no es opcional. Es el punto de inflexión entre parecer Frontend Developer y serlo.
Herramientas esenciales
DevTools Console
Tu primer laboratorio real de JavaScript. Prueba:
console.log(window);
console.log(document);
console.log(document.querySelector('body'));
console.log(navigator.userAgent);
console.log(location.href);
Debugging básico
function procesarDatos(datos) {
debugger; // Pausa aquí si DevTools está abierto
return datos.map(item => item.value);
}
console.table(arrayDeDatos);
console.group('Procesando usuario');
console.log('ID:', usuario.id);
console.log('Nombre:', usuario.nombre);
console.groupEnd();
