Elemento script en HTML

El elemento <script> en HTML se utiliza para insertar código JavaScript ejecutable en un documento HTML o para referenciar un archivo JavaScript externo.

Atributos Principales

`src`

Especifica la URL de un archivo JavaScript externo.

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

Antes se usaba para especificar el tipo de script (como text/javascript), pero actualmente es opcional ya que JavaScript es el lenguaje de scripting predeterminado en los navegadores modernos. Puede usarse para módulos:

<script type="module" src="modulo.js"></script>

`async` (booleano)

Indica que el script debe descargarse de forma asíncrona (sin bloquear el análisis del HTML) y ejecutarse tan pronto como esté disponible.

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

`defer` (booleano)

Indica que el script debe ejecutarse después de que el documento haya sido analizado, pero antes de disparar el evento DOMContentLoaded.

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

`crossorigin`

Configura las solicitudes CORS para el script.

<script src="https://ejemplo.com/script.js" crossorigin="anonymous"></script>

`integrity`

Permite verificar la integridad del script mediante un hash criptográfico.

<script src="script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"></script>

Ubicación del Elemento `<script>`

En el `<head>`

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo</title>
    <script>
        function saludar() {
            alert('Hola desde el head!');
        }
    </script>
</head>
<body>
    <button onclick="saludar()">Saludar</button>
</body>
</html>

Al final del `<body>` (recomendado para mejor rendimiento)

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo</title>
</head>
<body>
    <button id="btnSaludar">Saludar</button>
    
    <script>
        document.getElementById('btnSaludar').addEventListener('click', function() {
            alert('Hola desde el final del body!');
        });
    </script>
</body>
</html>

Ejemplos Prácticos

1. Script en línea

<script>
    // Código JavaScript directamente en el HTML
    console.log('Este script se ejecuta inmediatamente');
    document.addEventListener('DOMContentLoaded', function() {
        console.log('El DOM está completamente cargado');
    });
</script>

2. Script externo

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

3. Módulo JavaScript

<script type="module">
    import { funcionDesdeModulo } from './modulo.js';
    funcionDesdeModulo();
</script>

4. Script con async

<script src="analytics.js" async></script>

5. Script con defer

<script src="juego.js" defer></script>

6. Script con integridad verificada

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>

Buenas Prácticas

Ubicación: Colocar los scripts antes del cierre de </body> mejora el rendimiento de carga.
Minimizar scripts en línea: Es mejor usar archivos externos para facilitar el mantenimiento y el caching.
Usar defer o async cuando sea posible para scripts no críticos.
Orden de ejecución: Los scripts con defer se ejecutan en orden, los con async se ejecutan cuando están listos.
Soporte para navegadores antiguos: Si necesitas soporte para navegadores muy antiguos, puedes usar:
```
<script>
    document.createElement('script');
</script>
```

Compatibilidad

El elemento <script> es compatible con todos los navegadores modernos. Los atributos async y defer son compatibles con IE10+, mientras que los módulos JavaScript (type="module") son compatibles con las versiones más recientes de los navegadores principales.

Ejemplo Completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo Completo de Script</title>
    <!-- Script crítico que debe cargarse pronto -->
    <script src="https://cdn.example.com/library.js" crossorigin="anonymous"></script>
</head>
<body>
    <h1>Ejemplo de Scripts</h1>
    <button id="btnAccion">Haz clic</button>
    
    <!-- Scripts no críticos al final del body -->
    <script src="app.js" defer></script>
    <script>
        // Código en línea que interactúa con el DOM
        document.getElementById('btnAccion').addEventListener('click', function() {
            alert('Botón clickeado!');
        });
    </script>
</body>
</html>

El elemento <script> es esencial para hacer que las páginas web sean dinámicas e interactivas, y entender sus atributos y comportamientos es fundamental para el desarrollo web moderno.

Elemento meta en HTML

El elemento meta se usa para indicar metadatos dentro del do...

Elemento noscript HTML

El elemento <noscript> define una sección de HTML que solo s...

Referencias

W3Schools. HTML <script> Tag. https://www.w3schools.com/tags/tag_script.asp

MDN Developers. <noscript> The Noscript element. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noscript

Elemento script en HTML