<script> en HTML5El elemento <script> es una etiqueta de HTML5 que se utiliza para incorporar o hacer referencia a scripts dentro de un documento HTML. Estos scripts generalmente son escritos en JavaScript y se utilizan para añadir interactividad, validar formularios, manejar eventos y más. La etiqueta <script> puede ubicarse en el <head> o el <body> del documento. A continuación se detallan todos los atributos y propiedades que puede tener la etiqueta <script>:
src: Este atributo especifica la URL del archivo de script externo. Si se utiliza este atributo, el contenido del script debe estar vacío.
<script src="script.js"></script>type: Define el tipo MIME del script. Aunque el valor por defecto es "text/javascript" y no es necesario especificarlo en la mayoría de los casos, puede ser útil para scripts con tipos MIME diferentes.
<script type="application/javascript"></script>async: Este atributo booleano indica que el script debe ejecutarse de manera asíncrona con respecto a la página web. Esto significa que el script puede descargarse y ejecutarse mientras la página sigue procesándose.
<script src="script.js" async></script>defer: También un atributo booleano, defer indica que el script debe ejecutarse después de que la página haya terminado de analizarse. Este atributo sólo se puede usar si el atributo src también está presente.
<script src="script.js" defer></script>crossorigin: Este atributo se utiliza para gestionar la política de CORS (Cross-Origin Resource Sharing) al cargar scripts desde dominios externos. Puede tener valores como anonymous o use-credentials.
<script src="script.js" crossorigin="anonymous"></script>integrity: Define un hash criptográfico que asegura que el archivo no ha sido modificado sin permiso. Esto es útil para protegerse contra ataques de manipulación.
<script src="script.js" integrity="sha384-..."></script>nomodule: Indica que el script no debe ejecutarse en navegadores que soportan módulos ES2015 (JavaScript moderno). Este atributo es útil para proporcionar un script de respaldo para navegadores más antiguos.
<script src="script.js" nomodule></script>referrerpolicy: Este atributo controla la política de referer enviada en las solicitudes al cargar scripts. Puede tener valores como no-referrer, no-referrer-when-downgrade, strict-origin, strict-origin-when-cross-origin, etc.
<script src="script.js" referrerpolicy="no-referrer"></script><script> en HTML5Ejemplo 1: Script Interno El siguiente ejemplo muestra cómo incluir un script directamente dentro de la página HTML.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Script Interno</title>
<script>
function mostrarMensaje() {
alert('Hola desde un script interno!');
}
</script>
</head>
<body>
<button onclick="mostrarMensaje()">Haz clic aquí</button>
</body>
</html>Ejemplo 2: Script Externo
A continuación se muestra cómo hacer referencia a un script externo usando el atributo src.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Script Externo</title>
<script src="script.js" defer></script>
</head>
<body>
<button onclick="mostrarMensaje()">Haz clic aquí</button>
</body>
</html>Y el contenido del archivo script.js sería:
function mostrarMensaje() {
alert('Hola desde un script externo!');
}Ejemplo 3: Uso de async y defer
En este ejemplo, se muestra cómo usar async y defer para cargar scripts de manera eficiente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Async y Defer</title>
<!-- Script asíncrono -->
<script src="async-script.js" async></script>
<!-- Script diferido -->
<script src="defer-script.js" defer></script>
</head>
<body>
<p>Ejemplo del uso de async y defer.</p>
</body>
</html>async-script.js y defer-script.js contienen scripts que se ejecutarán de acuerdo a sus respectivos atributos.
Estos ejemplos ilustran diferentes formas de utilizar el elemento <script> en HTML5 para añadir funcionalidad y dinamismo a las páginas web.