HTML Academy · Ders

Özel Veri Öznitelikleri: data-*

data-* öznitelikleriyle özel verileri doğrudan öğelerde saklamayı öğrenin.

Özel Veri Öznitelikleri: data-*, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

data-* Öznitelikleri Nedir?

Özel data öznitelikleri, ek bilgileri doğrudan HTML öğelerinde saklamanızı sağlar:

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

data-* Neden Var

data-* kullanılmadan önce geliştiriciler ek verileri şu yerlerde saklardı:

Gizli input'larda (karmaşık ve düzensiz)
CSS sınıf adlarında (kırılgan)
rel veya title gibi standart dışı özniteliklerde (geçersiz HTML)

HTML5, anlamı veya sunumu etkilemeden özel veri eklemenin resmî yolu olarak data-* özniteliklerini standartlaştırdı.

Adlandırma Kuralları

data-* özniteliklerinin adlandırma kuralları:

data- ile başlamalıdır
Ad; küçük harfler, rakamlar, tireler, alt çizgiler ve noktalar içerebilir
Ad içinde büyük harf bulunamaz (HTML belirtimi bunları küçük harfe dönüştürür)
Ad xml ile başlayamaz

<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->

JavaScript ile data-* Okuma

Özel verilere dataset özelliği aracılığıyla erişin:

<button id="btn"
  data-user-id="42"
  data-action="delete"
  data-confirm-message="Are you sure?"
>
  Delete
</button>

<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId);          // '42'
console.log(btn.dataset.action);          // 'delete'
console.log(btn.dataset.confirmMessage);  // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>

dataset ile data-* Yazma

data-* özniteliklerini dataset aracılığıyla ayarlayın ve kaldırın:

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

// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">

// Delete:
delete card.dataset.status;
// Now: data-status is removed

// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');

Tireden camelCase Dönüşümü

dataset arayüzü, tirelerle ayrılmış adları camelCase biçimine dönüştürür:

<!-- HTML attribute         JavaScript dataset property -->
data-user-id           →   dataset.userId
data-product-category  →   dataset.productCategory
data-max-retries       →   dataset.maxRetries
data-is-active         →   dataset.isActive

CSS Öznitelik Seçicileri

CSS seçicilerinde data özniteliklerini kullanın:

[data-status="active"] {
  color: green;
}

[data-status="inactive"] {
  color: gray;
  text-decoration: line-through;
}

/* Present but any value: */
[data-featured] {
  border: 2px solid gold;
}

Araç İpucu Deseni

data öznitelikleriyle yalnızca CSS kullanarak araç ipuçları oluşturun:

<span data-tooltip="This is a tooltip">Hover me</span>

/* CSS: */
/*
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);  /* attr() reads the attribute value */
  position: absolute;
  background: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/

Durum İzleme Deseni

Bileşen durumunu data öznitelikleriyle izleyin:

<button data-state="off" id="toggle">Toggle</button>

<script>
document.getElementById('toggle').addEventListener('click', function() {
  const state = this.dataset.state;
  this.dataset.state = state === 'off' ? 'on' : 'off';
  this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>

/* CSS: */
/* [data-state="on"] { background: green; color: white; } */

data-* ile JavaScript Değişkenleri Karşılaştırması

data-* ne zaman kullanılmalı, veriler ne zaman JavaScript'te saklanmalı:

Doğrudan bir DOM öğesine karşılık gelen ve CSS tarafından okunabilen değerler için data-* kullanın
Belirli öğelere bağlı olmayan karmaşık veri yapıları için JavaScript değişkenlerini veya nesnelerini kullanın
Büyük ya da hassas verileri data-* içinde saklamayın — bunlar DevTools'ta görünür

data-* Sunum İçin Değildir

Kaçınılması gereken yaygın hatalar:

<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>

<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->

Hızlı Kontrol

dataset arayüzü, data-product-id özniteliğine nasıl erişir?

Özet: data-* Öznitelikleri

Özel data özniteliklerinin temel noktaları:

data-name="value" — öğelerde özel üst verileri saklar
element.dataset.camelCase aracılığıyla erişilir
Tireler, dataset arayüzünde camelCase biçimine dönüştürülür
CSS'te [data-name="value"] seçicileriyle kullanılır
Hassas verileri (anahtarlar, parolalar) asla data özniteliklerinde saklamayın

Sıkça Sorulan Sorular

“Özel Veri Öznitelikleri: data-*” dersi ücretsiz mi?

Evet — “Özel Veri Öznitelikleri: data-*” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Özel Veri Öznitelikleri: data-*” dersinde ne öğreneceğim?

data-* öznitelikleriyle özel verileri doğrudan öğelerde saklamayı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Özel Veri Öznitelikleri: data-*” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön