Qué es JavaScript

docs.scrimba.com

Abre una página web y haz clic en un botón que abre un menú, escribe en un cuadro de búsqueda que sugiere resultados mientras escribes, o mira un feed cargar más publicaciones mientras te desplazas. Nada de eso es HTML, y nada de eso es CSS. Es JavaScript: el lenguaje que se ejecuta dentro del navegador y hace que una página responda a lo que haces. Este capítulo trata sobre qué es ese lenguaje, dónde se ejecuta, y cómo encaja con el HTML y CSS que ya conoces.

Un lenguaje para hacer que las páginas hagan cosas

JavaScript es un lenguaje de programación: una forma de escribir instrucciones que una computadora ejecuta paso a paso. Donde HTML describe qué hay en una página y CSS describe cómo se ve, JavaScript describe qué sucede. Es la parte que reacciona.

Piensa en una página web como una casa. HTML es la estructura, las paredes y las habitaciones. CSS es la pintura y los muebles. JavaScript es la electricidad y la plomería: el cableado que hace que un interruptor encienda una luz, o un grifo produzca agua. Es lo que hace que la página haga algo cuando una persona interactúa con ella.

JavaScript es la capa de comportamiento de una página web. HTML proporciona estructura y CSS proporciona presentación; JavaScript añade lógica e interactividad. Puede leer y cambiar la página después de que se ha cargado, responder a eventos como clics y pulsaciones de teclas, mantener un registro del estado, y hablar con servidores para cargar datos nuevos.

A diferencia de HTML y CSS, que describen un resultado, JavaScript es un lenguaje de programación completo: tiene variables, condiciones, bucles y funciones. No solo estás declarando lo que quieres, estás escribiendo los pasos que el navegador ejecuta. Ese es el cambio que trata este manual, de describir una página a programarla.

JavaScript es un lenguaje de programación de tipado dinámico de alto nivel (los valores tienen tipos, pero las variables no están bloqueadas a uno, así que un nombre puede contener un número ahora y una cadena después). En el navegador es la capa de comportamiento: manipula el DOM (el Modelo de Objetos del Documento, el árbol en memoria que el navegador construye a partir de tu HTML) en respuesta a eventos, gestiona estado, y realiza solicitudes de red.

Lo que vale la pena mantener en mente es que HTML y CSS son declarativos mientras que JavaScript es imperativo y Turing-completo: expresas computación, no solo un resultado deseado. Ese poder es por qué lleva la interactividad de toda la web, y también por qué la disciplina que HTML y CSS apenas necesitan, nombrar, estructura, manejo de errores, se convierte en tu responsabilidad en el momento en que la lógica entra en la página. La mayoría de este manual trata sobre wielding ese poder sin crear un desorden que solo tú puedas leer.

// HTML te da un botón. JavaScript lo hace hacer algo.
const button = document.querySelector(".menu-toggle");
button.addEventListener("click", openMenu);

Te encontrarás con cada pieza de eso en capítulos posteriores. Por ahora, observa la forma: JavaScript llega a la página (document.querySelector), y responde a algo que el usuario hace (addEventListener). Llegar y responder son la mayoría de lo que hace JavaScript en el navegador.

JunoUn lenguaje para hacer que las páginas hagan cosas HTML es estructura, CSS es estilo, JavaScript es comportamiento: la parte que reacciona cuando alguien usa la página. Es un lenguaje de programación real, así que escribes instrucciones que el navegador sigue paso a paso. Ese es el cambio que estás comenzando: de describir una página a decirle qué hacer.

JunoUn lenguaje para hacer que las páginas hagan cosas JavaScript es la capa de comportamiento: lee y cambia la página, responde a eventos, y habla con servidores. A diferencia de HTML y CSS es un lenguaje completo con lógica y estado, así que programas la página en lugar de declararla. Mantener ese trabajo claro en tu cabeza hace que los otros dos sean más fáciles de colocar.

JunoUn lenguaje para hacer que las páginas hagan cosas JavaScript es imperativo y Turing-completo, lo que es por qué lleva la interactividad de toda la web y por qué la estructura se convierte en tu trabajo en el momento en que la lógica aparece. Es tipado dinámicamente, así que un nombre puede contener cualquier tipo y las comprobaciones de tipo ocurren en tiempo de ejecución. La mayoría del oficio aquí es wielding ese poder sin escribir código que solo tú puedas leer.

Dónde se ejecuta JavaScript

JavaScript se ejecuta dentro del navegador. Cada navegador, Chrome, Safari, Firefox, tiene un motor incorporado que lee tu JavaScript y lo ejecuta. Eso significa que no hay nada que instalar para comenzar: si puedes abrir una página web, puedes ejecutar JavaScript.

Añades JavaScript a una página con una etiqueta <script>, generalmente justo antes de la etiqueta de cierre </body>. Para mantener tu código en su propio archivo, apunta la etiqueta a él con un atributo src que nombra el archivo, de la misma manera que una etiqueta de imagen apunta a una imagen.

El lugar más rápido para probar una línea de código es la consola del navegador, un panel en las herramientas de desarrollador donde puedes escribir JavaScript y ver el resultado inmediatamente.

