Javascript İle Dinamik Bir Karakter Sayacı Uygulaması Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Uygulamamızı geliştirmek için herhangi bir karmaşık kurulum yapmanıza gerek yoktur. Modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve herhangi bir kod editörü (VS Code önerilir) yeterlidir. Projenizi oluştururken şu dosya yapısını kullanmanızı tavsiye ederim:

• index.html: Sayfa iskeletini oluşturacak dosya.
• style.css: Görsel tasarımı yönetecek dosya.
• script.js: Karakter sayma mantığını çalıştıracak dosya.

JavaScript kodlarınızın tarayıcıda doğru çalışması için dosyanızı HTML içinde etiketi ile çağırmayı unutmayın. defer özniteliği, scriptin HTML yüklendikten sonra çalışmasını sağlayarak performans sorunlarını önler.

Adım 1: HTML İskeletini Oluşturma

Karakter sayacı için bir textarea (çok satırlı metin girişi) ve bu sayacı gösterecek bir span veya div etiketi gereklidir. Aşağıdaki kod, uygulamanın temel yapısını temsil eder.

  Mesajınız:
  
  

    0 / 200 karakter
  

Burada maxlength özniteliği, tarayıcı seviyesinde bir güvenlik katmanı sağlar. Ancak JavaScript ile dinamik geri bildirim vermek, kullanıcıya sınırın dolduğunu önceden bildirmek için çok daha kullanıcı dostu bir yöntemdir.

Adım 2: JavaScript ile Etkileşim Ekleme

Şimdi input olayını dinleyerek kullanıcının her tuş vuruşunda karakter sayısını güncelleyen fonksiyonu yazalım. addEventListener metodu, belirli bir olay gerçekleştiğinde (bu durumda 'input') çalışacak kod bloğunu tetikler.

const textarea = document.getElementById('user-input');
const charCount = document.getElementById('char-count');

textarea.addEventListener('input', () => {
  const currentLength = textarea.value.length;
  charCount.textContent = currentLength;
});

Bu kod bloğu, kullanıcının metin alanına girdiği her harfi anlık olarak yakalar ve textContent özelliği ile ekrandaki sayıyı günceller. input olayı, metin kopyalayıp yapıştırma durumlarında da tetiklendiği için keydown olayından daha güvenilirdir.

Adım 3: Sınır Aşıldığında Görsel Geri Bildirim

Kullanıcı belirlenen sınırı (örneğin 200 karakter) geçtiğinde veya sınıra yaklaştığında onu uyarmak iyi bir pratiktir. Aşağıdaki örnekte, karakter sayısı arttıkça rengin değişmesini sağlayan mantığı görebilirsiniz.

textarea.addEventListener('input', () => {
  const maxLength = 200;
  const currentLength = textarea.value.length;
  
  charCount.textContent = currentLength;

  if (currentLength >= maxLength) {
    charCount.style.color = 'red';
  } else {
    charCount.style.color = 'black';
  }
});

Bu mantık, kullanıcıya görsel bir "hata" veya "sınır" algısı kazandırır. if yapısı ile karakter sayısı 200'e ulaştığında sayaç kırmızıya döner, aksi takdirde siyah kalır.

Adım 4: Karşılaştırmalı Yöntemler ve Performans

Karakter sayacı uygulamalarında farklı yaklaşımlar mevcuttur. Aşağıdaki tablo, bu yöntemlerin avantaj ve dezavantajlarını özetlemektedir.

Adım 5: Güvenli Kodlama ve Hata Yönetimi

JavaScript ile DOM manipülasyonu yaparken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız. Kullanıcıdan gelen veriyi doğrudan innerHTML ile ekrana basmak yerine textContent kullanmak, tarayıcının veriyi metin olarak işlemesini sağlar ve zararlı scriptlerin çalışmasını engeller.

Güvenlik Uyarısı: Kullanıcı girişlerini her zaman sunucu tarafında (Node.js, PHP vb.) tekrar doğrulayın. İstemci tarafındaki (JavaScript) kontroller sadece kullanıcı deneyimini artırmak içindir, güvenlik önlemi olarak kabul edilemez.

// Güvenli kullanım örneği: textContent kullanımı
const displayElement = document.getElementById('display');
const userInput = textarea.value;

// ASLA YAPILMAMALI: displayElement.innerHTML = userInput;
// HER ZAMAN YAPILMALI: 
displayElement.textContent = userInput;

Adım 6: Gelişmiş Özellik: Kalan Karakter Sayısı

Kullanıcıya kaç karakteri kaldığını göstermek, "yazdığı" karakteri göstermekten daha bilgilendirici olabilir. İşte bu mantığı uygulayan güncellenmiş kod örneği:

textarea.addEventListener('input', () => {
  const maxLength = 200;
  const remaining = maxLength - textarea.value.length;
  
  charCount.textContent = remaining;
  
  if (remaining < 0) {
    charCount.textContent = 0;
    textarea.value = textarea.value.substring(0, maxLength);
  }
});

