Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme
Araç ipuçları, etkin durumlar ve bileşen yapılandırması için data-* kullanın
Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. 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.
data-tooltip ile İpucu
İpucu metnini tetikleyici öğedeki data-tooltip içinde saklayın. CSS'teki [data-tooltip]:hover::after { content: attr(data-tooltip) } bunu JavaScript olmadan görüntüler. Erişilebilir ipuçları için role="tooltip" ekleyin ve aria-describedby değerini gerçek bir öğeye işaret edecek şekilde ayarlayın.
CSS İpuçlarını Konumlandırma
Tetikleyici position: relative gerektirir. ::after sözde öğesi, ipucunu tetikleyicinin üzerinde ortalamak için position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) kullanır. Satır kaymasını önlemek için white-space: nowrap ekleyin.
data-state ile Durum Takibi
Birden çok Boolean sınıfını (is-open, is-loading, is-error) tek bir data-state özniteliğiyle değiştirin: el.dataset.state = "loading". CSS, [data-state="loading"] seçicisini kullanır — tek öznitelik, her durum için tek CSS kuralı ve hiç sınıf yönetimi yok.
data-expanded ile Akordeon
Her akordeon öğesinde data-expanded="false" bulunur. JavaScript bunu değiştirir: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". CSS paneli gösterir veya gizler: [data-expanded="false"] .panel { display: none; }.
Sekmenin Etkin Durumu
Bir sekme kapsayıcısı etkin sekmeyi şu şekilde saklar: data-active-tab="0". JavaScript bunu tıklama sırasında günceller. CSS, [data-active-tab="0"] #panel-0 kullanarak etkin paneli seçebilir. Sekmenin tüm durumu kapsayıcı öğedeki tek bir öznitelikte tutulur.
Form Adımı Takibi
Çok adımlı formlar geçerli adımı form öğesindeki data-step içinde saklar. CSS yalnızca eşleşen adımı gösterir: form[data-step="2"] .step-2 { display: block; }. Diğer adımlar, her adımın sınıfını ayrı ayrı değiştirmenize gerek kalmadan gizli kalır.
Yükleme Durumu Kalıbı
Eşzamansız işlemler sırasında düğmeler: btn.dataset.state = "loading", etkileşimi devre dışı bırakır ve CSS aracılığıyla bir yükleme göstergesi görüntüler. İşlem tamamlandığında btn.dataset.state = "idle" ayarlayın. Tek bir öznitelik, üç ayrı sınıf değişikliğinin ve disabled özniteliği denetiminin yerini alır.
Sürükleme Kolu Kalıbı
Sürüklenebilir öğeleri data-draggable="true", bırakma hedeflerini ise data-droptarget="true" ile işaretleyin. Olay dinleyicileri, tüm sürüklenebilir öğeleri bulmak için öznitelik seçicilerini kullanır: document.querySelectorAll("[data-draggable]"). Öznitelik varlığı, davranış amacını belirtmede sınıf adlarından daha anlamlıdır.
İlerleme Göstergesi
Adım göstergesi bileşeni, her adımda data-step-status kullanır: "completed", "current", "upcoming". CSS her durumu farklı biçimde stillendirir. JavaScript, her adımın durumunu geçerli konuma göre ayarlar — JavaScript'teki bir durum nesnesiyle eşleştirmeye gerek kalmadan okunabilir bir durum sağlar.
Tema Kalıcılığı
Kullanıcının tema tercihini localStorage'da saklayın ve yükleme sırasında uygulayın: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". CSS, koyu mod için [data-theme="dark"] seçicisini kullanır — betik <head> içinde çalıştığında kalıcı ve FOUC'suz olur.
Dinamik İçerik Meta Verileri
Sunucu tarafından oluşturulan listeler, meta verileri veri özniteliklerinde içerir: data-product-id, data-price, data-category. JavaScript, istemci tarafında filtreleme, sıralama veya alışveriş sepeti işlevleri için ek API çağrıları yapmadan, zaten oluşturulmuş verilerden bunları okur.
Bilgi Kontrolü
Bir CSS sınıfı ekleyip kaldırmak yerine data-state="loading" kullanmanın avantajı nedir?
Özet
data-* öznitelikleri, gerçek dünyada güçlü kullanım kalıplarını mümkün kılar: content:attr() ile CSS araç ipuçları, birden çok sınıf geçişinin yerine data-state kullanan durum makineleri, çok adımlı form takibi, documentElement.dataset üzerinden tema kalıcılığı ve istemci tarafı işlevsellik için sunucu tarafından oluşturulan üst veriler — bunların tümü, JavaScript durumunu ayrıca eşleştirmeye gerek kalmadan kullanılabilir.
Sıkça Sorulan Sorular
“Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme” dersi ücretsiz mi?
Evet — “Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme” 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.
“Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme” dersinde ne öğreneceğim?
Araç ipuçları, etkin durumlar ve bileşen yapılandırması için data-* kullanı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 4. dersidir.
“Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme” 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
- data-* Sözdizimi ve Adlandırma Kuralları
- JavaScript'te dataset ile data-* Erişimi
- CSS Öznitelik Seçicileriyle data-* Kullanımı
- Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme