Gereksinimler ve Ön Hazırlık
Projeye başlamadan önce bilgisayarınızda modern bir web tarayıcısı (Chrome, Firefox veya Edge güncel sürümleri) ve basit bir kod editörü (VS Code gibi) bulunması yeterlidir. Javascript kodlarını çalıştırmak için herhangi bir derleyiciye veya kurulum yapmanıza gerek yoktur; çünkü tarayıcılar bu dili yerel olarak yorumlar.
- HTML5: Sayfa yapısını oluşturmak için.
- CSS3: Hesaplayıcının görsel tasarımını düzenlemek için.
- Javascript (ES6+): Hesaplama mantığını kurmak için.
Tüm kodlarınızı tek bir klasörde index.html, style.css ve script.js isimli dosyalarla tutmanız, düzenli bir çalışma ortamı sağlar.
Adım Adım HTML Yapısını Oluşturma
İlk adım olarak, kullanıcının veri girebileceği ve sonucu görebileceği temel HTML iskeletini oluşturuyoruz. Burada input etiketlerini kullanarak kullanıcıdan sayısal verileri alacağız.
Javascript ile Dinamik Hesaplama Mantığı
Hesaplama mantığını kurarken, kullanıcının her tuş vuruşunda veya değer değişiminde fonksiyonun tetiklenmesini sağlayacağız. input olay dinleyicisi, bu dinamik yapıyı oluşturmak için en verimli yöntemdir.
const priceInput = document.getElementById('price');
const discountInput = document.getElementById('discount');
const resultDisplay = document.getElementById('result');
function calculateDiscount() {
const price = parseFloat(priceInput.value) || 0;
const discount = parseFloat(discountInput.value) || 0;
const discountedPrice = price - (price * (discount / 100));
resultDisplay.innerText = `İndirimli Fiyat: ${discountedPrice.toFixed(2)} TL`;
}
priceInput.addEventListener('input', calculateDiscount);
discountInput.addEventListener('input', calculateDiscount);
Yukarıdaki kodda parseFloat fonksiyonu, input değerini ondalıklı sayıya çevirir. || 0 ifadesi ise eğer input boşsa, işlemin hata vermemesi için varsayılan olarak 0 değerini atar. toFixed(2) metodu ise sonucu iki basamaklı ondalık sayı formatında sabitler.
Güvenlik ve Validasyon Uyarıları
Tarayıcı tabanlı hesaplamalarda kullanıcıdan gelen veriye asla güvenmemelisiniz. Her ne kadar bu basit bir araç olsa da, üretim ortamında (production) XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olunmalıdır.
Kritik Güvenlik Uyarısı: Kullanıcıdan alınan verileri doğrudan innerHTML ile sayfaya yazdırmayın. Her zaman textContent veya innerText kullanarak metin odaklı güncellemeler yapın. Bu, kötü niyetli kodların çalıştırılmasını engeller.
İndirim Hesaplama Yöntemlerinin Karşılaştırılması
Aşağıdaki tablo, dinamik hesaplama yaparken tercih edebileceğiniz farklı yaklaşımları özetlemektedir.
Yöntem
Avantajı
Dezavantajı
Input Event
Anlık ve hızlı geri bildirim.
Sık tetiklendiğinde işlem yükü artabilir.
Button Click
Daha kontrollü işlem süreci.
Kullanıcı deneyimi daha yavaş.
Debounce
Performans odaklı, gereksiz işlem yapmaz.
Kod karmaşıklığını artırır.
Performans İyileştirmesi: Debounce Tekniği
Eğer çok büyük verilerle veya karmaşık hesaplamalarla çalışıyorsanız, input olayının her karakterde tetiklenmesi tarayıcıyı yorabilir. Bu durumda "Debounce" tekniği kullanarak, kullanıcının yazmayı bitirmesini bekleyebiliriz.
function debounce(func, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
const optimizedCalculate = debounce(calculateDiscount, 300);
priceInput.addEventListener('input', optimizedCalculate);
Bu kod bloğu, kullanıcı yazmayı bıraktıktan 300 milisaniye sonra hesaplama işlemini gerçekleştirir. Bu, özellikle mobil cihazlarda pil tüketimini azaltır ve daha akıcı bir kullanıcı deneyimi sunar.
Sıkça Sorulan Sorular
Javascript ile hesaplama yaparken neden sonuçlar bazen hatalı çıkıyor?
Javascript'te kayan noktalı sayı (floating point) matematiği bazen 0.1 + 0.2 gibi işlemlerde hassasiyet hatalarına yol açar. Bu yüzden finansal hesaplamalarda toFixed() kullanmak veya sayıları kuruş cinsinden (tam sayı) işleyip sonra bölmek en güvenli yoldur.
Bu hesaplayıcıyı veritabanına nasıl bağlarım?
Bu bir istemci tarafı (client-side) aracıdır. Verileri kaydetmek isterseniz, bir API aracılığıyla veriyi sunucuya göndermeniz gerekir. Ancak, sadece hesaplama yapıyorsanız veritabanına gerek yoktur.
Mobil uyumluluk için ne yapmalıyım?
CSS içerisinde input alanlarına width: 100% vererek ve viewport meta etiketini HTML başlığına ekleyerek tüm cihazlarda düzgün görünmesini sağlayabilirsiniz.
Kullanıcı negatif fiyat girerse ne olur?
Kodunuzda Math.max(0, price) kullanarak değerin negatif olmasını engelleyebilir ve kullanıcıya hata mesajı gösterebilirsiniz.
Bu aracı nasıl daha profesyonel hale getirebilirim?
Hata yönetimi için try-catch blokları ekleyebilir, CSS ile animasyonlar katarak kullanıcı deneyimini zenginleştirebilirsiniz.
İleri Seviye İpucu: Hesaplayıcıyı Yerel Depolama (LocalStorage) ile Kalıcı Hale Getirme
Kullanıcıların tarayıcıyı kapattıklarında girdikleri verilerin kaybolmaması, kullanıcı deneyimini (UX) ciddi oranda artıran bir özelliktir. JavaScript'in localStorage API'sini kullanarak, kullanıcının son girdiği fiyat ve indirim oranını tarayıcı hafızasında tutabiliriz.
Aşağıdaki kod bloğu, formdaki değişiklikleri anlık olarak tarayıcıya kaydeder ve sayfa yenilendiğinde verileri otomatik olarak geri yükler:
// Verileri kaydetme fonksiyonu
function saveToLocalStorage(price, discount) {
localStorage.setItem('lastPrice', price);
localStorage.setItem('lastDiscount', discount);
}
// Sayfa yüklendiğinde verileri geri yükleme
window.addEventListener('load', () => {
const savedPrice = localStorage.getItem('lastPrice');
const savedDiscount = localStorage.getItem('lastDiscount');
if (savedPrice) document.getElementById('priceInput').value = savedPrice;
if (savedDiscount) document.getElementById('discountInput').value = savedDiscount;
// Hesaplamayı tetikle
calculateDiscount();
});
Hesaplayıcı İçin Birim Testleri (Unit Testing)
Dinamik hesaplayıcıların finansal verilerle çalışması, hata payını sıfıra indirmeyi zorunlu kılar. Basit bir assert yapısı ile hesaplama mantığınızın doğruluğunu şu şekilde test edebilirsiniz:
function testDiscountCalculation() {
const testCases = [
{ price: 100, discount: 20, expected: 80 },
{ price: 50, discount: 10, expected: 45 },
{ price: 200, discount: 0, expected: 200 }
];
testCases.forEach((test, index) => {
const result = (test.price - (test.price * test.discount / 100));
if (result === test.expected) {
console.log(`Test ${index + 1}: Başarılı`);
} else {
console.error(`Test ${index + 1}: Başarısız! Beklenen: ${test.expected}, Gelen: ${result}`);
}
});
}
// Testi çalıştır
testDiscountCalculation();
Hata Ayıklama ve Geliştirici Araçları
Geliştirme sürecinde tarayıcınızın "Console" sekmesini aktif kullanmak, beklenmedik NaN (Not a Number) hatalarını yakalamanıza yardımcı olur. Özellikle kullanıcıdan alınan verilerin string tipinden number tipine dönüştürülüp dönüştürülmediğini kontrol etmek için console.log(typeof input) komutunu kullanmayı ihmal etmeyin.
Dağıtım (Deployment) Öncesi Kontrol Listesi
- Input Maskeleme: Kullanıcının metin girmesini engellemek için
type="number" özniteliğini kullandığınızdan emin olun.
- Erişilebilirlik: Form elemanlarına
aria-label ekleyerek ekran okuyucular için uyumluluğu artırın.
- CSS İzolasyonu: Hesaplayıcıyı başka bir sayfaya gömdüğünüzde stillerin bozulmaması için sınıflarınızı (class) benzersiz isimlerle tanımlayın (Örn:
.calc-container).
- Mobil Görünüm:
input alanlarının mobil cihazlarda dokunmatik klavyeyi doğru tetiklemesi için inputmode="decimal" özniteliğini kullanın.
Sonuç
Javascript ile tarayıcı tabanlı bir dinamik indirim hesaplayıcı oluşturmak, hem temel programlama mantığını anlamak hem de kullanıcı dostu arayüzler geliştirmek için harika bir başlangıçtır. Bu rehberde, basit bir form yapısından başlayarak performans odaklı debounce tekniğine kadar adım adım ilerledik. Artık kendi projelerinizde bu mantığı kullanarak daha karmaşık hesaplama modülleri inşa edebilirsiniz.
Sorumluluk Reddi: Bu makalede yer alan kod örnekleri eğitim amaçlıdır. Finansal veya ticari uygulamalarda kullanmadan önce, verilerin doğruluğunu kontrol eden sunucu tarafı doğrulamaları eklemeyi ve güvenlik standartlarına uygun hareket etmeyi unutmayın.
Bir sonraki adımınız, bu hesaplayıcıyı bir "Sepet Modülü" ile birleştirerek, kullanıcının seçtiği ürünlerin toplam fiyatı üzerinden indirim hesaplayan kapsamlı bir e-ticaret simülasyonu geliştirmek olabilir.
Bu yazıya tepkinizi paylaşın:
İlgili Yazılar
Yorumlar (0)
Yorum Yaz