Javascript İle Dinamik Bir Etkileşimli Fiyat Karşılaştırma Aracı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi geliştirmek için modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code önerilir) dışında herhangi bir kuruluma ihtiyacınız yoktur. Projeniz için bir klasör oluşturun ve içine index.html, style.css ve app.js dosyalarını ekleyin. Modern JavaScript özelliklerini kullanacağımız için tarayıcınızın güncel olduğundan emin olun.

• HTML5: Yapısal iskeletin oluşturulması için.
• CSS3: Esnek (Flexbox/Grid) düzenler ile arayüzün tasarlanması için.
• JavaScript (ES6+): Veri işleme, olay yönetimi ve DOM güncellemeleri için.

Adım 1: HTML Yapısının Kurulması

Fiyat karşılaştırma aracımızın temelini oluşturan HTML yapısında, kullanıcıların ürün seçebileceği bir liste ve karşılaştırma sonuçlarının görüneceği bir tablo alanı bulunmalıdır. Aşağıdaki kod bloğu, temel arayüz iskeletini temsil eder.

  


Ürün Seçimi
  Laptop Ekle
  Monitör Ekle



  

    

      
Ürün Adı
      
Fiyat
      
İşlem
    
  
  

Burada data-* öznitelikleri, JavaScript tarafında ürün verilerine kolayca erişmemizi sağlar. Bu yöntem, HTML içinde gizli verileri tutmak için oldukça pratik ve temiz bir yoldur.

Adım 2: JavaScript Veri Yönetimi ve Olay Dinleyiciler

Kullanıcı bir butona tıkladığında, ilgili veriyi alıp bir diziye eklememiz ve ardından tabloyu güncellememiz gerekir. JavaScript tarafında veriyi yönetmek için bir dizi (array) yapısı kullanacağız.

const selectedProducts = [];
const tableBody = document.getElementById('table-body');

document.querySelectorAll('.add-btn').forEach(button => {
  button.addEventListener('click', (e) => {
    const product = {
      id: e.target.dataset.id,
      name: e.target.dataset.name,
      price: parseFloat(e.target.dataset.price)
    };
    addProduct(product);
  });
});

Bu kod bloğu, tüm ekleme butonlarına bir click olay dinleyicisi atar. parseFloat fonksiyonu, fiyat bilgisini matematiksel işlemler yapabilmek için sayısal formata dönüştürür.

Adım 3: Dinamik Tablo Güncelleme Fonksiyonu

Veri değiştiğinde tabloyu yeniden oluşturmak yerine, sadece güncel veriyi yansıtan bir render fonksiyonu kullanmak performansı artırır. İşte tabloyu güncelleyen fonksiyonumuz:

function renderTable() {
  tableBody.innerHTML = '';
  selectedProducts.forEach((product, index) => {
    const row = `
      ${product.name}
      ${product.price} TL
      Sil
    `;
    tableBody.innerHTML += row;
  });
}

Bu fonksiyon, innerHTML kullanarak tablo gövdesini temizler ve güncel dizi verisiyle tekrar doldurur. index parametresi, ürünleri silerken doğru öğeyi hedeflememizi sağlar.

Adım 4: Karşılaştırma Mantığı ve Toplam Fiyat Hesaplama

Kullanıcıların en çok ihtiyaç duyduğu özellik, seçilen ürünlerin toplam maliyetidir. Bu, basit bir reduce fonksiyonu ile kolayca hesaplanabilir.

function calculateTotal() {
  const total = selectedProducts.reduce((sum, p) => sum + p.price, 0);
  document.getElementById('total-price').textContent = `Toplam: ${total} TL`;
}

reduce metodu, dizi içerisindeki tüm fiyatları toplar. 0 başlangıç değeri, dizi boş olsa bile hata almamamızı sağlar.

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

Kullanıcı girdileriyle çalışırken her zaman XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalıyız. Eğer ürün adlarını dış bir kaynaktan alıyorsanız, doğrudan innerHTML kullanmak yerine textContent kullanmanız önerilir.

Kritik Güvenlik Uyarısı: Eğer ürün verilerini bir veritabanından veya API'den çekiyorsanız, verileri mutlaka doğrulayın. Kullanıcı tarafından manipüle edilebilecek data özniteliklerini sunucu tarafında tekrar kontrol etmeden fiyat hesaplaması yapmayın. Üretim ortamında, tüm kullanıcı girişlerini sanitize (temizleme) işleminden geçirin.

Adım 6: Karşılaştırma Tablosu: Yöntemler ve Özellikler

Aşağıdaki tablo, dinamik bir karşılaştırma aracı oluştururken kullanabileceğiniz farklı yaklaşımların kısa bir özetidir.

Sıkça Sorulan Sorular

JavaScript ile fiyat hesaplarken neden parseFloat kullanmalıyım?

HTML'deki data-price öznitelikleri her zaman birer "string" (metin) olarak gelir. Matematiksel toplama işlemi yapabilmek için bu metinleri sayısal veri türüne dönüştürmeniz şarttır.

Birden fazla aynı ürünü eklemeyi nasıl engellerim?

