Komunikacja HTML – JS poprzez atrybuty

Komunikacja HTML–JS poprzez atrybuty

Jedną z najważniejszych ról atrybutów data-* w HTML jest umożliwienie komunikacji między strukturą strony a logiką napisaną w JavaScript. Dzięki temu możesz sterować działaniem skryptów bez twardego kodowania danych w JS – co zwiększa elastyczność i reużywalność komponentów.

Jak HTML „przekazuje” dane do JavaScriptu?

HTML nie wykonuje kodu, ale może przechowywać dane w atrybutach data-*. JavaScript odczytuje te dane za pomocą właściwości dataset. Oto podstawowy przykład:

<button id="addToCart" data-product-id="789">Dodaj do koszyka</button>

const button = document.getElementById('addToCart');
const productId = button.dataset.productId;

console.log(productId); // "789"

Skrypt nie „zna” produktu z góry – odczytuje dane z HTML dynamicznie. Dzięki temu ten sam skrypt może obsłużyć dowolną liczbę przycisków na stronie.

Przykład: jeden skrypt – wiele przycisków

<button class="cart-button" data-product-id="101">Kup 101</button>
<button class="cart-button" data-product-id="102">Kup 102</button>
<button class="cart-button" data-product-id="103">Kup 103</button>

const buttons = document.querySelectorAll('.cart-button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const id = button.dataset.productId;
    alert(`Dodano produkt nr ${id} do koszyka`);
  });
});

To podejście jest skalowalne i bardzo wydajne – HTML „niesie” dane, JS wykonuje logikę. Komponenty HTML nie muszą być unikalne – skrypt sam wie, z którym elementem pracuje.

Przykład: dane a zachowanie przycisków

<button class="action" data-type="login">Zaloguj</button>
<button class="action" data-type="register">Zarejestruj</button>

document.querySelectorAll('.action').forEach(btn => {
  btn.addEventListener('click', () => {
    const actionType = btn.dataset.type;

    if (actionType === 'login') {
      openLoginModal();
    } else if (actionType === 'register') {
      openRegisterModal();
    }
  });
});

Skrypt rozpoznaje intencję działania na podstawie danych zapisanych w HTML – nie na podstawie nazw klas czy ID.

Uwaga: dataset odczytuje dane jako stringi

Każda wartość z data-* jest odczytywana jako tekst (string). Jeśli potrzebujesz liczby lub boolean, pamiętaj o konwersji:

<div data-visible="false" data-delay="300"></div>

const el = document.querySelector('div');
const delay = parseInt(el.dataset.delay);     // 300 (number)
const visible = el.dataset.visible === "true"; // false (boolean)

Dobre praktyki

• Używaj data-* jako interfejsu komunikacyjnego dla komponentów
• Nie opieraj logiki JS na klasach wizualnych (np. „blue-btn”) – używaj danych
• Stosuj camelCase po stronie JavaScriptu: data-user-id → dataset.userId
• Zadbaj o walidację typów – dataset zwraca wszystko jako string

🧪 Ćwiczenie praktyczne

Stwórz komponent – np. galerię obrazków, listę zadań lub przyciski akcji – i nadaj każdemu elementowi własny zestaw data-*. Następnie napisz JS, który:

• reaguje na kliknięcia,
• odczytuje dane z atrybutów,
• wykonuje logikę zależną od tych danych (np. zmiana widoku, filtrowanie, animacja).

Przetestuj wszystko w JSFiddle lub swoim edytorze lokalnym.

💡 Wniosek

Atrybuty data-* to elegancki sposób na połączenie statycznej struktury HTML z dynamicznym zachowaniem JavaScriptu. Dzięki nim możesz tworzyć interfejsy oparte na danych, które są elastyczne, łatwe do debugowania i gotowe do skalowania.