Yorum formu iskeleti

addEventListener ve DOM ile yorum formunu oluşturursun.

Form iskeleti

Yorum formunda bir textarea ve bir submit butonu var. JavaScript ile formun submit olayını dinleyip varsayılan davranışı engelleyeceğiz; böylece sayfa yeniden yüklenmeden yorumu yakalayabiliriz.

addEventListener("submit", ...) form gönderildiğinde çalışır. event.preventDefault() sayfanın yeniden yüklenmesini durdurur ve işleyicinin kendi mantığını çalıştırmasına izin verir.

İşleyici içinde commentForm.querySelector("#commentText") ile textarea'yı bulup .value ile kullanıcının yazdığı metni okuruz.

Input değerini okuma

Form işleyici içinde querySelector ile textarea öğesini seçeriz. .value özelliği kullanıcının yazdığı metni verir; boş bırakılırsa boş dize döner.

Örnek: const text = commentInput.value; satırı ile metni bir değişkene alırız. Bu değişkeni sonra güvenli render işlevine aktaracağız.

Okunan metni renderComment işlevine göndereceğiz; bu işlevi sonraki derslerde yazacağız ve metni güvenli şekilde ekrana koyacak.

Uygulama Submit dinleyici ekle

commentForm için submit olayını dinleyen bir işleyici ekle. İşleyici içinde event.preventDefault() çağır, #commentText input'unu bul, .value ile metni oku ve renderComment(text) çağır.

Örnek çözümü göster

commentForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const commentInput = commentForm.querySelector("#commentText");
  const text = commentInput.value;
  renderComment(text);
});

Kendini test et

Olay dinleyici ekle

commentForm.addEventListener("____", (event) => { event.preventDefault(); });

Cevabı göster

commentForm.addEventListener("submit", (event) => { event.preventDefault(); });

preventDefault ne yapar?
```
event.preventDefault();
```
- Olayın varsayılan davranışını engeller
- Sayfayı yeniden yükler
- Formu temizler
- Olayı tetikler
Cevabı göster

Olayın varsayılan davranışını engeller — Doğru! preventDefault varsayılan davranışı (sayfa yenileme) engeller.
Form yöntemlerini eşleştir

addEventListener

Olay dinleyici ekle
preventDefault

Varsayılan davranışı engelle
querySelector

Öğe seç
value

Input metnini al

Sıradaki ders: XSS-korunmalı render

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler