Javascript İle Dinamik Bir Etkileşimli Kredi Hesaplama Aracı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce modern bir tarayıcı (Chrome, Firefox veya Edge) ve temel bir kod editörü (VS Code önerilir) yeterlidir. 2026 yılı standartlarına uygun olarak, kodlarımızı ES6+ (ECMAScript 6 ve üzeri) sözdizimi ile yazacağız. Herhangi bir harici kütüphane kullanmadan, saf JavaScript (Vanilla JS) kullanarak performanslı ve hızlı bir çözüm üreteceğiz.

• HTML5: Arayüzün iskeletini oluşturmak için.
• CSS3: Tasarımın modern ve kullanıcı dostu görünmesi için.
• JavaScript (ES6+): Hesaplama mantığı ve etkileşim için.

Temel HTML Yapısının Oluşturulması

İlk adım olarak, kullanıcının kredi tutarı, vade sayısı ve faiz oranını girebileceği bir form alanı oluşturmalıyız. HTML yapısında id seçicilerini doğru kullanmak, JavaScript tarafında verilere erişimimizi kolaylaştıracaktır.

  Kredi Tutarı (TL):
  

  Yıllık Faiz Oranı (%):
  

  Vade (Ay):
  

  Hesapla

Burada input alanlarının type="number" olarak belirlenmesi, kullanıcının metin girmesini engelleyerek veri temizleme (data validation) sürecini basitleştirir.

JavaScript ile Veri Yönetimi ve Hesaplama Mantığı

Kullanıcı "Hesapla" butonuna tıkladığında, formdaki değerleri alıp matematiksel formüllerle işlememiz gerekir. Aylık taksit hesaplama formülü: Taksit = (Kredi Tutarı * (Faiz / 100) * (1 + Faiz / 100)^Vade) / ((1 + Faiz / 100)^Vade - 1) şeklindedir.

const calculateBtn = document.getElementById('calculateBtn');

calculateBtn.addEventListener('click', () => {
  const amount = parseFloat(document.getElementById('loanAmount').value);
  const rate = parseFloat(document.getElementById('interestRate').value) / 100 / 12;
  const term = parseInt(document.getElementById('loanTerm').value);

  if (amount > 0 && rate > 0 && term > 0) {
    const monthlyPayment = (amount * rate * Math.pow(1 + rate, term)) / (Math.pow(1 + rate, term) - 1);
    displayResult(monthlyPayment.toFixed(2));
  } else {
    alert("Lütfen geçerli değerler giriniz.");
  }
});

Bu kod bloğunda, Math.pow fonksiyonu üs alma işlemini gerçekleştirir. toFixed(2) metodu ise sonucu virgülden sonra iki basamak olacak şekilde yuvarlar.

Dinamik Sonuç Tablosu Oluşturma

Hesaplanan sonucu sadece bir metin olarak göstermek yerine, kullanıcıya daha profesyonel bir tablo sunmak deneyimi iyileştirir. JavaScript ile DOM üzerinde yeni elementler oluşturarak bu tabloyu ekrana basabiliriz.

function displayResult(monthlyPayment) {
  const resultArea = document.getElementById('resultArea');
  resultArea.innerHTML = `
    

      

        
Açıklama
Tutar
      
      

        
Aylık Taksit
${monthlyPayment} TL
      
    
  `;
}

Bu yöntemle, kullanıcı her hesaplama yaptığında tablo içeriği dinamik olarak güncellenir. innerHTML kullanımı burada basit bir çözüm olsa da, büyük projelerde createElement kullanımı daha güvenli kabul edilir.

Karşılaştırma: Hesaplama Yöntemleri

Güvenlik ve Hata Yönetimi

Kullanıcıdan alınan veriler her zaman doğrulanmalıdır. Negatif sayı girişi veya boş bırakılan alanlar hesaplama hatalarına yol açar. Ayrıca, XSS (Cross-Site Scripting) saldırılarına karşı kullanıcı girdilerini doğrudan DOM'a yazarken dikkatli olunmalıdır.

Uyarı: Kullanıcıdan alınan verileri hiçbir zaman sunucu tarafına doğrulamadan göndermeyin. İstemci tarafındaki (JavaScript) kontroller sadece kullanıcı deneyimi içindir; güvenlik için mutlaka sunucu tarafında (Node.js, PHP vb.) tekrar kontrol yapılmalıdır.

// Basit bir veri temizleme kontrolü
const sanitizeInput = (val) => {
  return val.replace(/]*>/g, '');
};

Sıkça Sorulan Sorular

JavaScript ile yapılan hesaplamalarda neden kayan nokta (floating point) hatası olur?

JavaScript, sayıları IEEE 754 standardında tutar. Çok hassas finansal hesaplamalarda 0.1 + 0.2 gibi işlemler beklenmedik sonuçlar verebilir. Bu yüzden finansal uygulamalarda sayıları kuruş cinsinden (tam sayı) tutmak veya kütüphane kullanmak önerilir.

Bu aracı mobil uyumlu nasıl yaparım?

