JavaScript: DOM ve fetch
Sayfayı değiştirmek, olaylar ve sunucuyla konuşmak.
Seviye 201 · 19 ders · 15 pratik lab
Dersler
DOM ve olaylar
- DOM'da gezinmek ve olaylar: Sayfadaki öğeleri (DOM) bulup aralarında gezmeyi ve tıklama gibi olaylara tepki verecek kod yazmayı öğrenirsin.
- Olay yetkilendirme (event delegation): Tek bir dinleyiciyle yüzlerce öğenin olayını yönetir, sonradan eklenen öğeleri de kapsarsın.
- DOM’a güvenli ekleme: textContent ve createElement: Kullanıcı verisini sayfaya innerHTML yerine textContent ve createElement ile ekleyerek betik enjeksiyonunu önlersin.
- Form doğrulama ve parola gücü: Form girdilerini tarayıcıda denetlemeyi, basit bir parola gücü göstergesi yapmayı ve tarayıcı denetiminin tek başına yetmediğini anlarsın.
- FormData ile form göndermek: Formu sayfayı yenilemeden fetch ile gönderir, gönderilen veriyi sunucuda yine doğrulaman gerektiğini bilirsin.
- Zamanlayıcılar ve debounce: setTimeout ve setInterval kullanır, sık tetiklenen olayları debounce ile yavaşlatırsın.
- Kısa görev: yazdıkça süzülen liste
Dilin araçları
- Kapanışlar ve ileri fonksiyonlar: İçteki bir fonksiyonun dıştaki değişkenleri hatırlamasını (kapanış) ve fonksiyonları başka fonksiyonlara vermeyi öğrenirsin.
- Dizi ve dizgi teknikleri: Dizilerde ve metinlerde süzme, dönüştürme ve arama gibi sık kullanılan yöntemleri rahatça kullanmayı öğrenirsin.
- ES6 sınıfları: Sınıf, kurucu ve yöntemlerle ilişkili veri ve davranışı tek bir yapıda toplarsın.
- ES6 modülleri: import ve export: Kodu dosyalara bölüp import ve export ile birbirine bağlarsın.
- URL ayrıştırma ve HTML kaçışı: Bir adresi parçalarına ayırmayı ve metni HTML'e koymadan önce kaçışlamanın sayfayı kötü niyetli girdilerden nasıl koruduğunu anlarsın.
- Kısa görev: tek dosyalık kodu modüllere böl
Sunucuyla konuşmak
- Promise ve async/await: Zaman alan işleri sırayla yazılmış gibi okunan async/await ile yönetirsin.
- fetch ile sunucudan veri almak: fetch ile sunucudan JSON veri çekip sayfada göstermeyi ve istek başarısız olduğunda ne yapılacağını öğrenirsin.
- fetch’te hata ve zaman aşımı yönetimi: HTTP hata kodlarını, ağ kesintisini ve zaman aşımını ayırt eder, AbortController ile isteği iptal edersin.
- Aynı köken ilkesi ve CORS: Tarayıcının başka siteden veri okumasını neden sınırladığını ve CORS başlıklarının neyi gevşettiğini açıklarsın.
- localStorage ile veri saklamak: localStorage ile tarayıcıda küçük veriler saklamayı ve oraya parola gibi hassas bilgi konmaması gerektiğini anlarsın.
- Bitirme görevi: sunucudan beslenen bir sayfa: Kurgusal bir şirkette sunucudan veri çekip güvenle sayfaya yazan, form ve olaylarla çalışan küçük bir sayfa yaparsın.
Pratik lablar
- Silme butonlarını tek dinleyiciyle yönet: Elli satırlık bir görev listesinde her butona ayrı dinleyici yerine olay devretme kullan.
- Sonradan eklenen satırları da çalıştır: Yeni eklenen ürün satırlarındaki "Düzenle" butonu çalışmıyor; dinleyiciyi kapsayıcıya taşıyarak düzelt.
- Şehir arama kutusunu debounce ile hafiflet: Her tuşta istek atan bir şehir arama kutusunu debounce ile yavaşlat ve kaç istek kurtardığını say.
- Yorumu innerHTML kullanmadan ekle: Ziyaretçi yorumlarını innerHTML yerine createElement ve textContent ile listeye ekle.
- Telefon alanını yazarken biçimlendir: Kullanıcı yazdıkça boşlukları kendiliğinden ekleyen ve imleci kaçırmayan bir telefon alanı kodla.
- Formu sayfa yenilemeden FormData ile gönder: Bir bülten kayıt formunu FormData ile gönderip başarı ve hata durumunda farklı mesaj göster.
- Para birimi yardımcılarını modülde paylaş: İki sayfada kopyalanmış para biçimlendirme fonksiyonlarını export eden ortak bir modül yazıp iki sayfaya da import et.
- Sepeti bir sınıfla modelle: Ekle, çıkar ve toplam yöntemleri olan bir Sepet sınıfı yazıp dağınık fonksiyonların yerine koy.
- Kapanışla tek seferlik kupon yaz: Bir kupon fonksiyonunun yalnızca bir kez uygulanmasını kapanışla garanti et ve ikinci denemeyi reddet.
- Hava durumunu fetch ile göster: Lab sunucusundaki sahte hava durumu uç noktasından veriyi çekip şehir kartına yaz.
- Fetch'e zaman aşımı ve hata mesajı ekle: Bazen gecikip bazen 500 dönen bir uç nokta için fetch çağrısına zaman aşımı ve anlaşılır hata ekle.
- Sayfalı ürünleri sırasıyla yükle: "Daha fazla yükle" ile sayfa sayfa gelen ürünleri sırasını bozmadan ve hiçbirini iki kez eklemeden göster.
- Tema tercihini localStorage'da sakla: Açık/koyu tema seçimini localStorage'da tutup sayfa yenilenince geri yükle.
- Bozuk kayıtlı veriye dayanıklı ol: localStorage'daki sepet verisi bozulunca sayfa açılmıyor; okumayı güvenli yapıp varsayılana dön.
- CORS hatasının nedenini bulup düzelt: Başka porttaki API'yi çağıran sayfanın CORS hatasını ağ panelinden çözümle ve sunucuya doğru başlığı ekle.
Kurs hakkında
Sayfayı değiştirmek, olaylar ve sunucuyla konuşmak.
Ne öğreneceksin
- DOM ve olaylar
- Dilin araçları
- Sunucuyla konuşmak
Ön koşullar
Aynı yolun 101 düzeyindeki kurslarını bitirmiş olmak ya da o konuları biliyor olmak yeterlidir.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 201 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.