Veriyi HTML arayüzüne bağla
HTML Controls, Bindings, & Collections Eğitimi, HTML kontrollerini bir veri modeline bağlamayı ve koleksiyonları dinamik listelere dönüştürmeyi öğretir.
HTML form kontrollerinden veri bağlamaya ve koleksiyonları listelemeye kadar
HTML Controls, Bindings, & Collections Eğitimi, web arayüzlerinde HTML kontrollerini bir veri modeline bağlamayı ve koleksiyonları dinamik listelere dönüştürmeyi öğretir. Katılımcılar form kontrollerini ve durumlarını, tek ve iki yönlü veri bağlamayı, hesaplanmış değerleri uygular. Ardından koleksiyonları şablonlarla listeye, tabloya ve ızgaraya bağlar; filtreleme, sıralama ve sanallaştırmayı ele alır. Program bağlama kütüphaneleri ile Web Components yaklaşımını kıyaslar.
3 Gün. Her gün dört modül; her bağlama deseni küçük bir arayüz üzerinde kurularak veri değiştikçe arayüzün nasıl güncellendiği canlı gösterilir.
Orta Seviye — HTML kontrolleri, veri bağlama (data binding) ve koleksiyon listelerini arayüze bağlama
Aynı veri modeli farklı kontrol ve koleksiyon desenlerine bağlanır; model değiştikçe arayüzün tepkisi adım adım gözlemlenir.
Arayüzü doğrudan veri modeline bağlayarak elle DOM güncellemesini azaltır, daha az hatayla dinamik sayfalar kurarsınız.
Dizi ve listeleri şablonlarla tablo, liste ve ızgaraya bağlayarak filtreleme ve sıralamayı temiz biçimde yönetirsiniz.
Durum değiştiğinde yalnızca etkilenen kısmı güncelleyen tepkisel bağlamayla akıcı ve verimli arayüzler üretirsiniz.
Eğitime başlamadan önce önerilen bilgi düzeyi
Giriş alanları, select ve form yapısı gibi temel HTML kontrollerine aşinalık gerekir.
Dizi, nesne, fonksiyon ve olay kavramları bağlama örneklerini anlamak için önemlidir.
querySelector ve olay dinleyici gibi temel DOM işlemlerini bilmek süreci kolaylaştırır.
Tarayıcı konsolu ve öğe denetçisini kullanabilmek bağlama davranışını izlemeyi sağlar.
Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.
Program sonunda katılımcılar:
HTML form kontrollerinin değer, durum ve olaylarını yöneterek kullanıcı girdisini tutarlı bir modele dönüştürebilirsiniz.
Web Components ve Shadow DOM ile kapsüllenmiş, yeniden kullanılabilir ve erişilebilir özel kontroller tasarlarsınız.
Modelden arayüze tek yönlü akışla metin, öznitelik, stil ve koşullu gösterimi veriye bağlı biçimde kurarsınız.
Kontrol ile model arasında çift yönlü senkron kurarak form verisini otomatik güncel tutmayı öğrenirsiniz.
Bağımlılık izlemeyle türetilmiş ve hesaplanmış değerleri tanımlayarak arayüzü otomatik güncel tutarsınız.
Dizileri şablonlarla liste, tablo ve ızgaraya bağlayarak dinamik ve veri odaklı görünümler oluşturabilirsiniz.
Canlı arama, çok ölçütlü filtre ve sıralamayı türetilmiş listelerle temiz ve performanslı biçimde uygularsınız.
Diff, sanallaştırma ve sonsuz kaydırma ile büyük koleksiyonları bellek dostu ve akıcı biçimde gösterirsiniz.
Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.
Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.
Girdi doğrulama, güvenli DOM, XSS önleme ve dayanıklı hata yönetimiyle savunmacı JavaScript ve HTML kodu yazmayı öğreten uygulamalı eğitim.
Detayları Gör →
Katı mod, basit girdi kontrolü, temel hata yakalama ve güvenli DOM alışkanlıklarıyla savunmacı programlamaya giriş yapan temel seviye eğitim.
Detayları Gör →
try/catch, özel hatalar, Promise ve async/await hata yönetimi, global yakalama ve izleme ile dayanıklı JavaScript yazmayı öğreten eğitim.
Detayları Gör →
Less değişkenleri, mixin, iç içe yazım, guard, fonksiyon ve derleme hattıyla ölçeklenebilir ve sürdürülebilir CSS yazmayı öğreten uygulamalı eğitim.
Detayları Gör →
Sass değişkeni, mixin, @extend, @if ve @each kontrol yapıları, map ve @use modül sistemiyle modüler CSS yazmayı öğreten uygulamalı eğitim.
Detayları Gör →
DOM, olaylar, form doğrulama, fetch ve modüllerle çerçeve kullanmadan etkileşimli web uygulamaları kurmayı öğreten uygulamalı JavaScript eğitimi.
Detayları Gör →