CSS içerisinde @media (max-width: 600px) sorgularını kullanarak form elemanlarının genişliğini %100 yapabilir ve font boyutlarını optimize edebilirsiniz.

İnteraktif sonuçları nasıl PDF olarak kaydedebilirim?

Bunun için jsPDF gibi kütüphaneler kullanarak, oluşturduğunuz tabloyu doğrudan PDF dosyasına dönüştürebilirsiniz.

Kullanıcı girişi yaparken anlık hesaplama (real-time) nasıl yapılır?

Butona tıklanmasını beklemek yerine, input elementlerine input event listener'ı ekleyerek her tuş vuruşunda hesaplama fonksiyonunu tetikleyebilirsiniz.

Bu araç veritabanına veri kaydeder mi?

Bu rehberdeki örnek istemci taraflıdır. Verilerin kaydedilmesi için bir API endpoint'ine ihtiyaç duyarsınız.

Finansal Sorumluluk Reddi: Bu araç tamamen yazılım eğitimi amaçlıdır. Hesaplanan değerler piyasa koşullarına, banka politikalarına ve vergi oranlarına göre değişiklik gösterebilir. Bu araç herhangi bir finansal tavsiye, kredi teklifi veya yatırım danışmanlığı içermez. Gerçek finansal işlemleriniz için bankaların resmi hesaplama araçlarını kullanınız.

İleri Düzey Optimizasyon: Web Workers ile Hesaplama Performansı

Kredi hesaplama aracınızdaki veri seti büyüdüğünde veya karmaşık amortisman tabloları oluşturduğunuzda, ana iş parçacığı (main thread) üzerinde yapılan yoğun hesaplamalar tarayıcının arayüzünü dondurabilir. Bu durumu engellemek için hesaplama mantığını Web Workers kullanarak arka plana taşıyabilirsiniz.

Web Workers, JavaScript kodlarını ana sayfadan bağımsız, ayrı bir iş parçacığında çalıştırmanıza olanak tanır. Aşağıdaki örnekte, hesaplama işlemini ayrı bir dosyaya (worker.js) taşıyarak arayüzün akıcılığını nasıl koruyacağınızı görebilirsiniz.

Worker Dosyası (worker.js)

self.onmessage = function(e) {
    const { anapara, faiz, vade } = e.data;
    // Karmaşık hesaplama mantığı burada çalışır
    const aylikFaiz = faiz / 100 / 12;
    const taksit = (anapara * aylikFaiz) / (1 - Math.pow(1 + aylikFaiz, -vade));
    
    self.postMessage({ taksit: taksit.toFixed(2) });
};

Ana Dosyada Worker Kullanımı

const worker = new Worker('worker.js');

function hesapla() {
    const veri = { anapara: 100000, faiz: 1.5, vade: 12 };
    worker.postMessage(veri);
}

worker.onmessage = function(e) {
    console.log('Hesaplanan Taksit:', e.data.taksit);
    document.getElementById('sonuc').innerText = e.data.taksit;
};

Kredi Hesaplama Aracında Birim Test (Unit Testing) Süreçleri

Finansal uygulamalarda hata payı kabul edilemez. Hesaplama formüllerinizin doğruluğunu garanti altına almak için Jest gibi bir test kütüphanesi kullanarak birim testler yazmalısınız. Bu, kodunuzda yaptığınız güncellemelerin mevcut hesaplama mantığını bozmadığından emin olmanızı sağlar.

Aşağıdaki örnek, basit bir faiz hesaplama fonksiyonunun doğruluğunu test eden bir senaryodur:

// hesaplayici.js
export function taksitHesapla(anapara, faiz, vade) {
    const aylikFaiz = faiz / 100 / 12;
    return (anapara * aylikFaiz) / (1 - Math.pow(1 + aylikFaiz, -vade));
}

// hesaplayici.test.js
import { taksitHesapla } from './hesaplayici';

test('100.000 TL kredi için 12 ay vade ve %1 faiz doğrulaması', () => {
    const sonuc = taksitHesapla(100000, 1, 12);
    expect(Math.round(sonuc)).toBe(8885);
});

Test Stratejileri

• Sınır Değer Analizi: Vade süresinin 1 ay veya 360 ay olduğu uç durumlarda sistemin nasıl tepki verdiğini test edin.
• Geçersiz Girdi Testi: Kullanıcı negatif değerler veya metin girişi yaptığında fonksiyonun hata fırlatıp fırlatmadığını kontrol edin.
• Hassasiyet Testi: Kayan nokta (floating point) hatalarının yuvarlama fonksiyonları ile düzeltilip düzeltilmediğini doğrulayın.

Sonuç

JavaScript ile dinamik bir kredi hesaplama aracı geliştirmek, temel programlama mantığını pratik uygulamalarla birleştirmenin en iyi yollarından biridir. Bu rehberde, form verilerini almayı, matematiksel formülleri uygulamayı ve sonuçları dinamik bir tablo ile göstermeyi öğrendiniz. Bir sonraki adım olarak, bu projeye "kredi ödeme planı" (amortisman tablosu) ekleyerek her ayın anapara ve faiz ödemelerini detaylandıran bir özellik geliştirebilirsiniz.