JavaScript
Görev ekleme
addEventListener ve click olayı ile input değerini alıp görev eklersin.
Giriş değerini okumak
Kullanıcının yazdığı görev metnini almak için input.value özelliğini kullanırız. Bu özellik hem okur hem yazar: atama yaparak giriş alanını temizleyebiliriz (input.value = "").
Bir addTask fonksiyonu tanımlayacağız. Fonksiyon önce input.value ile metni okur; boşsa hiçbir şey yapmaz. Boş değilse yeni bir li öğesi oluşturur, metni ayarlar ve listeye ekler. Son olarak giriş alanını temizler.
Bu fonksiyonu addButton.addEventListener("click", addTask) ile düğmeye bağlayacağız.
Düğmeye tıklama bağlamak
Fonksiyonu yazdıktan sonra onu düğmenin click olayına bağlamalıyız. addEventListener metodu bir olay türü ve bir işlev alır. addButton.addEventListener("click", addTask) çağrısı her tıklamada addTask fonksiyonunu çalıştırır.
Fonksiyonu doğrudan çağırmıyoruz (parantez olmadan addTask yazıyoruz); çağırma işini tarayıcı yapar. Bu, callback düzenidir: bir fonksiyonu başka bir yere çağırması için bırakırız.
Boş metin eklememek için if (text === "") return; ile erken çıkış yapacağız.
Uygulama Görev ekleme işlevini bağla
Önceki dersin çözümünün üzerine devam et. Bir addTask fonksiyonu yaz: input.value ile metni oku, boşsa çık, değilse createElement("li") ile öğe oluştur, textContent ata, list.appendChild ile ekle ve input.value'yu temizle. Sonra addButton.addEventListener("click", addTask) ile düğmeye bağla.
Örnek çözümü göster
function addTask() {...} yaz, içine input.value oku, boşsa çık, li oluştur ve list.appendChild ekle, sonra input.value'yu temizle. En son addButton.addEventListener('click', addTask) çağrısı ekle.
Örnek çözüm:
// Yapılacaklar uygulaması
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Yapılacaklar";
app.appendChild(title);
const input = document.createElement("input");
input.placeholder = "Yeni görev";
const addButton = document.createElement("button");
addButton.textContent = "Ekle";
const list = document.createElement("ul");
app.appendChild(input);
app.appendChild(addButton);
app.appendChild(list);
function addTask() {
const text = input.value;
if (text === "") return;
const item = document.createElement("li");
item.textContent = text;
list.appendChild(item);
input.value = "";
}
addButton.addEventListener("click", addTask);
Kendini test et
-
input değerini oku
const text = ____;
Cevabı göster
const text = input.value;
-
addButton.addEventListener('click', addTask) çağrısında addTask neden parantezsiz yazılır?
addButton.addEventListener("click", addTask);
- Çünkü fonksiyonun kendisini tarayıcının çağırması istenir
- Çünkü parantez yazmak sözdizimi hatasıdır
- Çünkü addTask bir değişken değil fonksiyondur
- Çünkü tıklama sayısı önemli değildir
Cevabı göster
Çünkü fonksiyonun kendisini tarayıcının çağırması istenir — Doğru! Parantezsiz yazınca fonksiyonu tarayıcı çağırır.
-
addTask adımlarını eşleştir
- input.value
- Metni oku
- return
- Boşsa çık
- createElement("li")
- Öğe oluştur
- list.appendChild
- Listeye ekle
Sıradaki ders: Görev tamamlama ve silme - DOM
