Scripts HTML
Un script es un pequeño fragmento de código incrustado en páginas web para hacerlas dinámicas e interactivas. Por ejemplo, con scripts puedes crear mensajes de cuadros emergentes, menús desplegables, etc. JavaScript es el lenguaje de scripting más común utilizado en sitios web. También puedes usar el elemento [`<script>`](/learn-html/html-script-tag.html) con otros lenguajes o tipos (p. ej., tipo module o tipo MIME text/javascript).
Cómo agregar scripts
El elemento [`<script>`](/learn-html/html-script-tag.html) se utiliza para incrustar un script o una referencia a un script ejecutable dentro de un documento HTML. Los scripts suelen colocarse en el [`<head>`](/learn-html/html-head-tag.html) o al final del elemento [`<body>`](/learn-html/html-body-tag.html). Para evitar bloquear la representación de la página, utiliza el atributo defer o async al colocar scripts en el encabezado. El atributo defer descarga el script en paralelo con el análisis de HTML y lo ejecuta después de que el análisis se complete, mientras que async descarga el script en paralelo y pausa el análisis de HTML solo cuando el script está listo para ejecutarse. Sin embargo, no hay restricciones y el script puede colocarse en cualquier parte del documento.
Si necesitas que los mismos scripts estén disponibles para muchas páginas web, deberías colocarlos en un archivo separado y luego llamarlos desde el documento HTML.
Puedes insertar el siguiente fragmento de código con la etiqueta [`<script>`](/learn-html/html-script-tag.html) en tu código HTML:
Scripts HTML
<script src="scripts.js"></script>Nota: En HTML5, el atributo type es opcional (por defecto text/javascript) y se considera obsoleto para scripts de JavaScript.
Cómo ejecutar scripts
Puedes especificar si un script debe ejecutarse automáticamente (en cuanto se carga la página) o después de que el usuario realice alguna acción (como pasar el cursor o hacer clic en un enlace). Si deseas que el script se ejecute cuando el usuario realice cualquier acción (llamada evento), deberás usar controladores de eventos para informar al navegador qué evento es responsable de activar el script.
Los controladores de eventos pueden especificarse como atributos dentro de etiquetas HTML o adjuntarse mediante JavaScript usando métodos como addEventListener.
Ejemplo de la etiqueta HTML [`<script>`](/learn-html/html-script-tag.html) 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>`](/learn-html/html-noscript-tag.html)
Aunque muchos navegadores modernos admiten JavaScript, algunos navegadores más antiguos no pueden ejecutar código de JavaScript y los usuarios también pueden tener JavaScript desactivado en sus navegadores. Para proporcionar información alternativa para navegadores sin JavaScript o con JavaScript desactivado, utiliza la etiqueta [`<noscript>`](/learn-html/html-noscript-tag.html). El contenido de esta etiqueta se muestra al usuario solo cuando JavaScript está desactivado o cuando el navegador no lo admite.
Ejemplo de la etiqueta HTML [`<noscript>`](/learn-html/html-noscript-tag.html):
¡Mi primer ejemplo de JavaScript! — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<p id="output"></p>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>In case JavaScript is disabled or the browser doesn't support it, the code will display the content inside the noscript element.</p>
</body>
</html>Resultado
Práctica
¿Dónde se puede colocar la etiqueta <script> en HTML?