Veri Öznitelikleri

Önceki dersler belgeye anlam kazandıran ögeleri tamamladı. Geriye tanımlı bir anlamı olmayan ama işe yarayan bir düzenek kalıyor: her ögeye takılabilen, ad çakışması üretmeyen ve program tarafından okunabilen öznitelikler.

Sorun şudur: bir ögeye, dilin tanımlamadığı bir bilgi iliştirmek gerekebilir — bir sensörün kimliği, bir kaydın durumu, bir bölümün yenilenme aralığı. Bu bilgi belgede görünmez ama davranış katmanının ona erişmesi gerekir.

Neden Ayrı Bir Düzenek

Böyle bir bilgiyi taşımanın kendiliğinden akla gelen yolları sorunludur.

Var olan bir özniteliği amacı dışında kullanmak —örneğin title ya da class içine veri gömmek— o özniteliğin tanımlı davranışını bozar: title ekran okuyucuda duyurulur, class sunum katmanının seçicilerine karışır.

Kendi adını uydurmak —sensor-id="4" gibi— geçerli bir belge üretmez. İşaretleme Dili Kavramı dersinde belirtildiği gibi ayrıştırıcı bilinmeyen özniteliği saklar, dolayısıyla çalışır; ancak dile ileride gerçekten sensor-id adında bir öznitelik eklenirse belgedeki anlam sessizce değişir.

data- öneki bu iki soruna birden yanıt verir. Önek dile ayrılmıştır: dilin kendi öznitelikleri hiçbir zaman bu önekle başlamaz, dolayısıyla çakışma olanaksızdır. Ve tanımlı bir davranışı yoktur: değeri okunmadıkça hiçbir şey yapmaz.

<article data-kayit-kimligi="4"
         data-sensor-turu="nem"
         data-olcum-araligi="600"
         data-dogrulandi="false">
  <h3>Nem sensörü yeniden ayarlandı</h3>
</article>

Ad Dönüşümü

Öznitelik adı ile program tarafındaki anahtar arasında tanımlı bir dönüşüm vardır. Öznitelik adı küçük harfle ve tireli yazılır; program tarafında önek düşer ve tireler kaldırılıp sonraki harf büyütülür.

// veri.mjs — data-* adi ile dataset anahtari arasindaki donusum
function ozniteliktenAnahtara(yazilanAd) {
  const ad = yazilanAd.toLowerCase(); // ayristirici oznitelik adlarini kucultur
  if (!ad.startsWith("data-")) return null;
  return ad.slice(5).replace(/-([a-z])/g, (_, harf) => harf.toUpperCase());
}

function anahtardanOznitelige(anahtar) {
  if (/-[a-z]/.test(anahtar)) return null; // kucuk harften once tire yasaktir
  return "data-" + anahtar.replace(/[A-Z]/g, (harf) => "-" + harf.toLowerCase());
}

const oznitelikler = [
  "data-istasyon",
  "data-olcum-araligi",
  "data-son-kalibrasyon-tarihi",
  "data-x2",
  "data-Sensor",
  "class",
];

console.log("oznitelik adi                 dataset anahtari       geri donusum");
for (const ad of oznitelikler) {
  const anahtar = ozniteliktenAnahtara(ad);
  const geri = anahtar === null ? "—" : anahtardanOznitelige(anahtar);
  console.log(ad.padEnd(30) + String(anahtar ?? "—").padEnd(23) + String(geri));
}

console.log("--- degerler her zaman dizgidir ---");
const kumesi = { istasyon: "kuzey-yamac", olcumAraligi: "600", etkin: "false" };
for (const [anahtar, deger] of Object.entries(kumesi)) {
  console.log(anahtar.padEnd(14), JSON.stringify(deger), "-> typeof:", typeof deger);
}
console.log("Number(olcumAraligi) =", Number(kumesi.olcumAraligi));
console.log('Boolean("false")     =', Boolean(kumesi.etkin));

oznitelik adi                 dataset anahtari       geri donusum
data-istasyon                 istasyon               data-istasyon
data-olcum-araligi            olcumAraligi           data-olcum-araligi
data-son-kalibrasyon-tarihi   sonKalibrasyonTarihi   data-son-kalibrasyon-tarihi
data-x2                       x2                     data-x2
data-Sensor                   sensor                 data-sensor
class                         —                      —
--- degerler her zaman dizgidir ---
istasyon       "kuzey-yamac" -> typeof: string
olcumAraligi   "600" -> typeof: string
etkin          "false" -> typeof: string
Number(olcumAraligi) = 600
Boolean("false")     = true

Beşinci satır bir tuzağı gösterir: data-Sensor yazımı beklenen anahtarı üretmez, çünkü Etiketler, Öznitelikler ve Varlıklar dersinde belirtildiği gibi ayrıştırıcı öznitelik adlarını küçültür. Öznitelik adında büyük harf kullanılmaz; çok sözcüklü adlar tireyle ayrılır.

Dördüncü satır rakamların dönüşüme girmediğini gösterir: tire yalnızca kendisinden sonra küçük harf geliyorsa kaldırılır.

Değerler Dizgidir

Çıktının ikinci bölümü, veri özniteliklerinin en sık gözden kaçan özelliğini gösterir: değerler her zaman dizgidir. Sayı yazılmış olsa bile dizgi olarak okunur ve karşılaştırmalarda çevrilmesi gerekir.