addProduct fonksiyonunuzun içine bir kontrol ekleyerek, selectedProducts.some(p => p.id === newProduct.id) koşuluyla ürünün zaten dizide olup olmadığını kontrol edebilirsiniz.

Bu aracı nasıl daha profesyonel hale getirebilirim?

Verileri localStorage kullanarak tarayıcıda saklayabilir, böylece sayfa yenilense bile seçilen ürünlerin korunmasını sağlayabilirsiniz.

Mobil uyumluluk için ne yapmalıyım?

CSS tarafında @media sorguları kullanarak, ekran genişliği azaldığında tablonun sütunlarını alt alta gelecek şekilde düzenleyebilirsiniz.

XSS saldırılarını nasıl tamamen önlerim?

Mümkün olan her yerde document.createElement ve textContent kullanarak DOM elemanlarını oluşturun; innerHTML kullanımından kaçının.

Performans Optimizasyonu: Büyük Veri Setlerinde Hız

Fiyat karşılaştırma aracınızda yüzlerce ürün listelemeye başladığınızda, DOM manipülasyonları yavaşlamaya başlayabilir. Tarayıcıyı yormamak için "DocumentFragment" kullanarak tüm tabloyu tek seferde DOM'a eklemek, performansı ciddi oranda artırır. Ayrıca, her tuş vuruşunda veya seçimde tetiklenen fonksiyonlar için "Debounce" tekniğini kullanmak, gereksiz hesaplama yükünü ortadan kaldırır.

Aşağıdaki örnekte, kullanıcı arama kutusuna hızlıca veri girerken fonksiyonun her harfte değil, duraksadığında çalışmasını sağlayan debounce yapısını inceleyebilirsiniz:

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

const optimizeSearch = debounce((query) => {
  console.log("Filtreleme yapılıyor: ", query);
  // Burada tablo güncelleme fonksiyonunuzu çağırın
}, 300);

document.querySelector('#search-input').addEventListener('input', (e) => {
  optimizeSearch(e.target.value);
});

Üretim Ortamına Geçiş: Deployment ve Test Stratejileri

Geliştirdiğiniz aracı canlıya almadan önce, kodunuzun farklı tarayıcılarda ve ekran çözünürlüklerinde nasıl davrandığını test etmelisiniz. Modern bir web uygulamasının deployment sürecinde şu adımları izlemek standart kabul edilir:

• Birim Testleri (Unit Testing): Fiyat hesaplama fonksiyonlarınızın (örneğin indirim oranları veya vergi hesaplamaları) doğru çalıştığından emin olmak için Jest veya Vitest gibi kütüphanelerle testler yazın.
• Minifikasyon: Kodunuzu canlıya almadan önce Terser veya esbuild gibi araçlarla sıkıştırarak dosya boyutunu küçültün.
• CDN Kullanımı: Eğer projede harici kütüphaneler kullanıyorsanız, bunları kendi sunucunuz yerine güvenilir CDN'lerden çekerek yükleme süresini optimize edin.
• Hata İzleme: Sentry veya benzeri bir araç entegre ederek, kullanıcıların karşılaştığı JavaScript hatalarını anlık olarak takip edin.

Hata Ayıklama İpuçları

Geliştirme aşamasında konsol çıktılarına güvenmek yerine, tarayıcının "Sources" sekmesindeki "Breakpoints" özelliğini kullanın. Özellikle dinamik olarak oluşturulan tablolarda verinin doğru gelip gelmediğini kontrol etmek için şu basit hata ayıklama bloğunu kullanabilirsiniz:

function debugTableData(data) {
  if (!Array.isArray(data) || data.length === 0) {
    console.error("Hata: Veri seti boş veya dizi formatında değil!");
    return;
  }
  console.table(data); // Veriyi tablo formatında konsola basar
}

Bu yöntemler, uygulamanızın sadece çalışmasını değil, aynı zamanda ölçeklenebilir ve sürdürülebilir olmasını sağlar. Profesyonel bir geliştirici, yazdığı kodun sadece bugünkü değil, gelecekteki performansını da düşünerek hareket eder.

Sonuç

Bu rehberde, JavaScript kullanarak dinamik bir fiyat karşılaştırma aracının nasıl inşa edileceğini, verilerin nasıl yönetileceğini ve kullanıcı arayüzünün nasıl güncelleneceğini öğrendiniz. 2026 standartlarına uygun bu yaklaşım, projelerinizde hız ve esneklik sağlar. Bir sonraki adım olarak, bu araca bir "Sepete Ekle" özelliği ekleyebilir veya verileri bir API üzerinden çekerek gerçek zamanlı fiyat güncellemeleri yapabilirsiniz.

Yasal Sorumluluk Reddi: Bu makalede sunulan kod örnekleri eğitim amaçlıdır. Ticari projelerinizde kullanmadan önce güvenlik açıklarını (XSS, CSRF) gözden geçirmeniz ve gerekli veri doğrulama işlemlerini yapmanız zorunludur. Yazılım güvenliği sorumluluğu geliştiriciye aittir.