El navegador como entorno de ejecución

1 // Motor y navegador: dos piezas distintas

Todo navegador lleva dentro un motor de JavaScript: V8 en Chrome y Edge, SpiderMonkey en Firefox, JavaScriptCore en Safari. El motor sabe ejecutar el lenguaje: variables, funciones, objetos, bucles. Nada más.

Todo lo que tiene que ver con la página lo pone el navegador, que expone al motor un conjunto de objetos llamados APIs web:

Esta separación explica algo que despista al principio: Node.js usa el mismo motor V8, así que el lenguaje es idéntico, pero no tiene document porque allí no hay ninguna página. Y al revés: en el navegador no puedes leer ficheros del disco como harías en Java, porque el navegador no expone esa capacidad a una web cualquiera.

2 // Dónde se escribe el código

JavaScript llega a la página con la etiqueta <script>. Puede ir el código dentro de la etiqueta, pero lo habitual es enlazar un fichero aparte:

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

// js/app.js
const titulo = document.querySelector('#titulo');
titulo.textContent = 'Hola desde JavaScript';
console.log('Script cargado');

No hay main, ni clase envolvente, ni compilación. El navegador ejecuta el fichero de arriba abajo en cuanto le toca, y las variables que declares a nivel superior quedan disponibles para el resto de la página.

3 // En qué momento se ejecuta

El navegador lee el HTML de principio a fin y va construyendo la página. Cuando encuentra un <script>, lo que haga depende de sus atributos:

• Sin atributos: el navegador detiene el análisis del HTML, descarga el script, lo ejecuta y sólo entonces continúa. Si el script está en el <head>, los elementos del <body> aún no existen.
• defer: descarga el script en paralelo sin detenerse y lo ejecuta cuando el HTML está completo, respetando el orden en que aparecen los scripts.
• async: descarga en paralelo, pero lo ejecuta en cuanto llega, interrumpiendo el análisis y sin orden garantizado. Tiene sentido para scripts independientes, como una analítica.
• type="module": se comporta como defer por defecto. Lo verás en detalle en la unidad de módulos.

4 // La consola: tu primera herramienta

Todos los navegadores traen herramientas de desarrollo (F12 o Ctrl+Mayús+I). La pestaña Consola hace dos cosas a la vez:

1. Muestra lo que tu código escribe con console.log() y los errores que se producen, con el fichero y la línea exactos.
2. Es un intérprete: puedes escribir JavaScript y se ejecuta sobre la página abierta, con acceso a sus variables y a document.

console.log('Un mensaje normal');
console.warn('Un aviso');
console.error('Un error');
console.table([{ nombre: 'Ana', nota: 8 }, { nombre: 'Luis', nota: 6 }]);

Hay una diferencia importante con Java: un error en tiempo de ejecución no tumba la página entera. Detiene el script en el que ocurre, y todo lo que venía después en ese script no se ejecuta, pero el HTML sigue ahí. Por eso una web «a medio funcionar» suele esconder un error en rojo en la consola.

5 // El modo estricto

JavaScript nació en 1995 con la idea de ser tolerante: si el código tenía un descuido, el navegador intentaba seguir adelante en lugar de protestar. Uno de esos descuidos es especialmente traicionero. Si asignas un valor a una variable que nunca has declarado, JavaScript no da error: crea en silencio una variable global.

function calcularTotal(precio) {
  let total = precio;
  totl = precio * 1.21;   // errata: querías escribir total
  return total;
}

calcularTotal(100);  // 100: el IVA se ha perdido sin ningún aviso
console.log(totl);   // 121: la errata ha creado una variable global

En Java esto no compilaría. Aquí funciona, y el problema aparece mucho después, cuando dos partes del programa usan sin saberlo la misma variable global.

Para cerrar esa puerta existe el modo estricto. Se activa escribiendo la cadena 'use strict' en la primera línea del fichero (o de una función), y convierte varios de esos descuidos silenciosos en errores:

'use strict';

function calcularTotal(precio) {
  let total = precio;
  totl = precio * 1.21;   // ReferenceError: totl is not defined
  return total;
}

Parece una cadena suelta que no hace nada, y es a propósito: un navegador antiguo que no conozca el modo estricto la ignora sin romper nada. Estos son los cambios que más vas a notar:

6 // Para practicar

Enlaza tu primer script y provoca a propósito los dos errores de esta unidad: un script que se ejecuta antes de tiempo y una variable sin declarar. Cada ejercicio trae el enunciado en los comentarios del código.