jQuery Academy · Ders

Verilerle Dinamik İçerik Oluşturma

Etkileşimli bileşenler oluşturmak, kullanıcı arayüzünü saklanan verilere göre güncellemek ve esnek içerik görünümleri geliştirmek için veri özniteliklerini jQuery ile birleştirin.

Verilerle Dinamik İçerik Oluşturma, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 2. 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.

Verilerle Dinamik İçerik

2. derse hoş geldiniz! Önceki derste HTML5 veri özniteliklerini kullanarak verileri depolamayı ve almayı öğrendik.

Şimdi bunu bir adım ileri taşıyacağız. Bu öznitelikleri jQuery ile birleştirerek web sayfalarınızda içeriği dinamik olarak nasıl oluşturacağınızı ve güncelleyeceğinizi inceleyeceğiz. Bu, kullanıcı arayüzlerinizi etkileşimli ve esnek hâle getirir!

Dinamik İçerik Neden Kullanılır?

Bir ürün, kullanıcı profili veya haber makalesi listesine sahip olduğunuzu düşünün. Her şeyi sabit olarak kodlamak yerine, temel verileri data-* özniteliklerini kullanarak tanımlayabilirsiniz.

Mevcut öğeleri yeni bilgilerle güncelleyin.
Verilere göre tamamen yeni öğeler oluşturun.
Verileri kullanarak kullanıcı arayüzünün davranışını (gösterme/gizleme gibi) denetleyin.

Bu yaklaşım, içerik verilerinizi sunumundan ayırır.

Mevcut Öğeleri Güncelleme

İçeriği güncelleyerek başlayalım. data-* özniteliklerine sahip bir öğemiz olabilir; jQuery kullanarak bu verileri okuyup sayfanın diğer bölümlerini doldurabiliriz.

Bu yöntem, seçilen bir öğeyle ilgili ayrıntıları göstermek veya durum iletilerini güncellemek için oldukça kullanışlıdır.

Kod: Öğe Ayrıntılarını Güncelleme

Bir öğedeki veri özniteliklerinin başka bir öğedeki metni nasıl güncellediğini görmek için düğmeye tıklamayı deneyin.

<!DOCTYPE html>
<html>
<head>
  <title>Update Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id="productCard" data-product-name="CoddyKit Pro" data-product-price="29.99">
  <p>Product: <span id="displayedName">[Name Here]</span></p>
  <p>Price: <span id="displayedPrice">[Price Here]</span></p>
  <button id="showDetailsBtn">Show Details</button>
</div>

<script>
$(document).ready(function() {
  $('#showDetailsBtn').on('click', function() {
    var name = $('#productCard').data('productName');
    var price = $('#productCard').data('productPrice');
    
    $('#displayedName').text(name);
    $('#displayedPrice').text('$' + price);
  });
});
</script>

</body>
</html>

Açıklama: İçeriği Güncelleme

Örnekte #productCard div'i, data-product-name ve data-product-price özniteliklerini içerir.

Düğmeye tıklandığında .data('productName') ve .data('productPrice') bu değerleri alır.
Ardından .text(), bu değerleri #displayedName ve #displayedPrice span'lerine yerleştirmek için kullanılır.

Bu örnek, bir öğedeki verilerin nasıl okunacağını ve başka bir öğenin içeriğinin nasıl güncelleneceğini gösterir.

Yeni Öğeler Oluşturma

Güncellemenin yanı sıra, tamamen yeni HTML öğeleri oluşturmak için de veri özniteliklerini kullanabiliriz. Bu yöntem listeler, galeriler veya dinamik formlar için son derece güçlüdür.

Yeni öğeler için şablon benzeri verileri veya yapılandırmayı veri özniteliklerinde depolayabilir, ardından jQuery kullanarak bunları oluşturup DOM'a ekleyebilirsiniz.

Kod: Listeye Öğe Ekleme

Aşağıdaki düğmeye tıklayarak, içeriği düğmenin veri özniteliklerinden alınan yeni bir liste öğesini dinamik olarak ekleyin.

<!DOCTYPE html>
<html>
<head>
  <title>Create New Element</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<ul id="myList">
  <li>Existing Item 1</li>
</ul>

<button id="addBtn" data-new-item-text="Dynamic Item" data-new-item-value="101">
  Add Dynamic Item
</button>

<script>
$(document).ready(function() {
  $('#addBtn').on('click', function() {
    var itemText = $(this).data('newItemText');
    var itemValue = $(this).data('newItemValue');
    
    var newItem = $('<li>').text(itemText + ' (ID: ' + itemValue + ')');
    $('#myList').append(newItem);
  });
});
</script>

</body>
</html>

Açıklama: Öğe Oluşturma

Burada #addBtn düğmesi, data-new-item-text ve data-new-item-value özniteliklerine sahiptir.

Tıklama gerçekleştiğinde bu değerleri alırız.
$('
') yeni bir liste öğesi oluşturur.
.text() bu öğeyi birleştirilmiş verilerle doldurur.
Son olarak $('#myList').append(newItem), bu yeni
öğesini sırasız listemize ekler.

Bu, dinamik listeler veya ızgaralar oluşturmak için temel bir kalıptır!

Verilerle Etkileşimli Bileşenler

Veri öznitelikleri yalnızca metin için kullanılmaz! Etkileşimli bileşenlerin yapılandırmasını da depolayabilirler. Örneğin, hangi öğenin açılıp kapanacağı veya hangi animasyonun oynatılacağı bu şekilde belirtilebilir.

Bu yöntem, JavaScript mantığınızı sabit kodlanmış kimliklerden veya sınıflardan ayırarak kodunuzu daha modüler ve yeniden kullanılabilir hâle getirir.

Soru: Dinamik İçerik

Aşağıdaki HTML ve jQuery kodunu inceleyin:

<div id="infoBox" data-status="active"></div>

$('#infoBox').data('status', 'inactive');

Bu kod çalıştıktan sonra $('#infoBox').data('status') kullanılarak alındığında data-status özniteliğinin yeni değeri ne olur?

Özet: Verilerle Dinamik İçerik

Harika iş çıkardınız! Bu derste, gerçekten dinamik web içeriği oluşturmak için veri özniteliklerinden nasıl yararlanacağınızı öğrendiniz:

Veri özniteliklerini okuyup değerlerini yerleştirerek mevcut öğeleri güncelleyebilirsiniz.
Yeni HTML öğelerini dinamik olarak oluşturup bunları diğer öğelerden alınan verilerle doldurabilirsiniz.
Bu yaklaşım, verileri sunumdan ayırarak kullanıcı arayüzünüzü daha esnek ve etkileşimli hâle getirir.

Artık daha uyarlanabilir ve ilgi çekici kullanıcı arayüzleri oluşturmaya hazırsınız!

Sıkça Sorulan Sorular

“Verilerle Dinamik İçerik Oluşturma” dersi ücretsiz mi?

Evet — “Verilerle Dinamik İçerik Oluşturma” 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.

“Verilerle Dinamik İçerik Oluşturma” dersinde ne öğreneceğim?

Etkileşimli bileşenler oluşturmak, kullanıcı arayüzünü saklanan verilere göre güncellemek ve esnek içerik görünümleri geliştirmek için veri özniteliklerini jQuery ile birleştirin. 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 2. dersidir.

“Verilerle Dinamik İçerik Oluşturma” 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

← jQuery Academy Sayfasına Dön