JavaScript Form Doğrulama ve Async Eğitimi

Eğitim Hakkında

Form doğrulamadan Promise, async/await ve Fetch API ile veri çekmeye uzanan uygulamalı akış

JavaScript: Form Validation & Async Programming Eğitimi, kullanıcı girdisini güvenle doğrulamayı ve ağ işlemlerini asenkron olarak yönetmeyi öğretir. Katılımcılar Constraint Validation API, anlık doğrulama ve erişilebilir hata gösterimini uygular. Ardından callback, Promise, async/await ve event loop mekaniğini kavrar; Fetch API ile veri çeker, hata ve yükleniyor durumlarını yönetir. Eğitim sonunda doğrulamalı ve API'ye bağlı etkileşimli bir form uygulaması geliştirilir.

Süre ve Format

4 Gün. Her gün dört modül; form doğrulama temellerinden asenkron programlamaya ve Fetch ile API tüketimine ilerlenir.

Seviye

Orta Seviye — JavaScript ile form doğrulama ve Promise, async/await tabanlı asenkron programlama

Öğrenme Metodu

Her doğrulama kuralı ve asenkron desen küçük örneklerle denenir; konular doğrulamalı ve API'ye bağlı tek bir form üzerinde uygulanır.

Neden Bu Eğitim?

✅Güvenilir doğrulama

Constraint Validation API ve özel kurallarla kullanıcı girdisini anlık, erişilebilir ve tutarlı biçimde doğrularsınız.

⏳Asenkron hakimiyet

Promise, async/await ve event loop mekaniğini kavrayarak callback karmaşasından kurtulur, okunaklı asenkron kod yazarsınız.

🌐API tüketimi

Fetch API ile veri çeker; yükleniyor, başarı ve hata durumlarını yönetip kullanıcıya doğru geri bildirim verirsiniz.

Anahtar Konular

javascript form doğrulama eğitimiform validation eğitimijavascript async eğitimipromise async await eğitimifetch api eğitimiasenkron javascript kursujavascript eğitimiön yüz geliştirme eğitimiconstraint validation apijavascript kursu

“İyi bir form hem kullanıcının girdisini güvenle doğrular hem de ağ işlemlerini akıcı yönetir; bu eğitim ikisini birlikte öğretir.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam

1

Temel JavaScript

Değişken, fonksiyon ve koşul gibi temel JavaScript bilgisi doğrulama ve asenkron örnekler için faydalıdır.

2

HTML form bilgisi

input, select ve button gibi form elemanlarına ve öznitelik kullanımına aşinalık yararlıdır.

3

DOM temeli

Eleman seçme ve olay dinleme bilgisi doğrulama geri bildirimi için faydalı olur.

4

Editör ve tarayıcı

VS Code gibi bir editör ve geliştirici araçlı güncel bir tarayıcı uygulama için gereklidir.

Eğitim İçeriği

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.

Günün hedefiKatılımcı form elemanlarının değerlerini okur, HTML yerleşik doğrulama özniteliklerini ve Constraint Validation API temellerini kullanarak ilk doğrulamaları kurar.

Modül 1

Form Elemanları ve Değer Okuma

input, textarea, select ve checkbox türleri
value, checked ve selected değerlerini okuma
form.elements ve isimle alana erişim
FormData ile form verisini toplama
submit ve input olaylarının farkı
name ve id özniteliklerinin rolü

Modül 2

HTML Yerleşik Doğrulama

required ile zorunlu alan belirtme
type email, url ve number doğrulaması
min, max, minlength ve maxlength
pattern özniteliği ve düzenli ifade
Tarayıcı varsayılan doğrulama balonu
novalidate ile yerleşik doğrulamayı kapatma

Modül 3

Constraint Validation API

checkValidity ve reportValidity yöntemleri
validity nesnesi ve ValidityState bayrakları
valueMissing, typeMismatch ve patternMismatch
setCustomValidity ile özel hata mesajı
willValidate ve doğrulama kapsamı
Alan ve form düzeyinde geçerlilik kontrolü

Modül 4

Hata Gösterimi Temelleri

invalid olayını yakalama ve kullanma
Hata mesajını alan yanında gösterme
:valid ve :invalid CSS sözde sınıfları
preventDefault ile gönderimi durdurma
Hata durumunda odağı ilgili alana taşıma
Başarılı gönderimde formu sıfırlama

Günün hedefiKatılımcı özel doğrulama kuralları yazar, anlık geri bildirim sağlar ve erişilebilir, kullanıcı dostu bir doğrulama deneyimi tasarlar.

Modül 1

Özel Doğrulama Kuralları

Düzenli ifadeyle format doğrulama
Parola gücü ve karmaşıklık kontrolü
Parola ve tekrar alanı eşleşmesi
TC kimlik ve telefon gibi alan kuralları
Koşullu zorunlu alan belirleme mantığı
Birden çok alanı birlikte doğrulama

Modül 2

Anlık ve Aşamalı Doğrulama

input olayıyla yazarken doğrulama
blur olayıyla alandan çıkınca kontrol
debounce ile sık doğrulamayı sınırlama
Dokunulmuş alan ve ilk gönderim durumu
Gerçek zamanlı geçerlilik göstergesi
Gönder butonunu geçerliliğe göre yönetme

Modül 3

Erişilebilir Hata Yönetimi

aria-invalid ile geçersiz alan işaretleme
aria-describedby ile hata mesajı bağlama
role alert ile ekran okuyucu bildirimi
Hata özetini form başına yerleştirme
Klavye ile hata alanlarına erişim
Renk dışı görsel hata göstergeleri

Modül 4

Sunucu Doğrulamasıyla Uyum

İstemci doğrulamasının sınırları ve amacı
Neden sunucu doğrulaması da gereklidir
Sunucudan dönen hataları forma yansıtma
Alan bazında sunucu hata eşlemesi
Çift gönderimi önleme ve buton kilidi
Doğrulama sonrası güvenli gönderim akışı

Günün hedefiKatılımcı JavaScript'in tek iş parçacıklı modelini, event loop'u, callback, Promise ve async/await mekaniğini kavrayarak asenkron kodu güvenle yazar.

Modül 1

Eşzamanlılık ve Event Loop

Tek iş parçacıklı yürütme ve çağrı yığını
Senkron ve asenkron kod yürütme farkı
Web API'leri ve görev kuyruğu mekaniği
Makro görev ve mikro görev kuyruğu
setTimeout ve setInterval davranışı
Bloklayan kodun arayüze etkisi

Modül 2

Callback ve Sorunları

Callback tanımı ve asenkron kullanımı
Hata önce deseni error-first callback
Callback cehennemi ve iç içe yapı
Kontrol akışının takibi zorluğu
Callback ile hata yönetimi sınırları
Callback'ten Promise'e geçiş gerekçesi

Modül 3

Promise ile Çalışma

Promise durumları pending, fulfilled, rejected
then, catch ve finally zincirleme
Promise oluşturma ve resolve, reject
Zincir içinde değer ve hata iletimi
Promise.all ve Promise.allSettled
Promise.race ve Promise.any kullanımı

Modül 4

async ve await Söz Dizimi

async fonksiyon tanımı ve dönüş değeri
await ile Promise sonucunu bekleme
try, catch ile asenkron hata yakalama
Sıralı ve paralel await stratejileri
Döngü içinde await ve ortak hatalar
async kodda okunabilirlik ve hata akışı

Günün hedefiKatılımcı Fetch API ile veri alıp gönderir, yükleniyor ve hata durumlarını yönetir ve doğrulama ile asenkron bilgisini etkileşimli bir form projesinde birleştirir.

Modül 1

Fetch API Temelleri

fetch ile GET isteği ve yanıt alma
Response nesnesi, ok ve status kontrolü
response.json ve response.text ayrıştırma
POST isteği, headers ve JSON gövdesi
AbortController ile isteği iptal etme
HTTP hata kodlarını ağ hatasından ayırma

Modül 2

Asenkron Durum Yönetimi

Yükleniyor, başarı ve hata durumları
İstek sırasında arayüzü kilitleme
Hata mesajı ve yeniden deneme seçeneği
Zaman aşımı ve yavaş ağ senaryoları
Birden çok isteği koordine etme
Veri önbellekleme ve tekrar istek önleme

Modül 3

Form ve API Entegrasyonu

Doğrulanmış form verisini Fetch ile gönderme
Sunucu yanıtına göre kullanıcıyı bilgilendirme
Sunucu doğrulama hatalarını forma eşleme
Gönderim sırasında butonu devre dışı bırakma
Başarılı gönderimde formu sıfırlama
Ağ hatasında kullanıcı dostu geri bildirim

Modül 4

Proje: Kayıt ve İletişim Formu

