Puedes utilizar <script> para indicar el uso de scripts en tus documentos HTML. Además de la integración directa de código JavaScript, también es posible introducir scripts externos. También existen varios atributos opcionales, como async o defer, que regulan el manejo de los scripts utilizados.

¿Qué es HTML <script> y para qué se utiliza?

La etiqueta HTML <script> se utiliza para integrar scripts del lado del cliente en páginas web o documentos HTML. Dentro de la etiqueta <script> de introducción y cierre, puedes dar instrucciones directas de script o hacer referencia a un archivo de script externo mediante el atributo src. Desde HTML5, JavaScript se define como un posible lenguaje de scripting para este elemento (en versiones anteriores de HTML, se requería una especificación adicional del lenguaje de scripting).

Los usos típicos de HTML <script> o de JavaScript en general son la validación de formularios, la manipulación de imágenes y los cambios dinámicos del contenido de una página web.

Web Hosting
El hosting que crece con tu proyecto
  • Tiempo de actividad de 99.99 % y seguridad garantizada
  • Aumenta el rendimiento según el tráfico de tu página web
  • Incluye dominio, SSL, e-mail y soporte 24/7

Etiqueta HTML <script>: sintaxis y ejemplo de código

La sintaxis de los elementos <script> es relativamente sencilla: una etiqueta <script> de introducción marca el inicio y una etiqueta </script> de cierre marca el final del script. Por tanto, la estructura sintáctica básica es la siguiente:

<script>Código JavaScript o referencia a un script externo</script>
html

Si escribes el código JavaScript directamente en el elemento, no necesitas más parámetros. Para una referencia a un script externo, también necesitas el atributo HTML src (del inglés source, fuente). La sintaxis extendida para HTML <script> tendrá entonces la siguiente forma:

<script src="script.js"></script>
html

Ejemplo de integración directa de JavaScript

Ilustramos la sintaxis y funcionalidad de la integración directa de JavaScript a través de la etiqueta HTML <script> mediante un sencillo ejemplo. Dentro del área <body>, colocamos un botón con el <button id> “myButton” para este propósito. Directamente después, se integra el código JavaScript, que asegura que se muestre un cuadro de mensaje con el mensaje “Botón pulsado” tan pronto como un usuario presione el botón:

<body> 
    <h1>Botón JavaScript de ejemplo: integración directa</h1> 
    <button id="myButton">¡Haz clic!</button> 
 
    <script> 
        document.getElementById('myButton').addEventListener('click', function() { 
            alert('Botón pulsado'); 
        }); 
    </script> 
</body>
html
Consejo

Es aconsejable incluir un texto alternativo que se presente en el lugar del script si este no puede ejecutarse (por ejemplo, porque un usuario tiene JavaScript desactivado Para ello, basta con utilizar el elemento <noscript> (etiqueta de introducción y cierre).

Ejemplo de integración de un script externo

Trasladamos el ejemplo a la opción de integrar el código JavaScript con un script externo. En el primer paso, guardamos el código del botón clicable, que muestra el mensaje “Botón pulsado” tras un clic, en un nuevo archivo con el nombre de ejemplo script.js:

// script.js 
document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById('myButton').addEventListener('click', function() { 
        alert('Botón pulsado'); 
    }); 
});
javascript

En el segundo paso, integramos el script en un documento HTML que se encuentra en el mismo directorio que el script:

<body> 
    <h1>Botón JavaScript de ejemplo: integración mediante enlace</h1> 
    <button id="myButton">¡Haz clic!</button> 
 
    <script src="script.js"></script> 
</body> 
</html>
html

¿Qué atributos están disponibles para HTML <script>?

La etiqueta HTML <script> puede combinarse con una serie de atributos. Los más importantes son los siguientes:

  • async: con este atributo, te aseguras de que un script externo se descarga y ejecuta en paralelo a la interpretación del código de la página tan pronto como esté disponible (incluso si la página aún no está completamente cargada).
  • crossorigin: si deseas establecer el modo de petición del script para peticiones HTTP CORS, utiliza el atributo crossorigin.
  • defer: si se establece el atributo defer, también se descarga un script externo en paralelo a la interpretación del código de la página. Sin embargo, solo se ejecuta cuando la página se ha interpretado completamente.
  • integrity: para aumentar la seguridad, puedes añadir el atributo integrity a <script>. Este garantiza que los navegadores puedan comprobar el script recuperado. Esto asegura que el código nunca se cargue si el código fuente ha sido manipulado.
  • nomodule: con nomodule te aseguras de que tus scripts no se ejecuten en navegadores que soporten módulos ES2015.
  • referrerpolicy: si deseas especificar qué información de referencia debe enviarse cuando se llama a un script, utiliza el atributo referrerpolicy. Los valores posibles incluyen no-referrer (no referrer page) y strict-origin (referrer always origin domain).
  • src: el atributo src especifica la URL de un script externo.
  • type: con este atributo (ahora opcional), puedes especificar qué contiene el elemento HTML <script>. Además del script clásico, también son posibles los módulos ECMAScript (module) y los mapas de importación (importmap) con reglas para las importaciones de módulos ECMAScript, por ejemplo.
Compra y registra tu dominio ideal
  • Certificado SSL Wildcard gratis
  • Registro privado
  • Función Domain Connect para una configuración DNS simplificada gratis
¿Le ha resultado útil este artículo?
Ir al menú principal