DOM ve Olaylar nedir?

Bu konuda neler öğreneceksin?

• DOM ağacında eleman seçme ve sınıf-metin güncelleme işlemlerini uygular.
• Olay dinleyicilerini bağlayıp preventDefault ile varsayılan davranışı yönetir.
• Olay delegation yaklaşımıyla dinamik elemanlarda olay yakalar.
• fetch ile GET-POST isteklerini async-await akışında gönderir ve durum kodunu yorumlar.
• Kullanıcı verisinin doğrudan HTML'e yazılmaması gerektiğini güvenlik açısından açıklar.

Anahtar fikirler

• querySelector tek eleman, querySelectorAll NodeList döndürür.
• Eklenen her dinleyici bellek tutar; delegation ile tek dinleyici çok satırı kapsar.
• Kullanıcı metni innerHTML ile gömülürse DOM enjeksiyonu oluşur.
• Sunucu 404 döndüğünde fetch reddolmaz; response.ok denetimi şarttır.
• submit olayında doğrulama sonrası preventDefault çağrılmalıdır.
• data- nitelikleri, hangi satırda işlem yapıldığını belirlemenin güvenilir yoludur.

Konunun özeti

response.ok denetimi ve textContent kullanımı, hata yönetimi ile DOM enjeksiyonuna karşı temel güvenlik alışkanlıklarıdır.

Sık yapılan hatalar

• Formda preventDefault çağırmamak: Sayfa yenilenir, girilen değerler kaybolur ve gelen istek kaybolur.
• Yeni eklenen satıra ayrı ayrı dinleyici bağlamak: Eklenen elemanlar kapsanmaz, dinleyiciler birikir; delegation kullanılmalıdır.
• fetch yanıtını kontrol etmeden json çağırmak: 404 veya 500 gövdesi beklenen JSON olmayabilir, çözümleme hatası çıkar.

İlgili konular

• Bulut Bilişim ve Sanallaştırma
• Yapay Zekâ Temelleri
• JS Temelleri
• Hata Ayıklama ve Profil Analizi
• Web Güvenliği ve SQL Enjeksiyonu
• Veritabanı ve Sorgu Optimizasyonu