Javascript İle Dinamik Bir Hesap Makinesi Uygulaması Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

JavaScript ile dinamik bir hesap makinesi geliştirmek için karmaşık kurulumlara ihtiyacınız yoktur. Modern bir tarayıcı (Chrome, Firefox veya Edge) ve herhangi bir kod düzenleyici (Visual Studio Code önerilir) yeterlidir. Projenizi başlatmak için bilgisayarınızda bir klasör oluşturun ve içerisine üç temel dosya ekleyin: index.html, style.css ve script.js.

• HTML: Sayfanın iskeletini oluşturur ve butonları tanımlar.
• CSS: Hesap makinesinin görsel düzenini ve butonların yerleşimini sağlar.
• JavaScript: Kullanıcı etkileşimlerini yakalar ve matematiksel hesaplamaları yürütür.

Tarayıcınızın geliştirici araçlarını (F12) kullanarak kodunuzun çalışma anındaki durumunu izlemek, hata ayıklama sürecini hızlandıracaktır.

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

Hesap makinesinin temelini atmak için bir ekran (display) alanı ve sayısal/operatör butonlarına ihtiyacımız vardır. Aşağıdaki kod bloğu, temiz ve erişilebilir bir HTML yapısı sunar.

  
  

    C
    7
    =
  

Burada input alanı, kullanıcıya sonuçları göstermek için kullanılır. disabled özniteliği, kullanıcının klavye ile doğrudan giriş yapmasını engeller, böylece sadece bizim tanımladığımız butonlar üzerinden işlem yapılmasını sağlarız.

Adım 2: JavaScript ile Temel Fonksiyonları Yazma

Uygulamanın kalbi olan JavaScript dosyasında, ekranı güncelleme ve hesaplama mantığını kurmalıyız. İlk olarak, kullanıcı bir butona bastığında ekranın nasıl güncelleneceğini tanımlayalım.

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

function appendToDisplay(input) {
  display.value += input;
}

function clearDisplay() {
  display.value = '';
}

appendToDisplay fonksiyonu, mevcut ekran değerine yeni karakteri ekler. clearDisplay ise ekranı temizler. Bu fonksiyonlar, kullanıcı arayüzü ile veri katmanı arasındaki köprüyü oluşturur.

Adım 3: Matematiksel Hesaplamaları Güvenli Gerçekleştirme

Hesap makinesinin en kritik noktası, girilen ifadeyi hesaplamaktır. eval() fonksiyonu pratik görünse de, güvenlik riskleri nedeniyle dikkatli kullanılmalıdır. İşte güvenli bir hesaplama yaklaşımı:

function calculate() {
  try {
    // Güvenlik notu: eval() kullanımı dışarıdan gelen verilerde tehlikelidir.
    // Sadece rakam ve operatör içeren kısıtlı bir string için kullanılır.
    display.value = eval(display.value);
  } catch (error) {
    display.value = 'Hata';
  }
}

try-catch bloğu, kullanıcının geçersiz bir işlem (örneğin: 5++5) girmesi durumunda uygulamanın çökmesini engeller ve kullanıcıya "Hata" mesajı döndürür.

Güvenlik Uyarısı: eval() fonksiyonu, kötü niyetli kullanıcıların kod çalıştırmasına (XSS saldırıları) neden olabilir. Üretim ortamında (production) matematiksel ifadeleri ayrıştırmak için güvenli bir kütüphane (örneğin math.js) veya özel bir "parser" kullanmanız şiddetle tavsiye edilir.

Adım 4: Kullanıcı Deneyimini İyileştirme

Uygulamanın daha profesyonel görünmesi için klavye desteği eklemek harika bir adımdır. Kullanıcıların fare yerine klavyeyi kullanması, uygulamanın kullanılabilirliğini artırır.

document.addEventListener('keydown', (event) => {
  if (event.key >= '0' && event.key


Adım 5: Klavye Desteği ve Etkileşimli Deneyim
Kullanıcıların hesap makinesini daha hızlı kullanabilmesi için klavye tuşlarını dinleyen bir event listener eklemek, uygulamanın profesyonellik seviyesini artırır. Aşağıdaki kod bloğu, kullanıcı klavyeden bir sayıya veya operatöre bastığında, bu girdiyi hesap makinesinin ekranına otomatik olarak yansıtır.
document.addEventListener('keydown', (event) => {
  const key = event.key;
  const display = document.getElementById('display');

  if (/[0-9]/.test(key)) {
    display.value += key;
  } else if (['+', '-', '*', '/'].includes(key)) {
    display.value += key;
  } else if (key === 'Enter') {
    calculate();
  } else if (key === 'Escape') {
    display.value = '';
  } else if (key === 'Backspace') {
    display.value = display.value.slice(0, -1);
  }
});
Bu yapı sayesinde kullanıcılar fareyle tıklama yapmadan, standart bir hesap makinesi gibi klavyelerini kullanarak işlemlerini gerçekleştirebilirler. Backspace tuşu ile son girilen karakteri silmek, kullanıcı hatalarını minimize etmek için kritik bir özelliktir.






Adım 6: Performans Optimizasyonu ve Kod Yapısı
Uygulamanız büyüdükçe, DOM (Document Object Model) manipülasyonlarını optimize etmek önem kazanır. Her tuş basımında tüm sayfayı yeniden render etmek yerine, sadece değişen ekran değerini güncellemek performans kaybını önler.
Modüler Kodlama Yaklaşımı
Kodunuzu daha okunabilir ve bakımı kolay hale getirmek için fonksiyonları mantıksal parçalara ayırın. Örneğin, hesaplama mantığını UI (arayüz) mantığından ayırmak, gelecekte uygulamanıza bir "geçmiş" (history) özelliği eklemek istediğinizde işinizi kolaylaştıracaktır.
// Hesaplama mantığını izole eden fonksiyon
const performCalculation = (expression) => {
  // Burada güvenli bir parser veya kütüphane kullanılmalıdır
  return new Function('return ' + expression)();
};

// Arayüzü güncelleyen fonksiyon
const updateDisplay = (value) => {
  const display = document.getElementById('display');
  display.value = value;
};
Bu yaklaşım, uygulamanızın test edilebilirliğini artırır. Birim testleri (unit tests) yazarken, performCalculation fonksiyonunu bağımsız olarak test edebilir ve farklı matematiksel senaryoları (negatif sayılar, ondalıklı işlemler) kolayca doğrulayabilirsiniz.






Adım 7: Deployment ve Yayına Alma
Uygulamanızı internet üzerinde erişilebilir kılmak için basit bir statik hosting hizmeti kullanabilirsiniz. GitHub Pages, Vercel veya Netlify gibi platformlar, projenizi saniyeler içinde yayına almanıza olanak tanır.

  
Minifikasyon: Yayın öncesi JS ve CSS dosyalarınızı küçülterek (minify) yükleme sürelerini azaltın.
  
HTTPS: Tarayıcı güvenliği için uygulamanızın mutlaka SSL sertifikası ile sunulduğundan emin olun.
  
Responsive Kontrolü: Farklı ekran boyutlarında (mobil, tablet, masaüstü) butonların tıklanabilirliğini test edin.

Uygulamanızın mobil cihazlarda düzgün görünmesi için CSS içerisinde viewport meta etiketini kontrol etmeyi ve flexbox veya grid yapılarını kullanarak esnek bir tasarım oluşturmayı unutmayın.