Tema 23 · Tecnologías Web

Integración con JavaScript (<script>)

Aprende cómo HTML5 se comunica con JavaScript: inclusión de scripts, optimización con async y defer, la etiqueta <noscript> y manipulación básica del DOM.

Iframes e Incrustación de Medios Entidades, Símbolos y Emojis

HTML y JavaScript: Estructura e Interactividad

Mientras que HTML aporta la estructura y el contenido, JavaScript (JS) es el lenguaje de programación que dota a las páginas web de interactividad dinámica, validación en vivo, animaciones complejas y comunicación con servidores sin recargar la pantalla. 

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

¿Dónde colocar los Scripts?: defer vs async

Por defecto, cuando el navegador encuentra una etiqueta <script>, pausa la lectura del HTML hasta descargar y ejecutar el archivo JS. Para evitar que la página se quede congelada en blanco, HTML5 ofrece dos atributos modernos:

Atributo Descarga Momento de Ejecución Uso Recomendado
defer En segundo plano (asíncrona). Se ejecuta en orden exacto una vez que todo el HTML ha terminado de analizarse. El estándar recomendado para la lógica de tu aplicación, librerías y componentes dependientes.
async En segundo plano (asíncrona). Se ejecuta inmediatamente apenas se descarga, sin importar el orden ni el estado del DOM. Scripts independientes que no tocan el DOM ni dependen de otros (ej: Google Analytics, píxeles de seguimiento).

El Elemento de Respaldo: <noscript>

El elemento <noscript> define contenido alternativo que solo se mostrará si el usuario tiene JavaScript deshabilitado en su navegador o si navega desde un entorno restringido: 

<noscript>
  <div class="alerta">Esta aplicación requiere JavaScript habilitado para funcionar correctamente.</div>
</noscript>

⚡ Manipulación Dinámica del DOM con JavaScript

Haz clic en los botones para modificar dinámicamente el texto y el color de un elemento HTML mediante JavaScript:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>HTML y JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-interactiva { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 10px; padding: 24px; }
    .caja-mensaje {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      padding: 16px;
      margin: 15px 0;
      font-size: 1.1rem;
      color: #1e3a8a;
      transition: all 0.3s ease;
    }
    .btn-accion {
      background: #0284c7;
      color: white;
      border: none;
      padding: 8px 14px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      margin-right: 8px;
    }
    .btn-accion:hover { background: #0369a1; }
  </style>
</head>
<body>

  <div class="card-interactiva">
    <h3 style="margin-top: 0; color: #0f172a;">Control del DOM en Tiempo Real</h3>

    <div id="caja-estado" class="caja-mensaje">
      Estado actual: Esperando interacción...
    </div>

    <button class="btn-accion" onclick="actualizarTexto()">
      Cambiar Texto
    </button>
    <button class="btn-accion" onclick="cambiarColor()" style="background: #10b981;">
      Cambiar Color
    </button>
    <button class="btn-accion" onclick="resetear()" style="background: #64748b;">
      Restablecer
    </button>

    <!-- Script integrado que manipula los elementos HTML -->
    <script>
      function actualizarTexto() {
        const elemento = document.getElementById('caja-estado');
        elemento.innerText = '⚡ ¡Texto modificado exitosamente por JavaScript!';
      }

      function cambiarColor() {
        const elemento = document.getElementById('caja-estado');
        elemento.style.background = '#dcfce7';
        elemento.style.borderColor = '#86efac';
        elemento.style.color = '#15803d';
      }

      function resetear() {
        const elemento = document.getElementById('caja-estado');
        elemento.innerText = 'Estado actual: Esperando interacción...';
        elemento.style.background = '#eff6ff';
        elemento.style.borderColor = '#bfdbfe';
        elemento.style.color = '#1e3a8a';
      }
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.