Basit bir tıklama sayacı, yapay zeka ile kod yazma denemesinde çalışan kodu sınamak için iyi bir alıştırmadır. Sayfanızda bir sayı ve iki düğme olsun: biri sayıyı bir artırır, diğeri sıfırlar. Önce bu hareketlerden sonra hangi sayıyı görmeniz gerektiğini yazın. Ardından kodu çalıştırıp sonucu beklentinizle karşılaştırın.

Bu alıştırmada düğmenin gerçekten doğru işi yaptığını anlamaya odaklanın. HTML dosyasını kaydetmeye henüz alışmadıysanız ilk sayfa alıştırmasını önce tamamlayın. Bu kez JavaScript'in tuttuğu değer ve tıklamaya verdiği tepki üzerinde çalışacaksınız.

Koddan önce beklenen sonuçları yazın

Sayacı hayalî bir masa oyunu buluşmasında denenen kutuları saymak için hazırladığınızı düşünün. İlk açılışta sayı 0 olmalı. Artır düğmesine iki kez bastığınızda 2, Sıfırla düğmesine bastığınızda tekrar 0 görmelisiniz. Sıfırlamanın ardından bir artırma daha yapınca sonuç 1 olmalı.

Bu son deneme önemli: ekrandaki sayıyı sıfırlamak, kodun içinde tutulan değeri de sıfırladığınız anlamına gelmeyebilir. Yalnızca sıfırı görmekle yetinirseniz yanlışlığı kaçırabilirsiniz.

Bu örnekte sayı kalıcı olarak saklanmayacak; sayfayı yenileyince yeniden 0'dan başlayacak. Gerçek kutu envanterinizi burada tutmayın. Yenileme davranışını bilerek böyle seçiyoruz; bir sonraki açılışta eski değeri korumak ayrı bir görevdir.

Asistana şu isteği gönderebilirsiniz:

Tek HTML dosyasında JavaScript ile bir tıklama sayacı hazırla. Başlangıç değeri 0 olsun. Artır düğmesi bir eklesin; Sıfırla düğmesi hem tutulan sayıyı hem ekrandaki değeri 0 yapsın. Sayfayı yenileyince 0'a dönsün. Dış kütüphane veya kayıt özelliği ekleme. Düğmeye basılınca hangi satırların çalıştığını açıkla.

Sayı ile ekrandaki yazıyı ayırın

Şu dosyayı düz metin düzenleyicisinde UTF-8 olarak sayac.html adıyla kaydedip tarayıcıda açabilirsiniz. Üçlü ters tırnakları dosyaya almayın.

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tıklama sayacı</title>
</head>
<body>
  <h1>Tıklama sayacı</h1>
  <p id="sonuc" aria-live="polite">0</p>
  <button id="artir" type="button">Artır</button>
  <button id="sifirla" type="button">Sıfırla</button>
  <script>
    let sayi = 0;
    const sonuc = document.querySelector("#sonuc");
    const artir = document.querySelector("#artir");
    const sifirla = document.querySelector("#sifirla");

    artir.addEventListener("click", () => {
      sayi = sayi + 1;
      sonuc.textContent = sayi;
    });

    sifirla.addEventListener("click", () => {
      sayi = 0;
      sonuc.textContent = sayi;
    });
  </script>
</body>
</html>

sayi, JavaScript'in tuttuğu sayısal değerdir. sonuc ise sayıyı gösteren paragrafı işaret eder. Artır düğmesine basınca önce sayi değişir; textContent satırı yeni değeri paragrafta gösterir. Böylece hesaplanan sayı ile ekranda okuduğunuz yazıyı ayrı ayrı takip edebilirsiniz.

addEventListener("click", ...), düğmenin tıklama olayında içerideki kodun çalışmasını sağlar. Bu terimi MDN'nin olay dinleyicisi açıklamasından kontrol edebilirsiniz. Örnekte script, düğmelerin altında durur; kod bu öğeleri aradığında HTML'de zaten bulunurlar.

Aynı hareketleri aynı sırayla deneyin

Dosyayı açın ve şu sırayı izleyin. Beklenen sayıyı okuduktan sonra hareketi yapın; yanına gördüğünüz sonucu yazın:

  1. İlk açılış: 0.
  2. Artır düğmesine bir basış: 1.
  3. İkinci basış: 2.
  4. Sıfırla düğmesine bir basış: 0.
  5. Yeniden Artır düğmesine bir basış: 1.
  6. Sayfayı yenileme: 0.

Sıfırda da Sıfırla düğmesine basın; değer 0 kalmalı. Sonra artırmayı yeniden deneyin. Düğmenin yazısı ile yaptığı işin uyuşmasına bakın. Gelişigüzel tıklamak yerine sabit bir sıra kullanırsanız sorun çıktığında aynı durumu tekrar kurabilirsiniz.

Klavyeyle de deneyin: Tab tuşuyla Artır düğmesine gelin, ardından Enter'a basın. Sayı bir artmalı. Basıştan önce odağın hangi düğmede olduğunu kontrol edin; tarayıcının düğme çevresindeki işareti burada size yol gösterir. MDN'nin tıklama olayı açıklaması, bu olayın fareyle sınırlı olmadığını anlatır. Tek basışta sayı iki artarsa gözleminizi kaydedin; hangi kod parçasının iki kez çalıştığını varsaymadan ilgili dinleyicileri inceleyin.

Bu deneme yalnızca yukarıdaki dosyanın davranışını kontrol eder. Asistanın her ürettiği kodun doğru veya güvenli olduğunu göstermez. Yeni özellik eklediğinizde ona ait beklentiyi de ayrıca yazmanız gerekir.

Sorunu hareket dizisiyle tarif edin

Diyelim ki iki artırmanın ardından Sıfırla'ya bastınız. Ekran 0 oldu, fakat sonraki artırmada 3 gördünüz. Asistana sadece "Sıfırlama çalışmıyor" demek yerine bu sırayı ve sıfırlama bölümünün kodunu gönderin.

Bu belirti, tutulan sayının sıfırlanmamış olabileceğini düşündürür. Yine de dosyayı görmeden nedeni kesinleştirmeyin. "Sıfırlama bölümünde sayi ve sonuc.textContent nasıl değişiyor?" diye sorun. Yalnızca paragrafın yazısını değiştiren bir düzeltme önerilmişse, sayısal değerin ne olduğunu ayrıca inceleyin.

Küçük düzeltmeyi uyguladıktan sonra yalnızca hatalı basışı tekrarlamayın; ilk açılıştan yenilemeye kadar bütün sırayı yeniden yürütün. Çalışan kopyayı saklayın. Böylece bir sorunu düzeltirken artırmayı bozup bozmadığınızı da görürsünüz.

Yapay Zeka'da anlamadığınız satırı Türkçe açıklatabilir ve yanıt altındaki kaynakları açabilirsiniz. Kodu dosyaya kaydetme ve sonucu tarayıcıda sınama adımlarını siz yaparsınız. Bu sayaçta sonraki denemeniz artırma adımını 2 yapmak olsun; değiştirmeden önce aynı basış sırasının yeni sonuçlarını kendiniz hesaplayın.