HTML
Data attributes
data-* öznitelikleriyle bileşen verisi taşmayı öğrenirsin.
data-* öznitelikleri
Bazen bir HTML öğesine, sonradan JavaScript ile okuyacağın özel bir veri bağlamak istersin. data-* öznitelikleri tam bunun içindir: <button data-action="copy"> gibi. Yıldızın yerine kendi adını verirsin; değer ise serbest metindir.
Tarayıcı bu öznitelikleri görmezden gelmez ama onlara özel bir anlam da yüklemez. Yalnızca JavaScript'in okuyabileceği küçük veri yuvalarıdır. Bu yüzden data-*'ı görünüm için değil, davranış için kullan: hangi düğmenin ne işe yaradığını, hangi kartın hangi kaydı temsil ettiğini burada taşı.
data-* okuma ve yazma
Tarayıcı, data-* özniteliklerini JavaScript tarafında dataset koleksiyonuyla sunar. data-user-id özniteliği element.dataset.userId olarak okunur: tireler kaldırılır, sonraki harfler büyük yapılır. Yazarken de aynı dönüşüm uygulanır.
İsim seçerken kısa ve anlamlı olmasına dikkat et: data-id, data-action, data-target gibi. Sayı ya da özel karakterle başlamasın. Değer olarak boş bırakabilirsin ama genelde bir metin ya da sayı yazmak daha nettir. Bu grupta yalnızca HTML tarafını ele alıyoruz; JavaScript tarafı başka dersin konusu.
data-* ne için değil?
data-* öznitelikleri küçük veri yuvalarıdır; ama her şey için değildir. Görünüm bilgisi (renk, boyut) CSS'te durur; data-renk gibi şeyler kötü bir alışkanlıktır. Erişilebilirlik bilgisi (açıklama, durum) aria-* özniteliklerine aittir; data-acik ile ekran okuyucuya bilgi taşıyamazsın.
Yine de görünmez ama yapısal bilgiler için idealdir: bir kartın hangi kayda ait olduğu, bir sekmenin hangi paneli açtığı, bir filtrenin hangi alanı seçtiği. JavaScript bu veriyi okur ve davranışı buna göre kurar. Önce HTML, sonra davranış.
Uygulama data-* ile bir kart yaz
Body içine bir <article> yaz. Article'a data-id="42" ve data-category="bahce" özniteliklerini ekle. İçine dolu bir <h3> ve data-action="open" özniteliğine sahip, href'i dolu bir <a> bağlantısı koy.
Örnek çözümü göster
<body>
<article data-id="42" data-category="bahce">
<h3>Gül Yetiştirme Rehberi</h3>
<a href="/yazilar/gul-rehberi" data-action="open">Aç</a>
</article>
</body>
Kendini test et
-
Hangisi geçerli bir data-* özniteliğidir?
- data 2 (boşluk var)
- data* (yıldız var)
- data-toggle
- dataset (JS özelliği)
Cevabı göster
data-toggle — Doğru. data-* özniteliği 'data-' ön ekiyle başlar, ardından bir isim gelir.
-
data-* özniteliğini tamamla
<button ____>Kopyala</button>
Cevabı göster
<button data-action="copy">Kopyala</button>
-
Özniteliği amacıyla eşleştir
- data-id
- Kayıt numarasını taşır
- data-action
- Düğmenin işini taşır
- data-target
- Etki edilecek öğeyi taşır
- data-index
- Liste sırasını taşır
Sıradaki ders: Hydration hooks
