HTML5 Veri Özniteliklerinden Yararlanma
Uygulamaya özgü verileri doğrudan HTML öğelerinde veri özniteliklerini kullanarak saklamayı ve almayı öğrenin; böylece son derece dinamik ve veri odaklı kullanıcı arayüzleri oluşturun.
HTML5 Veri Özniteliklerinden Yararlanma, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 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, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.
HTML5 Veri Öznitelikleriyle Tanışın
HTML5, özel verileri doğrudan standart HTML öğelerinin içinde saklamanızı sağlayan data özniteliklerini kullanıma sundu.
Bunları, görüntülenmesi amaçlanmayan ek bilgileri tutan HTML etiketlerinizdeki gizli bölmeler gibi düşünebilirsiniz. Bu, HTML'nizi daha anlamlı, JavaScript'inizi ise daha güçlü hâle getirir; çünkü verileri doğrudan öğelere bağlayabilirsiniz.
Veri Öznitelikleri Neden Kullanışlıdır
Veri özniteliklerinden önce geliştiriciler, öğeye özgü verileri saklamak için çoğunlukla sınıfları, kimlikleri veya hatta gizli input alanlarını kullanırdı. Ancak bu yöntemlerin bazı sakıncaları vardır:
- Sınıflar/Kimlikler: Veri için değil, çoğunlukla biçimlendirme veya seçim amacıyla kullanılır.
- Gizli Input'lar: DOM'u karmaşıklaştırır ve form gönderimi için tasarlanmıştır.
Veri öznitelikleri, özel verileri ait oldukları yere doğrudan yerleştirmek için temiz ve standart bir yol sunar.
`data-` Adlandırma Kuralı
Tüm veri öznitelikleri data- ön ekiyle başlamalıdır. Ön ekten sonra özniteliğinize küçük harfler, rakamlar, tireler ve alt çizgiler kullanarak istediğiniz adı verebilirsiniz.
data-id="123"data-status="active"data-item-price="9.99"
Bu standart ön ek, özel özniteliklerinizin mevcut veya gelecekteki HTML öznitelikleriyle çakışmamasını sağlar.
HTML İçine Veri Yerleştirme
Veri özniteliklerini doğrudan HTML işaretlemenize kolayca ekleyebilirsiniz. Diğer tüm öznitelikler gibi bunların da bir adı ve değeri vardır.
İşte bir örnek: Bir düğmeye data-product-id ve data-category ekleyeceğiz.
<button id="buyButton" data-product-id="456" data-category="electronics">
Buy Now
</button>
<script>
// JavaScript goes here later
</script>jQuery ile Veri Alma
jQuery, veri özniteliklerindeki değerleri almak için son derece kullanışlı bir yöntem olan .data() yöntemini sunar. data- ön ekini sizin için otomatik olarak ayrıştırır.
Belirli bir özniteliği almak için adını (data- olmadan) .data() yöntemine verin.
<button id="myButton" data-user-id="101" data-role="admin">
User Profile
</button>
<script>
$(document).ready(function() {
const userId = $('#myButton').data('user-id');
const userRole = $('#myButton').data('role');
console.log("User ID:", userId);
console.log("User Role:", userRole);
});
</script>Verileri Anında Değiştirme
.data() yöntemi yalnızca okumak için değildir; yeni veri özniteliklerini dinamik olarak güncellemek veya eklemek için de kullanabilirsiniz.
İki bağımsız değişken verin: öznitelik adı (data- olmadan) ve yeni değer. Bu işlem, jQuery'nin dahili veri önbelleğini günceller; HTML5 veri öznitelikleri için DOM özniteliğinin kendisini de günceller.
<div id="statusBox" data-status="pending">
Current Status
</div>
<script>
$(document).ready(function() {
console.log("Initial status:", $('#statusBox').data('status'));
// Update the status
$('#statusBox').data('status', 'complete');
console.log("Updated status:", $('#statusBox').data('status'));
});
</script>Akıllı Veri Türü İşleme
jQuery'nin .data() yönteminin kullanışlı özelliklerinden biri, türleri otomatik olarak dönüştürmesidir. jQuery, veri özniteliklerini alırken dize değerlerini daha uygun JavaScript türlerine dönüştürmeye çalışır.
"true"ve"false"boolean değerlere dönüşür."123"bir sayıya dönüşür."[1,2]"ve"{name:'X'}", geçerli JSON olmaları durumunda diziye/nesneye dönüşür.
Böylece elle ayrıştırma yapmanız gerekmez!
Gerçek Hayattan Kullanım: Durum Değiştirme
Veri öznitelikleri, kullanıcı arayüzü öğelerinin durumunu yönetmek için idealdir. data-active özniteliğine göre metnini ve durumunu değiştiren basit bir açma-kapama düğmesi oluşturalım.
Durumunun değiştiğini görmek için düğmeye tıklayın!
<button id="toggleBtn" data-active="false">
Activate Feature
</button>
<script>
$(document).ready(function() {
$('#toggleBtn').on('click', function() {
let isActive = $(this).data('active');
if (isActive) {
$(this).data('active', false);
$(this).text('Activate Feature');
$(this).css('background-color', '#f0f0f0');
} else {
$(this).data('active', true);
$(this).text('Deactivate Feature');
$(this).css('background-color', '#d4edda');
}
console.log("Active state:", $(this).data('active'));
});
});
</script>Veri Özniteliklerini Kullanma İpuçları
Veri özniteliklerini temiz ve etkili biçimde kullanmak için şu en iyi uygulamaları aklınızda bulundurun:
- Kullanıcı Arayüzü Durumu İçin Kullanın: Geçici kullanıcı arayüzü durumunu, ayarları veya başvuruları saklamak için idealdir.
- Büyük Verilerden Kaçının: Çok büyük veri kümelerini saklamak için kullanmayın; değerleri kısa tutun.
- Anlamlı Adlandırma: Açık ve açıklayıcı adlar seçin (ör.
data-user-id,data-udeğil). - Arka Uç Verilerinin Yerine Kullanmayın: Karmaşık verileri sunucunuzdan almaya devam edin; verilerin tamamını sayfaya gömmeyin.
Veri Özniteliği Sınavı
Aşağıdaki HTML ve JavaScript kodunu inceleyin:
<div id="item" data-price="25.50" data-available="true">
Product Info
</div>
<script>
$(document).ready(function() {
const itemDiv = $('#item');
const price = itemDiv.data('price');
const available = itemDiv.data('available');
itemDiv.data('stock', 100);
const stock = itemDiv.data('stock');
console.log(typeof price);
console.log(typeof available);
console.log(stock);
});
</script>Konsola ne yazdırılır?
Özet: Veri Öznitelikleriyle Yeni Olanaklar
Tebrikler! jQuery ile HTML5 veri özniteliklerinden yararlanmayı öğrendiniz.
- Özel verileri doğrudan HTML içine yerleştirmek için temiz bir yol sunarlar.
- jQuery'nin
.data()yöntemi, bu verileri almayı ve güncellemeyi kolaylaştırır. - Otomatik tür dönüştürme, veri işlemeyi basitleştirir.
- Kullanıcı arayüzü durumunu yönetmek ve dinamik arayüzler oluşturmak için mükemmeldirler.
Pratik yapmaya devam edin; web uygulamalarınızı daha akıllı ve etkileşimli hâle getirmenin sayısız yolunu keşfedeceksiniz!
Sıkça Sorulan Sorular
“HTML5 Veri Özniteliklerinden Yararlanma” dersi ücretsiz mi?
Evet — “HTML5 Veri Özniteliklerinden Yararlanma” 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 jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.
“HTML5 Veri Özniteliklerinden Yararlanma” dersinde ne öğreneceğim?
Uygulamaya özgü verileri doğrudan HTML öğelerinde veri özniteliklerini kullanarak saklamayı ve almayı öğrenin; böylece son derece dinamik ve veri odaklı kullanıcı arayüzleri oluşturun. jQuery 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.
jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te jQuery 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, 3 dersinin 1. dersidir.
“HTML5 Veri Özniteliklerinden Yararlanma” 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 jQuery Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her jQuery 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
- HTML5 Veri Özniteliklerinden Yararlanma
- Verilerle Dinamik İçerik Oluşturma
- Temel İstemci Tarafı Şablon Entegrasyonu