Bu kod, substring metodu ile kullanıcı sınırı aşsa bile metni otomatik olarak kırpar. Bu, formun veri tabanına gönderilirken hata vermesini engellemek için proaktif bir çözümdür.

Sıkça Sorulan Sorular

Karakter sayacı neden mobil cihazlarda düzgün çalışmıyor?

Mobil tarayıcılarda klavye tahminleri (autocorrect) bazen input olayını tetiklemeyebilir. Ancak güncel modern tarayıcılar bu konuda oldukça kararlıdır. Sorun yaşıyorsanız change olayını da dinleyicilere ekleyebilirsiniz.

Karakter sayısı yerine kelime sayısını nasıl sayarım?

Metni boşluklara göre bölen split(' ') metodunu kullanarak dizi uzunluğunu alabilirsiniz. Ancak boşlukları temizlemek için trim() metodunu kullanmayı unutmayın.

Bu sayaç emoji sayısını nasıl hesaplar?

JavaScript'in length özelliği bazı karmaşık emojileri iki karakter olarak sayabilir. Daha hassas bir sayım için Array.from(textarea.value).length yöntemini kullanabilirsiniz.

Debounce nedir, neden kullanmalıyım?

Debounce, bir fonksiyonun çok sık çağrılmasını engelleyen bir tekniktir. Eğer karakter sayacınızın yanında ağır bir işlem (örneğin API isteği) yapacaksanız, debounce kullanarak işlem yükünü azaltabilirsiniz.

CSS ile sayaç rengini nasıl animasyonlu yaparım?

CSS transition özelliğini kullanarak color değişimini yumuşatabilirsiniz. Bu, kullanıcıya daha profesyonel bir his verir.

Karakter Sayacını Bir İlerleme Çubuğu (Progress Bar) İle Görselleştirme

Kullanıcı deneyimini bir üst seviyeye taşımak için metin kutusunun altında basit bir sayı yerine, doluluk oranını gösteren dinamik bir çubuk kullanabilirsiniz. Bu yöntem, kullanıcının sınırına ne kadar yaklaştığını görsel olarak çok daha hızlı algılamasını sağlar.

İlerleme Çubuğu İçin HTML ve CSS Yapısı

Öncelikle, ilerleme çubuğunu temsil edecek bir kapsayıcı ve iç dolgu alanı oluşturmamız gerekir.

  




.progress-container {
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #4caf50;
  transition: width 0.3s ease, background-color 0.3s ease;
}

JavaScript ile Dinamik Genişlik Hesaplama

JavaScript tarafında, mevcut karakter sayısını maksimum sınıra bölerek yüzde değerini hesaplamalı ve bu değeri çubuğun width stiline atamalıyız.

const textarea = document.getElementById('myTextarea');
const progressBar = document.getElementById('progress-bar');
const maxLength = 200;

textarea.addEventListener('input', () => {
  const currentLength = textarea.value.length;
  const percentage = (currentLength / maxLength) * 100;
  
  progressBar.style.width = Math.min(percentage, 100) + '%';
  
  // Sınır yaklaştıkça çubuğun rengini değiştir
  if (percentage > 90) {
    progressBar.style.backgroundColor = '#f44336';
  } else {
    progressBar.style.backgroundColor = '#4caf50';
  }
});

Karakter Sayacı İçin Birim Testi (Unit Testing) Yaklaşımı

Uygulamanızın farklı tarayıcılarda veya uç durumlarda (edge cases) doğru çalıştığından emin olmak için basit bir test senaryosu oluşturmak, kodunuzun kalitesini artırır. Özellikle kopyala-yapıştır işlemleri veya çok hızlı yazma durumlarında sayacın senkronize kalması kritiktir.

Test Senaryoları Tablosu

Programatik değer atamalarında input olayı tetiklenmeyebilir. Bu durumda, değeri manuel olarak atadıktan sonra dispatchEvent kullanarak sayacı tetiklemeyi unutmayın:

function updateTextareaValue(newValue) {
  textarea.value = newValue;
  const event = new Event('input', { bubbles: true });
  textarea.dispatchEvent(event);
}

Bu yaklaşım, uygulamanızın sadece kullanıcı etkileşimiyle değil, arka planda çalışan diğer scriptlerle de uyumlu bir şekilde çalışmasını sağlar.

Sonuç

JavaScript ile dinamik bir karakter sayacı uygulaması yapmak, form etkileşimlerini güçlendirmek için harika bir başlangıçtır. Bu rehberde öğrendiğiniz input dinleyicisi, textContent kullanımı ve sınır yönetimi, daha karmaşık web projelerinizin temelini oluşturacaktır. Bir sonraki adım olarak, bu sayacı bir "Word Count" (kelime sayacı) özelliğine dönüştürmeyi veya sayaç sıfıra yaklaştığında bir ilerleme çubuğu (progress bar) eklemeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, giriş verilerini her zaman sunucu tarafında doğruladığınızdan ve modern güvenlik standartlarını (CSP, Sanitization) uyguladığınızdan emin olun.