Proje gereksinimleri ve HTML form yapısı
Anlık ve gönderim doğrulamasını kurma
Erişilebilir hata ve başarı mesajları
Fetch ile sahte API'ye veri gönderme
Yükleniyor ve hata durumlarını yönetme
Hata ayıklama ve projenin tamamlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Form değer yönetimi

Form elemanlarının değerlerini okur, FormData ile veri toplar ve submit ile input olaylarını doğru biçimde yönetirsiniz.

✅

Yerleşik doğrulama

required, pattern ve type gibi öznitelikler ile Constraint Validation API'yi kullanarak etkili doğrulama kurarsınız.

✅

Özel kurallar

Parola eşleşmesi ve koşullu zorunluluk gibi özel doğrulama kurallarını düzenli ifade ve mantıkla yazarsınız.

✅

Erişilebilir UX

aria öznitelikleri ve anlık geri bildirimle erişilebilir, kullanıcı dostu bir doğrulama deneyimi tasarlarsınız.

✅

Event loop kavrama

Tek iş parçacıklı modeli, event loop'u ve mikro-makro görev kuyruğunu kavrayarak asenkron davranışı öngörürsünüz.

✅

Promise ustalığı

Promise zincirleme, Promise.all ve async/await ile okunaklı, hataya dayanıklı asenkron kod yazarsınız.

✅

Fetch ile API

Fetch API ile veri alıp gönderir, HTTP hatalarını yönetir ve yükleniyor ile hata durumlarını kullanıcıya yansıtırsınız.

✅

Entegre form uygulaması

Doğrulama ve asenkron bilgisini birleştirerek API'ye bağlı, doğrulamalı etkileşimli bir form uygulaması geliştirirsiniz.

Kimler İçin Uygundur?

Formlarda güvenilir istemci tarafı doğrulama kurmak isteyen ön yüz geliştiriciler
callback
Promise karmaşasını aşmak isteyen JavaScript geliştiricileri ve Fetch ile API tüketmeyi öğrenmek isteyenler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Formlarda güvenilir istemci tarafı doğrulama kurmak isteyen ön yüz geliştiriciler, callback ve Promise karmaşasını aşmak isteyen JavaScript geliştiricileri ve Fetch ile API tüketmeyi öğrenmek isteyenler için uygundur. Temel JavaScript ve HTML form bilgisi faydalıdır.

İstemci doğrulaması sunucu doğrulamasının yerini tutar mı?

Hayır. İstemci doğrulaması kullanıcı deneyimini iyileştirir ve hataları erken yakalar, ancak güvenlik için sunucu doğrulaması zorunludur. Eğitimde ikisinin nasıl birlikte çalıştığı ve sunucu hatalarının forma nasıl yansıtılacağı işlenir.

async/await ve Promise konuları ayrıntılı mı işleniyor?

Evet. Event loop, görev kuyruğu, Promise durumları ve zincirleme, Promise.all ile async/await ayrıntılı örneklerle işlenir. try-catch ile asenkron hata yönetimi ve sıralı-paralel bekleme stratejileri uygulamalı gösterilir.

Eğitim online olarak alınabilir mi?

Evet, eğitim hem online hem yüz yüze verilebilir ve kurumsal taleplere göre uyarlanır. Katılımcılar örnekleri editör ve tarayıcı geliştirici araçlarıyla kendileri çalıştırır.

Eğitim sonunda sertifika veriliyor mu?

Program tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika, katılımcının form doğrulama ve asenkron programlamayı uygulamalı kullandığını belgeler.

Sertifikalandırma

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.

Örnek Sertifika

JAVASCRIPT: FORM VALIDATION & ASYNC PROGRAMMING EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Form Elemanları ve Değer Okuma

HTML Yerleşik Doğrulama

Constraint Validation API

Hata Gösterimi Temelleri

Özel Doğrulama Kuralları

Anlık ve Aşamalı Doğrulama

Erişilebilir Hata Yönetimi

Sunucu Doğrulamasıyla Uyum

Eşzamanlılık ve Event Loop

Callback ve Sorunları

Promise ile Çalışma

async ve await Söz Dizimi

Fetch API Temelleri

Asenkron Durum Yönetimi

Form ve API Entegrasyonu

Proje: Kayıt ve İletişim Formu

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Node.js & Node.js Tools in Visual Studio Eğitimi

Node.js ile Mikroservis Geliştirme Eğitimi

Node.js için JavaScript Geliştiricileri Eğitimi

Node.js Uygulama Geliştirme Eğitimi

Node.js, External Modules, & Operators Eğitimi

Node.js, Lists, & Form Views Eğitimi