Scripts HTML
En HTML, un script es un pequeño programa integrado que puede añadir interactividad a tu sitio web. Aprende cómo añadir scripts y activarlos con W3Docs.
Un script es un pequeño fragmento de código integrado en las páginas web para hacerlas dinámicas e interactivas. Por ejemplo, con scripts puedes crear un mensaje emergente, un menú desplegable o validar un formulario antes de enviarlo. JavaScript es el lenguaje de scripting más utilizado en los sitios web.
Esta página explica cómo añadir JavaScript a un documento HTML, dónde colocar el elemento <script>, cómo controlar cuándo se ejecuta con defer y async, y cómo proporcionar un contenido alternativo para usuarios sin JavaScript. Para la lista completa de atributos de <script>, consulta la referencia de la etiqueta <script>.
Cómo añadir scripts
El elemento <script> puede contener código en línea o referenciar un archivo externo. Hay dos formas de usarlo:
1. Script en línea — escribe el código directamente entre las etiquetas de apertura y cierre:
<script>
document.body.style.backgroundColor = "lightyellow";
</script>2. Script externo — apunta el atributo src a un archivo .js. El elemento debe estar vacío (sin código entre las etiquetas):
<script src="scripts.js"></script>Si necesitas el mismo código en muchas páginas web, ponlo en un archivo .js separado y referéncialo con src. Los archivos externos son almacenados en caché por el navegador, mantienen el HTML limpio y permiten reutilizar un script en todo el sitio.
Los scripts suelen colocarse en <head> o justo antes de la etiqueta de cierre </body>, pero un <script> puede aparecer en cualquier parte del documento. La ubicación importa debido a cómo el navegador analiza la página — consulta Dónde colocar un script más abajo.
Ejemplo de manipulación del DOM en línea
Un script en línea puede leer y modificar la página usando el DOM. El ejemplo siguiente busca un párrafo por su id y reescribe su texto cuando se ejecuta el script:
Script en línea — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Inline script example</title>
</head>
<body>
<p id="message">Original text.</p>
<script>
document.getElementById("message").textContent = "Changed by JavaScript!";
</script>
</body>
</html>Como el <script> viene después del <p>, el elemento ya existe en el DOM cuando se ejecuta el script, por lo que getElementById lo encuentra. Si el script se ejecutara antes que el elemento, obtendría null.
Nota: En HTML5, el atributo type es opcional (por defecto es text/javascript) y se considera obsoleto para los scripts JavaScript.
defer vs async
Cuando un script está en el <head>, el navegador normalmente detiene el análisis del HTML, descarga el script, lo ejecuta y solo entonces continúa. Con scripts grandes, esto bloquea el renderizado y hace que la página se sienta lenta. Los atributos defer y async (que solo se aplican a scripts externos con src) solucionan esto descargando el script en paralelo con el análisis del HTML; la diferencia está en cuándo se ejecuta el script.
| Atributo | Descarga | Momento de ejecución | ¿Mantiene el orden de fuente? |
|---|---|---|---|
| (ninguno) | Bloquea el análisis durante la descarga | De inmediato, bloqueando el análisis | Sí |
defer | En paralelo con el análisis | Después de que el HTML esté completamente analizado, justo antes de DOMContentLoaded | Sí |
async | En paralelo con el análisis | En cuanto finaliza la descarga, pausando el análisis en ese momento | No — el que carga primero se ejecuta primero |
<head>
<!-- Runs in order, after the whole page is parsed -->
<script src="library.js" defer></script>
<script src="app.js" defer></script>
<!-- Runs as soon as it loads, order not guaranteed -->
<script src="analytics.js" async></script>
</head>Usa defer para scripts que dependen del DOM o entre sí (la mayor parte del código de la aplicación). Usa async para scripts independientes que no dependen de nada más, como analíticas o etiquetas de publicidad.
Dónde colocar un script
El lugar donde colocas un <script> determina si los elementos de la página existen cuando se ejecuta.
Un script colocado justo antes de la etiqueta de cierre </body> se ejecuta después de que todo el HTML anterior haya sido analizado, por lo que puede acceder de forma segura a cualquier elemento de la página:
<body>
<h1 id="title">Loading…</h1>
<!-- The <h1> already exists, so this works -->
<script>
document.getElementById("title").textContent = "Ready!";
</script>
</body>El mismo efecto se puede lograr colocando el script en el <head> con defer, ya que los scripts diferidos esperan hasta que el análisis esté completo:
<head>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="title">Loading…</h1>
</body>Un <script> simple en el <head> (sin defer) se ejecuta antes de que el cuerpo sea analizado, por lo que document.getElementById("title") devolvería null.
type="module"
Establece type="module" para cargar el script como un módulo JavaScript. Los módulos pueden usar import y export para compartir código entre archivos, se ejecutan en modo estricto automáticamente y están diferidos por defecto (se ejecutan después de que el HTML es analizado, incluso sin el atributo defer):
<script type="module">
import { greet } from "./utils.js";
greet("World");
</script>Cómo activar scripts
Puedes especificar si un script se ejecuta automáticamente (en cuanto carga la página) o después de que el usuario haya hecho algo (como pasar el cursor o hacer clic en un enlace). Si quieres que el script se ejecute cuando el usuario realiza alguna acción (llamada evento), debes usar controladores de eventos para indicarle al navegador qué evento es responsable de activar el script.
Los controladores de eventos pueden especificarse como atributos dentro de las etiquetas HTML, o adjuntarse mediante JavaScript usando métodos como addEventListener.
Ejemplo de la etiqueta HTML <script> con un controlador de eventos:
Ejemplo de controlador de eventos — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>El elemento <noscript>
Aunque muchos navegadores modernos admiten JavaScript, algunos navegadores más antiguos no pueden ejecutar código JavaScript, y los usuarios también pueden tener JavaScript desactivado en sus navegadores. Para proporcionar información alternativa a los navegadores sin JavaScript o con JavaScript desactivado, usa la etiqueta <noscript>. El contenido de esta etiqueta se muestra al usuario solo cuando JavaScript está desactivado o cuando el navegador no admite JavaScript.
Ejemplo de la etiqueta HTML <noscript>:
¡Mi primer ejemplo de JavaScript! — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="output"></p>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>If JavaScript is disabled or the browser doesn't support it, the content inside the noscript element is shown instead.</p>
</body>
</html>Aquí el <p id="output"> se declara antes del <script>, por lo que el párrafo ya existe en el DOM cuando el script se ejecuta y getElementById puede encontrarlo. Cuando JavaScript está habilitado, el usuario ve "My first JavaScript example!"; cuando está desactivado, el navegador ignora el script y muestra el mensaje de <noscript>.
Relacionado
- Etiqueta HTML
<script>— referencia completa de atributos (src,type,defer,asyncy más). - Etiqueta HTML
<noscript>— contenido alternativo para usuarios sin JavaScript. - Eventos JavaScript — responde a clics, movimientos del cursor y otras acciones del usuario.