JavaScript se ejecuta en un tiempo de ejecución: un entorno que proporciona el motor para ejecutar tu código más las características adicionales que ese código puede usar. En el navegador, el tiempo de ejecución te da el document para la página, window para la pestaña del navegador, fetch para solicitudes de red, y más. El lenguaje en sí es pequeño; la mayoría de lo que usas en el navegador viene del tiempo de ejecución alrededor. Carga un script externo con una etiqueta <script> y su atributo src, y añade defer para que el navegador termine de construir la página antes de ejecutar el script, lo que te evita una clase de bugs de "elemento no encontrado". La consola en las herramientas de desarrollo es un tiempo de ejecución en vivo en el que puedes escribir, y es donde probarás ideas más rápido.

JavaScript se define mediante una especificación de lenguaje (ECMAScript) y se ejecuta mediante un motor como V8 (Chrome, Node) o JavaScriptCore (Safari). El motor es solo la mitad de la historia: las capacidades útiles vienen del entorno anfitrión, el tiempo de ejecución que incrusta el motor y expone las APIs a él. En el navegador ese anfitrión es la página, proporcionando el DOM, temporizadores, fetch, almacenamiento, y eventos; en un tiempo de ejecución de servidor como Node es el sistema operativo, proporcionando archivos y sockets en su lugar.

Dos consecuencias prácticas. Primero, el mismo lenguaje se ejecuta en lugares muy diferentes, así que "¿es esto JavaScript o una característica del navegador?" es una distinción real: Array y Promise son el lenguaje, mientras que document y localStorage son el navegador. Segundo, cómo se carga un script afecta el comportamiento: un <script> clásico bloquea el análisis, defer lo ejecuta después de que el DOM está construido en orden, y type="module" aplaza por defecto y te da import/export más su propio alcance. Saber cuál estás usando explica mucha confusión de "por qué esto se ejecutó antes de que la página existiera".

JunoDónde se ejecuta JavaScript JavaScript se ejecuta en el navegador, que ya tiene un motor para ejecutarlo, así que no hay nada que instalar. Lo añades a una página con una etiqueta <script>, y el lugar más rápido para probar una línea es la consola en las herramientas de desarrollador del navegador. Ábrela y escribe algo, no puedes romper nada.

JunoDónde se ejecuta JavaScript El navegador te da un tiempo de ejecución: el motor más extras como document y fetch. Carga tu código con <script src> y añade defer para que se ejecute después de que la página esté construida. La consola es un tiempo de ejecución en vivo para probar ideas, y es el feedback más rápido que obtendrás.

JunoDónde se ejecuta JavaScript El motor ejecuta el lenguaje (ECMAScript); el entorno anfitrión suministra las APIs, lo que es por qué Array es JavaScript pero document es el navegador. Cómo se carga un script importa también: los scripts clásicos bloquean el análisis, defer se ejecuta después del DOM en orden, y type="module" aplaza y añade alcance de importación. Esa distinción explica la mayoría de los bugs de "se ejecutó antes de que la página existiera".

Tu primer vistazo a JavaScript

Aquí hay un programa diminuto. No necesitas entender cada parte aún, los próximos capítulos cubren cada una, pero ya puedes leer la forma de él:

let name = "Carlos";
console.log("Hola " + name); // Hola Carlos

La primera línea almacena el texto "Carlos" bajo el nombre name. La segunda línea imprime un mensaje en la consola, uniendo "Hola " y el nombre almacenado juntos. console.log es cómo pides a JavaScript que te muestre un valor mientras estás aprendiendo, y lo usarás constantemente.

Un primer programa, pequeño pero completo:

let name = "Carlos";
let greeting = "Hola " + name;
console.log(greeting); // Hola Carlos

Tres ideas ya están aquí: una variable que contiene un valor, una expresión que combina valores ("Hola " + name), y una sentencia que hace algo con el resultado (console.log). Casi todo JavaScript son esas tres cosas apiladas: nombra algunos valores, calcula con ellos, y actúa sobre el resultado. console.log imprime en la consola y es tu herramienta predeterminada para ver qué está haciendo realmente tu código.

El programa más pequeño y útil aún muestra el bucle central del lenguaje:

const name = "Carlos";
const greeting = `Hola ${name}`;
console.log(greeting); // Hola Carlos

Observa las opciones que un desarrollador que trabaja hace por reflejo aquí: const en lugar de let porque el enlace nunca cambia (señalando intención y previniendo reasignación accidental), y un literal de plantilla (la cadena de comilla invertida con ${...}) en lugar de concatenación con + porque se lee más limpio y maneja tipos de manera más predecible. Nada de esto es requerido para hacer que la línea se ejecute, lo que es exactamente el punto: JavaScript aceptará la versión suelta felizmente, así que la calidad de tu código viene de decisiones que el lenguaje no fuerza. Este manual pasa mucho tiempo en esas decisiones, comenzando con variables después.

JunoTu primer vistazo a JavaScript Un programa es en su mayoría esto: almacena algunos valores, combínalos, y haz algo con el resultado. console.log imprime un valor para que puedas verlo, y es tu mejor amigo mientras aprendes. No te preocupes por los detalles aún, conocerás cada parte apropiadamente en los próximos capítulos.

