Curso HTML 14. Integración de HTML con JavaScript (nivel básico)

1.1 Atributos async y defer

Estos atributos controlan la carga y ejecución de scripts externos:

2. Scripts en línea (inline)

Se escribe JavaScript directamente dentro de la página:

  <button onclick='alert('¡Hola, mundo!');'>Saludar</button>
  

El atributo onclick establece un manejador de evento que ejecuta código JS
en el momento del clic. Aunque es efectivo, mezcla contenido y comportamiento.

3. Scripts externos

Es recomendable separar el código JS en archivos .js para mantener el HTML limpio:

  <!-- En index.html -->
  <script src='scripts/app.js' defer></script>

  <!-- En scripts/app.js -->
  // script externo: más organizado y reutilizable
  console.log('JavaScript cargado desde un archivo externo');
  

4. Manipulación del DOM

El DOM (Document Object Model) representa la estructura de la página. Puedes acceder y modificar
elementos usando métodos como getElementById, querySelector, etc.

4.1 Acceso y modificación de contenido

  <p id='mensaje'>Texto original.</p>

  <script>
    // Obtiene el elemento por su ID
    var parrafo = document.getElementById('mensaje');
    // Cambia su contenido
    parrafo.textContent = 'Texto modificado con JavaScript';
  </script>
  

4.2 Cambiar atributos y estilos

  <img id='foto' src='img/vieja.jpg' alt='antigua'>

  <script>
    var imagen = document.querySelector('#foto');
    // Cambiar fuente de la imagen
    imagen.src = 'img/nueva.jpg';
    // Añadir borde mediante estilo inline
    imagen.style.border = '2px solid #f00';
  </script>
  

5. Manejo de eventos con addEventListener

Evita usar atributos onclick en el HTML y emplea addEventListener
para suscribir funciones a eventos de manera más limpia y flexible.

  <button id='miBoton'>Haz clic aquí</button>

  <script>
    var boton = document.getElementById('miBoton');

    // Suscribir una función al evento 'click'
    boton.addEventListener('click', function(evento) {
      alert('¡Has hecho clic en el botón!');
    });
  </script>
  

6. Ejemplos prácticos

6.1 Mostrar y ocultar un elemento

  <div id='contenido'>
    <p>Este contenido se puede ocultar o mostrar.</p>
  </div>

  <button id='toggle'>Ocultar/Mostrar contenido</button>

  <script>
    var contenido = document.getElementById('contenido');
    var btnToggle = document.getElementById('toggle');

    btnToggle.addEventListener('click', function() {
      // alterna la visibilidad
      if (contenido.style.display === 'none') {
        contenido.style.display = 'block';
      } else {
        contenido.style.display = 'none';
      }
    });
  </script>
  

6.2 Validación básica de formulario

  <form id='miForm'>
    <label for='email'>Correo:</label>
    <input type='email' id='email' required>
    <button type='submit'>Enviar</button>
    <p id='error' style='color:red;'></p>
  </form>

  <script>
    var form = document.getElementById('miForm');
    var inputEmail = document.getElementById('email');
    var errorMsg = document.getElementById('error');

    form.addEventListener('submit', function(e) {
      if (inputEmail.value.trim() === '') {
        e.preventDefault(); // evita envío
        errorMsg.textContent = 'El campo de email no puede estar vacío.';
      }
    });
  </script>
  

7. Buenas prácticas básicas

• Separa contenido (HTML), presentación (CSS) y comportamiento (JavaScript).
• Usa defer o coloca scripts al final de <body> para evitar bloqueos.
• Prefiere addEventListener sobre atributos inline (onclick).
• Valida la existencia de elementos antes de manipularlos para prevenir errores.
• Comenta tu código y nómbralo de manera descriptiva.

Con estos conceptos básicos ya puedes comenzar a enriquecer tus páginas HTML
con interactividad y lógica sencilla usando JavaScript.