JavaScript-Tools

JavaScript-Tools & Funktionen

Hier finden Sie praktische JavaScript-Tools und Funktionen, die Sie direkt in Ihren Projekten verwenden können. Alle Tools sind kostenlos und für moderne Websites optimiert.

Form-Validierung

function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

// Verwendung
if (validateEmail('test@example.com')) {
  console.log('Gültige E-Mail');
}

Scroll-Animation

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});

Theme-Toggle

function toggleTheme() {
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  html.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
}

// Theme beim Laden setzen
const savedTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);

Debounce-Funktion

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Verwendung
const handleScroll = debounce(() => {
  console.log('Scroll event');
}, 200);

window.addEventListener('scroll', handleScroll);