Sayaç

Sayaç (Counter) Nedir?

Basit bir sayaç, bir değeri artırma, azaltma ve sıfırlama işlemlerini yönetir. Bu, programlamada en temel kavramlardan biridir.

1. Değişken Tanımlama

Sayacın mevcut değerini tutmak için bir değişken kullanılır:

let count = 0;  // Başlangıç değeri 0

2. Artırma (Increment) İşlemi

Değeri 1 artırmak için ++ operatörü kullanılır:

function increase() {
  count++;  // count = count + 1 ile aynı
  value.textContent = count;  // Ekranda güncelle
}

// Alternatif yöntemler:
count = count + 1;   // Açık yöntem
count += 1;          // Kısa yöntem
count++;             // En kısa yöntem (post-increment)

3. Azaltma (Decrement) İşlemi

Değeri 1 azaltmak için -- operatörü kullanılır:

function decrease() {
  count--;  // count = count - 1 ile aynı
  value.textContent = count;
}

// Alternatif yöntemler:
count = count - 1;   // Açık yöntem
count -= 1;          // Kısa yöntem
count--;             // En kısa yöntem (post-decrement)

4. Sıfırlama (Reset) İşlemi

Değeri başlangıç değerine döndürmek:

function reset() {
  count = 0;  // Değeri sıfırla
  value.textContent = count;
}

5. Event Listener'lar

Butonlara tıklandığında fonksiyonları çağırmak için event listener eklenir:

increaseBtn.addEventListener('click', function () {
  count++;
  value.textContent = count;
});

// Arrow function kısa versiyonu:
increaseBtn.addEventListener('click', () => {
  count++;
  value.textContent = count;
});

6. DOM Manipülasyonu

Sayacın değerini ekranda göstermek için DOM'u güncelle:

// HTML'deki span elementini bul
const value = document.getElementById('value');

// İçeriğini güncelle
value.textContent = count;  // Sadece metin
value.innerHTML = count;    // HTML içeriği (bu durumda aynı)

Önemli Noktalar

• State Yönetimi: Değişken, uygulamanın durumunu (state) tutar
• Reactive UI: Her değişiklikte ekran güncellenir
• Operatör Önceliği: ++ ve -- önce veya sonra kullanılabilir (pre/post increment)
• Scope: let ile tanımlanan değişken, fonksiyonlar arasında paylaşılır

Gelişmiş Örnekler

Adım Boyutu ile Artırma:

const step = 5;  // Her seferinde 5 artır
count += step;    // count = count + 5

Maksimum/Minimum Değer Sınırı:

const MAX = 100;
const MIN = 0;

function increase() {
  if (count < MAX) {
    count++;
  }
}

function decrease() {
  if (count > MIN) {
    count--;
  }
}