Web'e özel: butona tıklama

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

DOM, tarayıcının HTML belgesinden oluşturduğu programlanabilir yapıdır. querySelector uygun öğeyi bulur; bulamazsa null döndürür. Düğmenin kimliği ile seçicinin eşleşmesi gerekir. Kodu öğe oluşturulduktan sonra çalıştırmak için bu küçük örnekte script bölümünü düğmenin altına yerleştiriyoruz.

Bir olay dinleyicisi, tıklama gerçekleştiğinde ne yapılacağını tanımlar. Fonksiyonu dinleyiciye vermek ile o anda çağırmak aynı şey değildir. sayi, tıklamalar arasında saklanan durumdur; her olayda bir artar ve textContent ile arayüze yansıtılır. Metin içeriği için innerHTML kullanmak gerekmez.

Kullanıcı etkileşimini yalnızca fareye göre düşünme. Gerçek button öğesi klavyeyle de kullanılabilir ve doğru temel semantiğe sahiptir. Düğmeyi Tab ile seçip Enter veya Space ile dene. Bir div üzerine tıklama koymak aynı davranışları otomatik sağlamaz.

İlk örneği oku ve dene

<button id="buton">Bana tıkla</button>

<script>
  document.getElementById("buton").addEventListener("click", () => {
    alert("Merhaba! 👋");
  });
</script>

Butona tıklayınca ekranda "Merhaba! 👋" yazan bir uyarı kutusu açılır.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. querySelector doğru id ile tek düğmeyi seçer.
2. sayi başlangıç durumudur; dinleyicinin dışında tutulur.
3. Olay gerçekleşince sayaç artar.
4. textContent yeni durumu düğme metnine güvenli biçimde yansıtır.

<button id="sayac">0 kez tıklandı</button>
<script>
const dugme = document.querySelector("#sayac");
let sayi = 0;
dugme.addEventListener("click", () => {
  sayi += 1;
  dugme.textContent = sayi + " kez tıklandı";
});
</script>

Başlangıçta 0; her tıklamada 1, 2, 3 kez tıklandı.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Düğmeye üç kez bas; değerleri gözlemle.
2. Bir sıfırlama düğmesi ekle ve aynı durumu 0 yap.
3. Fare kullanmadan her iki düğmeyi de çalıştır; odak göstergesini kaybetme.

<button id="artir">Artır</button><button id="sifirla">Sıfırla</button><p id="deger">0</p>
<script>
let sayi = 0;
const sonuc = document.querySelector("#deger");
document.querySelector("#artir").addEventListener("click", () => { sonuc.textContent = ++sayi; });
document.querySelector("#sifirla").addEventListener("click", () => { sayi = 0; sonuc.textContent = sayi; });
</script>

Artır sayacı artırır; Sıfırla hem durumu hem görünümü 0 yapar.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Seçici yanlışsa null üzerinde metot çağırırsın; id ve çalışma sırasını kontrol et.
2. Sayacı dinleyicinin içinde tekrar 0 yaparsan her basışta 1 görürsün; durumu dışarıda tut.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

Sayaç neden olay fonksiyonunun dışında tanımlanır?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.