Puedes utilizar <script> para indicar el uso de scripts en tus do­cu­me­n­tos HTML. Además de la in­te­gra­ción directa de código Ja­va­S­cri­pt, también es posible in­tro­du­cir scripts externos. También existen varios atributos op­cio­na­les, como async o defer, que regulan el manejo de los scripts uti­li­za­dos.

¿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 do­cu­me­n­tos HTML. Dentro de la etiqueta <script> de in­tro­du­c­ción y cierre, puedes dar in­s­tru­c­cio­nes directas de script o hacer re­fe­re­n­cia a un archivo de script externo mediante el atributo src. Desde HTML5, Ja­va­S­cri­pt se define como un posible lenguaje de scripting para este elemento (en versiones an­te­rio­res de HTML, se requería una es­pe­ci­fi­ca­ción adicional del lenguaje de scripting).

Los usos típicos de HTML <script> o de Ja­va­S­cri­pt en general son la va­li­da­ción de fo­r­mu­la­rios, la ma­ni­pu­la­ción de imágenes y los cambios dinámicos del contenido de una página web.

Hosting
Hosting de primera al mejor precio
  • 3x más rápido, ahora un 60 % de ahorro
  • Alta di­s­po­ni­bi­li­dad >99.99 %
  • Solo en IONOS: hasta 500 GB incluidos

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

La sintaxis de los elementos <script> es re­la­ti­va­me­n­te sencilla: una etiqueta <script> de in­tro­du­c­ción marca el inicio y una etiqueta </script> de cierre marca el final del script. Por tanto, la es­tru­c­tu­ra si­n­tá­c­ti­ca básica es la siguiente:

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

Si escribes el código Ja­va­S­cri­pt di­re­c­ta­me­n­te en el elemento, no necesitas más pa­rá­me­tros. Para una re­fe­re­n­cia 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 in­te­gra­ción directa de Ja­va­S­cri­pt

Ilu­s­tra­mos la sintaxis y fu­n­cio­na­li­dad de la in­te­gra­ción directa de Ja­va­S­cri­pt 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. Di­re­c­ta­me­n­te después, se integra el código Ja­va­S­cri­pt, 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 aco­n­se­ja­ble incluir un texto al­te­r­na­ti­vo que se presente en el lugar del script si este no puede eje­cu­tar­se (por ejemplo, porque un usuario tiene Ja­va­S­cri­pt des­ac­ti­va­do Para ello, basta con utilizar el elemento <noscript> (etiqueta de in­tro­du­c­ción y cierre).

Ejemplo de in­te­gra­ción de un script externo

Tra­s­la­da­mos el ejemplo a la opción de integrar el código Ja­va­S­cri­pt 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'); 
    }); 
});
ja­va­s­cri­pt

En el segundo paso, in­te­gra­mos el script en un documento HTML que se encuentra en el mismo di­re­c­to­rio 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 di­s­po­ni­bles para HTML <script>?

La etiqueta HTML <script> puede co­m­bi­nar­se con una serie de atributos. Los más im­po­r­ta­n­tes son los si­guie­n­tes:

  • async: con este atributo, te aseguras de que un script externo se descarga y ejecuta en paralelo a la in­te­r­pre­ta­ción del código de la página tan pronto como esté di­s­po­ni­ble (incluso si la página aún no está co­m­ple­ta­me­n­te cargada).
  • crossorigin: si deseas es­ta­ble­cer el modo de petición del script para pe­ti­cio­nes HTTP CORS, utiliza el atributo crossorigin.
  • defer: si se establece el atributo defer, también se descarga un script externo en paralelo a la in­te­r­pre­ta­ción del código de la página. Sin embargo, solo se ejecuta cuando la página se ha in­te­r­pre­ta­do co­m­ple­ta­me­n­te.
  • integrity: para aumentar la seguridad, puedes añadir el atributo integrity a <script>. Este garantiza que los na­ve­ga­do­res puedan comprobar el script re­cu­pe­ra­do. Esto asegura que el código nunca se cargue si el código fuente ha sido ma­ni­pu­la­do.
  • nomodule: con nomodule te aseguras de que tus scripts no se ejecuten en na­ve­ga­do­res que soporten módulos ES2015.
  • referrerpolicy: si deseas es­pe­ci­fi­car qué in­fo­r­ma­ción de re­fe­re­n­cia 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 es­pe­ci­fi­ca la URL de un script externo.
  • type: con este atributo (ahora opcional), puedes es­pe­ci­fi­car qué contiene el elemento HTML <script>. Además del script clásico, también son posibles los módulos EC­MA­S­cri­pt (module) y los mapas de im­po­r­ta­ción (importmap) con reglas para las im­po­r­ta­cio­nes de módulos EC­MA­S­cri­pt, por ejemplo.
Dominios web
Compra y registra tu dominio ideal
  • Tu dominio protegido con Ce­r­ti­fi­ca­do SSL Wildcard gratis
  • Función Domain Connect para una co­n­fi­gu­ra­ción DNS si­m­pli­fi­ca­da gratis
  • Registro privado y gratis para mayor seguridad
Ir al menú principal