NUEVAS FUNCIONALIDADES DE JAVASCRIPT

• IntersectionObserver: Detecta cuando un elemento entra o sale de la pantalla (ideal para lazy loading, animaciones, etc.):
  
  

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
   entry.target.classList.add('visible');
   // observer.unobserve(entry.target); // opcional
      }
    });
  });
  
  observer.observe(document.querySelector('.mi-elemento'));
  

• MutationObserver: Detecta cambios en el DOM (agregar, eliminar o modificar elementos):
  
  

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      console.log('El DOM cambió:', mutation.type);
    });
  });
  
  observer.observe(document.getElementById('contenedor'), {
    childList: true,
    subtree: true
  });
  

• history.pushState: Cambia la URL sin recargar la página (muy usado en SPAs):
  
  

  / Cambiar URL sin recargar
  history.pushState({ pagina: 2 }, 'Título', '/pagina-2');
  
  // Escuchar cambios en el historial
  window.addEventListener('popstate', (e) => {
    console.log('El usuario volvió atrás', e.state);
  });
  

• navigator.vibrate: Hace vibrar el móvil (genial para notificaciones o juegos):
  
  

  // Vibrar 200ms
  navigator.vibrate(200);
  
  // Patrón de vibración
  navigator.vibrate([100, 50, 100, 50, 200]);
  

• requestAnimationFrame: Crea animaciones mucho más fluidas y eficientes:
  
  

  let position = 0;
  
  function animar() {
    position += 2;
    document.getElementById('caja').style.transform = `translateX(${position}px)`;
    
    if (position < 500) {
      requestAnimationFrame(animar);
    }
  }
  requestAnimationFrame(animar);
  

• ResizeObserver: Detecta cuando cambia el tamaño de un elemento:
  
  

  const resizeObserver = new ResizeObserver((entries) => {
    entries.forEach(entry => {
      console.log(`Nuevo tamaño: ${entry.contentRect.width}x${entry.contentRect.height}`);
    });
  });
  
  resizeObserver.observe(document.getElementById('mi-contenedor'));