Javascript İle Tarayıcı Tabanlı Bir Karakter Uzunluk Hesaplayıcı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için herhangi bir dış kütüphaneye veya karmaşık bir geliştirme ortamına ihtiyacınız yoktur. Modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve herhangi bir kod editörü (VS Code gibi) yeterlidir. Projeniz için standart bir HTML5 yapısı oluşturarak başlayacağız.

• Modern bir web tarayıcısı (Güncel JavaScript ES6+ özelliklerini destekleyen).
• Temel HTML5 ve CSS bilgisi.
• Kodlarınızı test edebileceğiniz yerel bir web sunucusu veya doğrudan tarayıcıda açabileceğiniz bir .html dosyası.

Adım 1: Temel HTML Yapısını Oluşturma

Karakter hesaplayıcımızın iskeletini oluşturmak için bir metin giriş alanı (textarea) ve bu karakterlerin sayısını gösterecek bir etiket (span) tanımlamamız gerekir. Bu yapı, JavaScript'in veriyi yakalaması için gerekli olan ID seçicilerini içermelidir.

  Mesajınız:
  
  
Karakter Sayısı: 0 / 200

Burada maxlength özniteliği, tarayıcının yerel bir kısıtlama yapmasını sağlar. Ancak biz JavaScript ile daha esnek bir kontrol mekanizması geliştireceğiz.

Adım 2: JavaScript ile Anlık Dinleme (Event Listener)

Kullanıcı klavyeden bir tuşa bastığında veya metni yapıştırdığında sayacın güncellenmesi gerekir. Bunun için input olayını dinlemek en verimli yöntemdir. input olayı, keydown veya keyup olaylarından farklı olarak, fare ile yapıştırma işlemlerini de kapsar.

const inputField = document.getElementById('user-input');
const charDisplay = document.getElementById('char-count');

inputField.addEventListener('input', function() {
    const currentLength = inputField.value.length;
    charDisplay.textContent = currentLength;
});

Bu kod bloğu, her karakter girişinde inputField değerinin uzunluğunu alır ve charDisplay içeriğini günceller. Bu sayede kullanıcı, yazdığı metnin uzunluğunu anlık olarak görür.

Adım 3: Görsel Geri Bildirim ve Sınır Kontrolü

Kullanıcı belirlenen sınırı aştığında veya sınıra yaklaştığında onu görsel olarak uyarmak, arayüz tasarımının bir parçasıdır. Örneğin, karakter sayısı 180'i geçtiğinde sayacın rengini kırmızıya çevirebiliriz.

inputField.addEventListener('input', () => {
    const length = inputField.value.length;
    charDisplay.textContent = length;

    if (length > 180) {
        charDisplay.style.color = 'red';
    } else {
        charDisplay.style.color = 'black';
    }
});

Bu mantık, kullanıcıya sınırın yaklaştığını hissettirir. CSS sınıfları ile yönetmek daha profesyonel bir yaklaşımdır; ancak yukarıdaki yöntem hızlı bir test için oldukça etkilidir.

Adım 4: Güvenlik ve Karakter Filtreleme

Kullanıcıların metin alanına zararlı script kodları (XSS - Cross-Site Scripting) girmesini engellemek için sadece uzunluğu hesaplamak yetmez. Veriyi sunucuya göndermeden önce temizlemek (sanitization) gerekir. JavaScript tarafında basit bir filtreleme örneği aşağıdadır:

function sanitizeInput(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

// Kullanım örneği
inputField.addEventListener('input', (e) => {
    const cleanValue = sanitizeInput(e.target.value);
    console.log("Temizlenmiş veri:", cleanValue);
});

Kritik Uyarı: İstemci tarafında (JavaScript) yapılan temizlik, kullanıcı deneyimi içindir. Güvenlik için asıl temizlik ve doğrulama mutlaka sunucu tarafında (Backend) yapılmalıdır. İstemci tarafındaki kontroller kolayca bypass edilebilir.

Adım 5: Farklı Yöntemlerin Karşılaştırılması

Karakter sayma işlemlerinde kullanılan farklı yaklaşımların avantaj ve dezavantajlarını aşağıdaki tabloda inceleyebilirsiniz.

Sıkça Sorulan Sorular

JavaScript ile karakter sayarken neden 'input' olayını kullanmalıyız?

'input' olayı, kullanıcının klavyeden giriş yapması, metni yapıştırması veya sürükleyip bırakması gibi tüm veri girişi yöntemlerini yakalar. 'keyup' gibi olaylar sadece klavye girişlerini algıladığı için eksik kalabilir.

Karakter sayısı 0'ın altına düşebilir mi?

Hayır, value.length özelliği her zaman 0 veya daha büyük bir tam sayı döndürür. Ancak mantıksal hataları önlemek için Math.max(0, length) gibi bir koruma katmanı eklenebilir.

Emojiler karakter sayısını nasıl etkiler?

JavaScript'te string.length özelliği, karakterleri UTF-16 kod birimleri olarak sayar. Bazı karmaşık emojiler iki kod birimi kaplayabilir ve bu da sayacın gerçekte olduğundan daha fazla karakter göstermesine neden olabilir. Daha hassas sayım için Array.from(str).length kullanılabilir.

Bu kodları üretim ortamında (production) nasıl kullanırım?

Kodlarınızı minified (sıkıştırılmış) hale getirerek ve bir modül yapısı içerisinde (ES Modules) kullanarak performanslı bir şekilde projenize dahil edebilirsiniz.

XSS saldırılarına karşı nasıl önlem alırım?

Kullanıcıdan alınan veriyi asla doğrudan DOM'a innerHTML ile eklemeyin. Bunun yerine textContent veya innerText kullanarak verinin metin olarak işlenmesini sağlayın.

İleri Düzey Optimizasyon: Performans ve Bellek Yönetimi

Karakter hesaplayıcı gibi basit bir araçta performans genellikle göz ardı edilir; ancak binlerce karakterlik metinlerin işlendiği veya çok sayıda input alanının bulunduğu karmaşık formlarda, her tuş vuruşunda tetiklenen fonksiyonlar tarayıcıyı yavaşlatabilir. Bu noktada Debounce ve Throttle teknikleri devreye girer.

Özellikle kullanıcı yazarken arka planda bir API isteği atıyorsanız veya DOM üzerinde yoğun görsel değişiklikler yapıyorsanız, işlemleri belirli bir milisaniye geciktirmek CPU kullanımını ciddi oranda düşürür.

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const updateCounter = debounce((value) => {
  const count = value.length;
  document.getElementById('counter').innerText = count;
}, 300);

document.getElementById('myInput').addEventListener('input', (e) => {
  updateCounter(e.target.value);
});

Hata Ayıklama ve Birim Testleri

Kodunuzun beklediğiniz gibi çalıştığından emin olmak için manuel testlerin ötesine geçmelisiniz. Özellikle emojiler, özel karakterler veya sağdan sola (RTL) yazılan dillerde karakter sayacı beklenmedik sonuçlar verebilir. Jest veya Vitest gibi araçlarla mantıksal katmanı test etmek, uygulamanızın sağlamlığını artırır.

Test Senaryoları Listesi

• Boş Girdi: Kullanıcı hiçbir şey yazmadığında sayaç 0 değerini göstermeli.
• Emoji Desteği: length özelliği emojileri 2 karakter olarak sayabilir; bu durumu Array.from() veya spread operatörü ile normalize edip etmediğinizi kontrol edin.
• Kopyala-Yapıştır: Kullanıcı mouse ile metin yapıştırdığında input olayı tetikleniyor mu?
• Sınır Değerler: Maksimum karakter sınırına tam ulaşıldığında veya sınır aşıldığında görsel uyarılar (CSS sınıfları) doğru tetikleniyor mu?

Aşağıdaki örnek, JavaScript'te emojileri doğru saymak için kullanılan modern bir yaklaşımı göstermektedir:

function getTrueLength(str) {
  // Emojileri ve özel karakterleri doğru saymak için 
  // karakterleri diziye yayarak işliyoruz.
  return [...str].length;
}

const inputField = document.querySelector('#input');
inputField.addEventListener('input', () => {
  const count = getTrueLength(inputField.value);
  console.log('Gerçek karakter sayısı:', count);
});

İpucu: Eğer uygulamanız çok dilli bir yapıya sahipse, karakter sayısını değil, "görsel genişliği" baz alan kütüphaneler kullanmayı düşünebilirsiniz. Bazı karakterler (örneğin Asya dilleri) tek bir karakter gibi görünse de bayt bazında farklı yer kaplayabilir.

Sonuç

JavaScript ile tarayıcı tabanlı bir karakter uzunluk hesaplayıcı oluşturmak, web arayüzlerinizi daha etkileşimli hale getirmenin en temel yollarından biridir. Bu rehberde, input olayını dinleyerek anlık geri bildirim vermeyi, görsel uyarılar eklemeyi ve temel güvenlik prensiplerini öğrendiniz. Bir sonraki adım olarak, bu verileri bir API üzerinden sunucuya gönderirken nasıl doğrulayacağınızı (Backend Validation) araştırmanızı öneririm.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Yazılım güvenliği, sürekli güncellenen bir süreçtir. Üretim ortamındaki uygulamalarınızda, kullanıcı girdilerini her zaman sunucu tarafında tekrar doğrulayın ve güncel güvenlik kütüphanelerini kullanın.