0Pricing
HTML Academy · Ders

data-* Sözdizimi ve Adlandırma Kuralları

Geçerli data-* öznitelik adlarını ve amaçlarını anlayın

data-* Sözdizimi ve Adlandırma Kuralları, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. 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.

İnceleme: data-* Öznitelikleri

Data öznitelikleri (data-*), HTML öğelerinde özel bilgiler depolar:

<div data-user-id="42" data-role="admin" data-active="true">
  User Card
</div>

Geçerli Adlandırma Kuralları

data-* özniteliği adlandırma gereksinimleri:

  • data- ile başlamalıdır
  • Ardından en az bir karakter gelmelidir
  • Yalnızca küçük harfler, rakamlar, kısa çizgiler, alt çizgiler, noktalar ve iki nokta kullanılabilir
  • Büyük harf kullanılamaz (HTML ayrıştırıcısı öznitelikleri küçük harfe dönüştürür)
  • Boşluk kullanılamaz

Adlandırma Kuralları

Topluluk adlandırma kuralları:

<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"

<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"

Birden Çok Veri Özniteliği

Bir öğe, istediğiniz sayıda veri özniteliğine sahip olabilir:

<button
  type="button"
  data-action="delete"
  data-target-id="user-42"
  data-confirm="true"
  data-confirm-message="Delete this user permanently?"
>Delete</button>

Değerler Her Zaman Dizelerdir

Veri özniteliği değerleri her zaman dizedir — bunları JavaScript'te parse edin:

const el = document.querySelector('[data-user-id]');

console.log(el.dataset.userId);              // '42' (string)
console.log(typeof el.dataset.userId);       // 'string'

// Parse to number:
const id = parseInt(el.dataset.userId, 10);   // 42 (number)

// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)

// Parse to JSON:
const config = JSON.parse(el.dataset.config); // object

data-* İçinde JSON Saklama

Karmaşık verileri JSON dizeleri olarak saklayın:

<div
  data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
  id="app"
></div>

<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme);    // 'dark'
console.log(config.pageSize); // 20
</script>

data-* ile Özel Öğeler Karşılaştırması

data-* ile özel öğeler ve JavaScript nesneleri arasında seçim yaparken:

  • data-* — öğeye özgü meta veriler, HTML'de görünür ve CSS'ten erişilebilir
  • Özel öğeler — davranışı kapsüllenmiş, karmaşık ve yeniden kullanılabilir bileşenler
  • JavaScript eşlemesi/WeakMap — HTML'de gerekmeyen veriler; büyük veya karmaşık veriler

Çerçevelerde data-* Kullanımı

Veri özniteliklerinin çerçevelerdeki yaygın kullanım alanları:

<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
  Toggle
</button>

<!-- Alpine.js: component data -->
<div x-data="{ open: false }">

<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">

<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>

Erişilebilirlik ve data-*

Veri öznitelikleri ekran okuyucuları tarafından seslendirilmez — bunları erişilebilirlik bilgileri için kullanmayın:

<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->

<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>

Performansla İlgili Noktalar

data-* özniteliklerinin performansa etkisi ihmal edilebilir düzeydedir:

  • dataset'i okumak hızlıdır (O(1))
  • Binlerce öğede data-* özniteliklerinin yoğun biçimde kullanılması sorun oluşturmaz
  • Büyük veri bloklarını (görseller, büyük JSON verileri) data-* içinde saklamak kaynak israfıdır
  • DOM öğeleriyle ilişkilendirilmiş büyük JavaScript nesnelerini saklamak için WeakMap kullanın

Özet: data-* İçin En İyi Uygulamalar

data-* için en iyi uygulamalar:

  • Küçük harfli, kısa çizgiyle ayrılmış adlar kullanın
  • Değerler her zaman dizedir — gerektiğinde parse edin
  • JSON için: JSON.stringify / JSON.parse
  • CSS veya JavaScript'in ihtiyaç duyduğu meta veriler için kullanın
  • ARIA özniteliklerinin yerine kullanmayın
  • Gizli bilgileri saklamayın (DevTools'ta görünür)

Hızlı Kontrol

dataset, öznitelik değerlerini her zaman hangi türde döndürür?

data-* Söz Dizimi Özeti

data-* adlandırmasının temel kuralları:

  • Biçim: data-[lowercase-name]="value"
  • Erişim: element.dataset.camelCaseName
  • Tüm değerler dizedir — açıkça parse edin
  • Karmaşık veriler için JSON saklayın
  • Öznitelik adında küçük harf kullanın; büyük harf ve boşluk kullanmayın

Sıkça Sorulan Sorular

“data-* Sözdizimi ve Adlandırma Kuralları” dersi ücretsiz mi?

Evet — “data-* Sözdizimi ve Adlandırma Kuralları” 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.

“data-* Sözdizimi ve Adlandırma Kuralları” dersinde ne öğreneceğim?

Geçerli data-* öznitelik adlarını ve amaçlarını anlayın 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 1. dersidir.

“data-* Sözdizimi ve Adlandırma Kuralları” 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

  1. data-* Sözdizimi ve Adlandırma Kuralları
  2. JavaScript'te dataset ile data-* Erişimi
  3. CSS Öznitelik Seçicileriyle data-* Kullanımı
  4. Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme
← HTML Academy Sayfasına Dön