Web Geliştirmede `data-*` Özellikleri: HTML'de Kendi Veri Alanlarınızı Yaratın 🪄

<button data-urun-id="145" data-fiyat="299.99" data-stok-durumu="true">
    Sepete Ekle
</button>

<div data-kullanici-rol="admin" data-theme="dark" data-page-loaded="false">
    Yönetici Paneli
</div>

const button = document.querySelector('button');

// Veriyi okuma
const urunId = button.dataset.urunId; // "145"
const fiyat = button.dataset.fiyat; // "299.99"

// Veriyi değiştirme
button.dataset.stokDurumu = "false"; // Artık "false" değerini taşıyor
// HTML'de data-stok-durumu="false" olarak güncellenir.

// Yeni data özelliği ekleme
button.dataset.indirimKodu = "YAZ2024";
// HTML'e data-indirim-kodu="YAZ2024" eklenir.

// Okuma
const urunId = button.getAttribute('data-urun-id');

// Yazma
button.setAttribute('data-stok-durumu', 'false');

/* data-stok-durumu "false" olan butonu gri yap */
button[data-stok-durumu="false"] {
    background-color: #ccc;
    cursor: not-allowed;
}

/* data-theme değerine göre arkaplan rengi */
div[data-theme="dark"] {
    background-color: #333;
    color: white;
}
div[data-theme="light"] {
    background-color: #fff;
    color: black;
}

/* data-icon değerini içerik olarak gösterme (ileri seviye) */
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    /* ... stil kuralları ... */
}

<ul id="urun-listesi">
    <li data-id="1" data-fiyat="150" data-isim="Web Geliştirme Kitabı">
        Web Geliştirme Kitabı - 150 TL
        <button class="sepete-ekle">Ekle</button>
    </li>
    <li data-id="2" data-fiyat="89.90" data-isim="Programlama Kursu">
        Programlama Kursu - 89.90 TL
        <button class="sepete-ekle">Ekle</button>
    </li>
</ul>
<div id="sepet">Sepetiniz Boş</div>

document.querySelectorAll('.sepete-ekle').forEach(button => {
    button.addEventListener('click', function() {
        // Butonun parent'ı olan li elementinin data özelliklerine ulaş
        const urunElemani = this.parentElement;
        const urunId = urunElemani.dataset.id;
        const urunFiyat = parseFloat(urunElemani.dataset.fiyat);
        const urunIsim = urunElemani.dataset.isim;

        // Sepet işlemleri burada yapılır...
        console.log(`Sepete Eklendi: ${urunIsim} (ID: ${urunId}) - Fiyat: ${urunFiyat} TL`);

        // Örneğin, sepetteki yazıyı güncelle
        const sepetDiv = document.getElementById('sepet');
        sepetDiv.textContent = `${urunIsim} sepete eklendi!`;
        sepetDiv.style.color = 'green';

        // Butonu devre dışı bırak (stok bitti varsayalım)
        this.disabled = true;
        this.textContent = "Stokta Yok";
        // Hatta CSS'deki data özelliğini de güncelleyebiliriz
        urunElemani.dataset.stok = "yok";
    });
});