La Etiqueta SCRIPT

Permite incrustar código JavaScript directamente en una página web o enlazar archivos externos de scripting.

La etiqueta <script> en HTML permite incrustar código JavaScript directamente en una página web o enlazar archivos externos de scripting. Es fundamental para agregar interactividad, manipular el DOM, cargar recursos dinámicos o integrar bibliotecas externas. A continuación, te explicamos cómo usarla correctamente.

Sintaxis básica

La etiqueta <script> puede incluir código directamente o enlazar un archivo externo mediante el atributo src.

a) Código interno

<script>
  // Código JavaScript aquí
  console.log("¡Hola, mundo!");
</script>

b) Archivo externo

<script src="ruta/al/archivo.js"></script>

Ubicación en el documento

a) En el `<head>`

Se ejecuta antes de renderizar el cuerpo de la página. Útil para cargar bibliotecas esenciales.

<!DOCTYPE html>
<html>
<head>
  <script src="jquery.js"></script>
</head>
<body>
  <!-- Contenido -->
</body>
</html>

b) Al final del `<body>`

Mejora el rendimiento, ya que el script se carga después del contenido. Ideal para código que depende del DOM.

<body>
  <!-- Contenido -->
  <script src="app.js"></script>
</body>

Atributos clave

Atributo	Descripción
`src`	Ruta al archivo externo de JavaScript.
`async`	Ejecuta el script de forma asíncrona (sin bloquear el renderizado).
`defer`	Retrasa la ejecución hasta que el documento esté completamente cargado.
`type`	Define el tipo MIME (por defecto es `text/javascript`).

Ejemplos:

<!-- Carga asíncrona (ideal para scripts independientes) -->
<script src="analytics.js" async></script>

<!-- Carga diferida (ejecuta después del DOM) -->
<script src="slider.js" defer></script>

<!-- Tipo MIME para módulos ES6 -->
<script type="module" src="modulo.js"></script>

Buenas prácticas

Separa el código: Usa archivos externos (.js) en lugar de código en línea para facilitar el mantenimiento.

Optimiza el rendimiento:

Usa async o defer para scripts no críticos.
Minimiza y comprime archivos JavaScript.

Evita scripts bloqueantes: Coloca los scripts al final del <body> a menos que sean esenciales para el renderizado.

Usa <noscript>: Proporciona contenido alternativo si JavaScript está deshabilitado.

<noscript>
  <p>Este sitio requiere JavaScript para funcionar correctamente.</p>
</noscript>

Ejemplos prácticos

a) Manipulación del DOM

<!DOCTYPE html>
<html>
<body>
  <button id="miBoton">Haz clic</button>
  <script>
    document.getElementById("miBoton").addEventListener("click", () => {
      alert("¡Botón presionado!");
    });
  </script>
</body>
</html>

b) Carga de bibliotecas externas

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

c) Módulos ES6

<script type="module">
  import { suma } from './math.js';
  console.log(suma(2, 3)); // 5
</script>

Seguridad

Evita scripts inseguros: No incluyas código de fuentes no confiables.

Usa Subresource Integrity (SRI): Verifica la integridad de scripts externos.

<script 
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl7/1L_dstPt3HV5HzF6Gk/e48M3Z2rfE7uRjNQz8"
  crossorigin="anonymous"
></script>

Compatibilidad

Navegadores modernos: Soportan async, defer y módulos ES6.

Navegadores antiguos: Usa type="text/javascript" y evita funciones no soportadas.

Conclusión

La etiqueta <script> es esencial para crear páginas web interactivas y dinámicas. Al seguir buenas prácticas de carga y organización, optimizarás el rendimiento y garantizarás una experiencia de usuario fluida. ¡Domina su uso para llevar tus proyectos al siguiente nivel!

Resumen rápido:

Usa src para archivos externos.
Prioriza defer o async para scripts no críticos.
Separa el código en archivos .js.
Incluye <noscript> para accesibilidad.

¡Ahora estás listo para integrar JavaScript en tus páginas HTML como un profesional!