JunoTu primer vistazo a JavaScript La mayoría de JavaScript son tres cosas apiladas: variables que contienen valores, expresiones que los combinan, y sentencias que actúan sobre el resultado. Reconocer esos tres en cualquier fragmento hace que el código desconocido sea mucho menos intimidante. Mantén console.log cerca, es cómo compruebas qué está haciendo realmente tu código.

JunoTu primer vistazo a JavaScript El lenguaje ejecuta la versión suelta y la versión cuidadosa por igual, así que la calidad viene de opciones que nunca fuerza: const sobre let cuando un enlace es fijo, literales de plantilla sobre + para legibilidad. Esa libertad es la bendición y la trampa de JavaScript. Los próximos capítulos tratan en gran medida sobre hacer esas llamadas bien, comenzando con variables.

Qué significa "JavaScript moderno"

Escucharás a la gente hablar sobre JavaScript moderno. JavaScript ha existido desde 1995 y obtiene características nuevas cada año, pero el código antiguo sigue funcionando, así que el lenguaje ha acumulado algunos modos diferentes de hacer lo mismo a lo largo de los años.

Las buenas noticias: no necesitas la historia. Este manual enseña el forma actual, recomendada de escribir cada cosa. Si ves tutoriales más antiguos usando var para hacer variables, ese es el estilo antiguo; en su lugar aprenderás let y const, que son lo que los desarrolladores usan hoy.

"JavaScript moderno" generalmente significa el lenguaje tal como ha sido desde una gran actualización de 2015 (llamada ES2015, o ES6) y las adiciones anuales desde entonces. Esa actualización añadió let y const, funciones flecha, literales de plantilla, y más, y es la línea base que todo navegador actual soporta.

Importa porque te encontrarás con dos eras de código. El material más antiguo usa var, expresiones function en todas partes, y concatenación de cadenas; el código actual usa const/let, funciones flecha, y literales de plantilla. Este manual enseña el estilo moderno en todo y nombra las formas más antiguas solo para que las reconozcas en la naturaleza. No necesitarás herramientas de compilación o configuración para usar cualquiera de esto; se ejecuta en el navegador tal cual.

JavaScript se estandariza como ECMAScript, y desde ES2015 la especificación se envía anualmente (ES2016, ES2017, y así sucesivamente), cada una añadiendo un pequeño conjunto de características compatible hacia atrás. "JavaScript moderno" es una abreviatura para escribir contra ese lenguaje evolucionado, const/let, funciones flecha, literales de plantilla, desestructuración, módulos, async/await, en lugar de los idiomas pre-2015.

La razón por la que esto se mantiene simple en la práctica es el compromiso casi absoluto de JavaScript con compatibilidad hacia atrás: se añade sintaxis nueva, la sintaxis antigua casi nunca se rompe, así que un script de una década de antigüedad aún se ejecuta. Por eso puedes aprender solo las formas modernas y tratar var y su era de forma segura como conocimiento de solo lectura para mantener código antiguo. El único lugar donde el pasado se inmiscuye es cuando lees la base de código antiguo de otra persona, y este manual marca esas formas más antiguas a medida que surgen para que no te causen tropiezos. El próximo capítulo, variables, comienza exactamente ahí, con la forma moderna de nombrar y almacenar valores.

JunoQué significa JavaScript moderno JavaScript es viejo y mantiene su código antiguo funcionando, así que hay algunos modos de hacer algunas cosas. No necesitas la historia: este manual enseña la forma actual, recomendada cada vez. Si un tutorial usa var, ese es el estilo antiguo, y en su lugar aprenderás let y const.

JunoQué significa JavaScript moderno JavaScript moderno significa el lenguaje desde la actualización de 2015: const y let, funciones flecha, literales de plantilla. Te encontrarás con código antiguo que usa var y concatenación, así que este manual enseña el estilo moderno y nombra las formas antiguas solo para que las reconozcas. Todo se ejecuta en el navegador sin pasos de compilación.

JunoQué significa JavaScript moderno ECMAScript se envía anualmente y permanece compatible hacia atrás, así que se añade sintaxis nueva y la sintaxis antigua casi nunca se rompe. Por eso puedes aprender solo las formas modernas y tratar var y su era como conocimiento de solo lectura para bases de código antiguas. Escribe contra el lenguaje evolucionado y deja que el manual marque las formas heredadas a medida que aparecen.

Por dónde va JavaScript desde aquí

JavaScript es un lenguaje grande, pero comienza pequeño: valores, nombres para ellos, y formas de combinarlos y actuar sobre ellos. Una vez que eso haga clic, el resto de este manual se construye hacia afuera: tomar decisiones y repetir trabajo, organizar código en funciones, mantener colecciones en arrays y objetos, y luego llegar a la página misma con el DOM para construir cosas que la gente pueda realmente usar.

El próximo capítulo, variables, es donde comienza el trabajo real: cómo almacenar un valor, la diferencia entre let y const, y el pequeño conjunto de reglas sobre las que está construido todo el resto del lenguaje.