Vincular archivo JavaScript a archivo HTML

Para vincular JavaScript a HTML, añade un elemento <script> a la página. Usa su atributo src para cargar un archivo .js independiente o escribe un script breve entre las etiquetas de apertura y cierre. Para la mayoría de los scripts que necesitan acceder al DOM de la página, coloca un script externo en <head> con defer; usa async para scripts independientes cuyo orden de ejecución no importe.

Vincular un archivo JavaScript externo con src

Crea un archivo JavaScript y haz referencia a él desde el documento HTML. Por ejemplo, si index.html y app.js están en el mismo directorio, esta página carga app.js:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External script example</title>
  <script src="./app.js" defer></script>
</head>
<body>
  <h1 id="message">Waiting for JavaScript</h1>
</body>
</html>

El valor ./app.js es una ruta URL que se resuelve con respecto a la URL del documento HTML, no a la ubicación del archivo JavaScript en tu equipo ni al directorio de trabajo del servidor. Si el archivo está en un subdirectorio js junto a la página, usa ./js/app.js. Respeta las mayúsculas, minúsculas y la ortografía: una ruta que funciona en un equipo de desarrollo que no distingue entre mayúsculas y minúsculas puede fallar en un servidor que sí las distingue. Una barra inicial, como en /js/app.js, comienza en la raíz de la URL del sitio.

El atributo defer permite que el navegador descargue el archivo mientras analiza el HTML y lo ejecuta cuando termina el análisis. Así, el encabezado está disponible cuando el script intenta buscarlo. Mantén el archivo separado cuando varias páginas lo compartan o cuando quieras mantener el HTML y JavaScript por separado.

Ejecuta este ejemplo:

console.log("JavaScript loaded");

Este pequeño ejemplo de JavaScript ilustra por sí solo cómo un script puede mostrar un mensaje en la consola del navegador. En el ejemplo de la página, app.js puede usar document.querySelector("#message") y, si el elemento existe, asignar "JavaScript is connected" a su propiedad textContent. Esa actualización protegida del DOM es una adaptación para la página; no se afirma que se haya obtenido ese resultado al ejecutar el código.

Añadir JavaScript directamente a una página HTML

Para un comportamiento breve que solo se usa en una página, escribe JavaScript directamente dentro de un elemento <script>. Coloca el elemento después del marcado que necesita, a menudo justo antes de </body>:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<body>
  <h1 id="message">Waiting for JavaScript</h1>
  <script>
    const message = document.querySelector("#message");
    if (message) {
      message.textContent = "Inline JavaScript is connected";
    }
  </script>
</body>

El navegador llega al script después de analizar el encabezado, por lo que puede encontrarlo al buscarlo. El código integrado resulta práctico para una acción pequeña y específica de una página; un archivo externo es más fácil de reutilizar, almacenar en caché y mantener a medida que crece el código. No uses document.write para las actualizaciones habituales de la página: después del análisis, puede reemplazar el documento. Usa métodos del DOM como textContent para cambiar un elemento de forma segura.

Elegir cuándo se ejecutan los scripts externos

Un script externo normal en <head> pausa el análisis del HTML mientras se descarga y ejecuta. Si busca inmediatamente un elemento del cuerpo, ese elemento todavía no se habrá analizado. Un script cerca del final de <body> se ejecuta después de que se haya analizado el marcado anterior, lo que puede ser adecuado para una página pequeña; aun así, el navegador pausa el análisis mientras carga y ejecuta el script.

Para los archivos que suelen depender del DOM, <script src="./app.js" defer></script> en <head> es una opción predeterminada clara. Los scripts externos con defer se descargan en paralelo al análisis y luego se ejecutan cuando este termina, en el orden en que aparecen en el documento. Si un archivo con defer depende de otro, incluye primero el archivo del que depende. defer se aplica a scripts externos; añadirlo a un script integrado no retrasa la ejecución de ese código.

Usa <script src="./analytics.js" async></script> cuando el archivo sea independiente, como un script de analítica autónomo. Se descarga en paralelo y se ejecuta tan pronto como está listo, lo que puede ocurrir antes de que termine el análisis. No hay un orden garantizado para los scripts con async, y pueden ejecutarse antes de que existan los elementos de la página. Por eso, no uses este método con scripts que dependan unos de otros o del DOM ya analizado. Tanto async como defer se usan con scripts externos; en los navegadores modernos, si se incluyen ambos, prevalece el comportamiento de async.

Comprobar la ruta del script y el comportamiento de la página

Si no ocurre nada, comprueba primero el valor exacto de src y dónde se sirve la página HTML. Abre las herramientas para desarrolladores del navegador y revisa la solicitud del script en el panel Network: una respuesta de recurso no encontrado suele indicar una ruta, un nombre de archivo o unas mayúsculas y minúsculas incorrectos. El panel Console muestra errores de sintaxis y de ejecución de JavaScript. Después de corregir el problema, vuelve a cargar la página para ver la solicitud y los mensajes actuales.

Si la solicitud se completa correctamente, pero la página no cambia, comprueba que el script busque el ID de elemento correcto y que se ejecute cuando ya exista el marcado pertinente. Añade defer a un script externo que dependa del DOM y esté en el encabezado, o coloca un script integrado breve debajo del elemento. Si varios scripts interactúan, es preferible usar archivos con defer en el orden de sus dependencias en lugar de cargarlos con async. Que la descarga se complete solo confirma que el navegador encontró el archivo; no confirma que el script se ejecutara sin errores.

Preguntas frecuentes

¿Dónde debo colocar el enlace a un archivo JavaScript? Para un script externo típico que usa el DOM de la página, colócalo en <head> con defer. Un script al final del cuerpo también puede acceder al marcado anterior, mientras que un script normal en el encabezado se ejecuta antes de que se analice el cuerpo.

¿Qué hace defer? Descarga un script externo sin pausar el análisis del HTML y lo ejecuta después de que termine el análisis, en el orden en que aparecen los scripts con defer.

¿Puede una página enlazar varios archivos JavaScript? Sí. Añade un elemento <script src="..." defer></script> por cada archivo. Los archivos con defer se ejecutan en el orden del documento, así que coloca las dependencias compartidas antes que los archivos que las usan.

¿Cuál es la diferencia entre async y defer? Ambos permiten descargar archivos en paralelo. defer espera a que termine el análisis y conserva el orden del documento; async ejecuta cada archivo en cuanto está listo y no conserva ese orden.

¿Necesito type="text/javascript"? No. En HTML5, JavaScript es el tipo predeterminado para un elemento script, así que type no es necesario para JavaScript normal.