Son satır bunun mantıksal değerlerdeki sonucudur. "false" dizgisi boş olmadığı için doğru sayılır; Boolean çevrimi beklenen sonucu vermez. Mantıksal bir bilgi taşınacaksa iki yol vardır: değeri açıkça karşılaştırmak, ya da mantıksal özniteliklerin kuralını izleyip varlığı anlam saymak — özniteliği yazmak doğru, hiç yazmamak yanlış demektir.

Ne Zaman Uygun Değil

Veri özniteliği bir depolama alanı değildir. Üç durumda kullanılmaz.

İçerik taşımak için. Belgede görünmesi gereken bir metin bir veri özniteliğine yazılırsa, kaynak metinde vardır ama belgede yoktur: seçilemez, aranamaz, çevrilmez ve ekran okuyucuya sunulmaz.

Dilin karşılığı olan bir bilgi için. Bir ögenin devre dışı olduğu, bir bölümün gizlendiği, bir alanın zorunlu olduğu bilgisi dilde tanımlıdır ve o öznitelikle bildirilir. Bu bilgiyi veri özniteliğine yazmak, erişilebilirlik ağacına hiçbir şey iletmez.

Büyük veri için. Öznitelik değerleri belgeyle birlikte her istekte gönderilir ve belge büyüdükçe ayrıştırma da yavaşlar. Bir kaydın tamamını ögeye iliştirmek yerine kimliğini iliştirip veriyi ayrı istemek yeğlenir.

Durum Bildirimi: Sınıf mı, Veri mi

Bir ögenin o andaki durumunu —seçili, yükleniyor, hatalı— bildirmenin iki yolu vardır ve ikisi de kullanımdadır.

Sınıf adı eklemek yaygındır ama sınıf listesi bir küme olduğu için değer taşımaz: “durum yükleniyor” bilgisi ancak yukleniyor adlı bir sınıfın varlığıyla anlatılır ve birden çok durumdan yalnızca birinin geçerli olması elle korunur. Eski durumu silmek unutulursa iki durum aynı anda görünür.

Veri özniteliği bir ad–değer çiftidir; data-durum="yukleniyor" yazımında yeni değer eskisinin yerini alır ve iki durumun aynı anda bulunması olanaksızdır. Sunum katmanı bu değeri öznitelik seçicisiyle okur; seçiciler sonraki kursun konusudur.

Bu ayrım, kullanıcıya duyurulması gereken durumlar için geçerli değildir. Bir alanın hatalı olduğu, bir düğmenin basılı olduğu, bir bölümün açık olduğu bilgisi erişilebilirlik ağacına iletilmelidir ve bunun yolu dilin kendi öznitelikleri ile ARIA durum öznitelikleridir. Veri özniteliği bu ağaca hiçbir şey iletmez.

Dışarıya Açılan Veri

Veri öznitelikleri belgeyi yazan ile belgenin kendi betikleri arasındaki bir sözleşmedir. Adları serbesttir, anlamları belgeye özgüdür ve dışarıdan bir program onlardan bir şey çıkaramaz.

Bilgi dışarıya —dizinleyicilere, toplayıcılara— açılacaksa bu düzenek yetmez; ortak bir sözcük dağarcığı gerekir. Belgeye gömülen yapılandırılmış veri sözleşmeleri bu işi görür ve tanımlı bir kavram kümesine dayanır. Ayrım şudur: data- kendi programınız için, yapılandırılmış veri başkasının programı için.

İstasyon Belgesinde

<section aria-labelledby="kayitlar" data-yenileme-araligi="600">
  <h2 id="kayitlar">Kalibrasyon Kayıtları</h2>

  <article data-kayit-kimligi="4" data-sensor-turu="nem">
    <h3>Nem sensörü yeniden ayarlandı</h3>
    <p>Referans değere göre yüzde iki sapma düzeltildi.</p>
    <footer>
      <p>Kayıt tarihi: <time datetime="2024-03-12T07:30">12 Mart sabahı</time></p>
    </footer>
  </article>
</section>

İliştirilen üç değerin üçü de belgede görünmesi gerekmeyen, davranış katmanının işine yarayacak bilgilerdir. Kaydın tarihi ise veri özniteliğine değil time ögesine yazılmıştır: o bilgi hem görünür hem de dilde karşılığı olan bir bilgidir.

Özet

• data- öneki dile ayrılmıştır; bu önekle yazılan öznitelikler dilin özellikleriyle çakışmaz ve tanımlı bir davranışları yoktur.
• Öznitelik adı küçük harfle ve tireli yazılır; program tarafındaki anahtar önek düşürülüp tireden sonraki harf büyütülerek üretilir.
• Değerler her zaman dizgidir; sayısal karşılaştırmalarda çevrilir, mantıksal bilgide "false" dizgisi doğru sayılır.
• Belgede görünmesi gereken içerik, dilde karşılığı olan bilgi ve büyük veri bu özniteliklere yazılmaz.

Sonraki Adım

Belge bu noktada yapılı, bölümlenmiş ve medya taşır durumda; ancak tek yönlü. Okuyucu bilgi alıyor, veremiyor. Sonraki konu bu yönü açar: bir formun sunucuya gerçekte ne gönderdiğini, o gövdenin nasıl kodlandığını ve gönderim başlamadan önce hangi denetimlerin yapıldığını ele alır. İlk ders, gönderimin kendisiyle başlar.