JavaScript'te Özel Nitelikler
HTML'de etiketlere kendi özel niteliklerinizi
eklemenize izin verilir. Bu tür nitelikler
data- ile başlamalı ve ardından sizin
için uygun olan herhangi bir nitelik adı gelmelidir.
Özel nitelikler çok çeşitli şekillerde kullanılabilir. Bu yöntemlerin birçoğunu eğitimin ilerleyen bölümlerinde öğreneceğiz ve daha sonra kendi başınıza daha fazlasını keşfedebilirsiniz.
Bu niteliklere erişim standart şekilde
düzenlenmemiştir. Daha önce yaptığımız gibi
elementin aynı isimli özelliğine doğrudan
erişemeyiz, bunun yerine özel bir dataset
özelliği kullanılmalıdır, ondan sonra nokta
ile data- olmadan nitelik adı yazılır.
Örneğin,
eğer niteliğimizin adı data-test ise,
ona erişmek için elem.dataset.test yazarız,
burada elem - elementimizi tutan değişkendir.
Bir örnek üzerinde görelim. Bize şu element verilmiş olsun:
<div id="elem" data-num="1000"></div>
Onun data-num niteliğinin değerini ekrana yazdıralım:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 yazdırır
Şimdi bu niteliğe başka bir değer atayalım:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Aşağıdaki kod verilmiştir:
<div id="elem" data-text="str">text</div>
Div'e tıklandığında, metninin sonuna
data-text niteliğinin içeriğinin
eklenmesini sağlayın.
data-num niteliğinde kendi sıra
numaralarını içeren div'ler verilmiştir:
<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>
Herhangi bir dive tıklandığında, sonuna kendi sıra numarasının yazılmasını sağlayın.
Bir buton verilmiştir. Bu butonun üzerine yapılan tıklama sayısını, herhangi bir özel niteliğe yazarak saymasını sağlayın. Başka bir butona tıklandığında, ekrana ilk butona kaç kez tıklandığı yazılsın.
Bir input verilmiştir:
<input id="elem" data-length="5">
Bu inputta data-length niteliğinde
inputa girilmesi gereken karakter sayısı
bulunmaktadır. Odak kaybedildiğinde, eğer
girilen karakter sayısı belirtilenle eşleşmiyorsa,
bununla ilgili bir mesajın ekrana yazılmasını sağlayın.
Bir input verilmiştir:
<input id="elem" data-min="5" data-max="10">
Bu inputta data-min ve
data-max nitelikleri bir aralık
içermektedir. Odak kaybedildiğinde, eğer
girilen karakter sayısı bu aralığa uymuyorsa,
bununla ilgili bir mesajın ekrana yazılmasını sağlayın.
