JavaScript Hesap Makinesi Yapımı

Yazıda JavaScript basit hesap makinesi yapımı, hesap makinesi kodları ile hesap makinesinin nasıl yapıldığı anlatılmıştır.

JavaScript ile hesap makinesi yapımı için çeşitli yöntemler mevcut.

Biz kolay bir yöntem olan JavaScript eval fonksiyonunu kullanacağız.

Hesap makinesi yapımı için öncelikle görsel bir ara yüz yapılması iyi olacaktır.

Yapacağımız hesap makinesi, basit işlemler için kullanılabilecek, dört işlem yapan bir hesap makinesi olacağından fazla bir buton ihtiyacımız olmayacak ayrıca yazılan rakamların ve sonucun görüneceği ekran görevi gören bir veri giriş alanı olacak.

<div id="hesapMakinesi">
  <div id="ekran">
    <input type="text" id="sonuc">
  </div>
  <div id="sayilar">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>+</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>-</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>/</button>
    <button>0</button>
    <button>.</button>
    <button>=</button>
    <button>*</button>
  </div>
</div>

Yapacağımız hesap makinesinin daha iyi görünmesi için çeşitli stil tanımlamaları yapalım.

<style>
  #hesapMakinesi {
    margin: 0 auto;
    width: 350px;
    height: auto;
    background-color: slategray;
    border-radius: 5px;
    padding: 10px;
  }

  #ekran {
    padding: 10px 0px 10px 0px;
    text-align: center;
  }

  #sonuc {
    padding: 10px;
    width: 90%;
    border: none;
    border-radius: 5px;
    text-align: right;
    font-size: 50px;
    word-wrap: break-word;
  }

  #sayilar {
    text-align: center;
  }

  button {
    width: 70px;
    height: 50px;
    margin: 4px;
    border-radius: 5px;
    background-color: whitesmoke;
    border: none;
    outline: none;
  }
</style>

Hesap makinesi için görsel ara yüz oluşturduktan sonra JavaScript kodlarını yazabiliriz.

Tüm butonların tıklama (onclick) olayını bir fonksiyona bağlamamız, tüm işlemleri bir fonksiyon üzerinden yapmak iyi olacaktır.

Seçim işlemini document nesnesine ait getElementsByTagName metodu ile yapabiliriz.

Seçim işleminden sonra bir döngü ile tüm butonların tıklama olayına yazacağımız fonksiyonun adını yazıyoruz.

<script>
"use strict";
  var _sayilar = document.getElementsByTagName("button"),
    _sayiUzunluk = _sayilar.length,
    i = 0;

  for (i = 0; i < _sayiUzunluk; i++) {
    _sayilar[i].onclick = hesapla;
  }
</script>

Tüm butonları yazacağımız hesapla isimli fonksiyona bağladık.

Şimdi hesaplama işleminin yapılacağı hesapla isimli fonksiyonu yazabiliriz.

<script>
"use strict";
  var _sonuc = document.getElementById("sonuc");

  function hesapla() {
    var _deger = this.innerHTML;

    if (_deger == "=") {
      try {
        _sonuc.value = eval(_sonuc.value);
      } catch (e) {
        _sonuc.value = "0";
      }
      return;
    }

    _sonuc.value += _deger;
  }
</script>

Fonksiyon gördüğünüz gibi son derece basit bir şekilde gelen tıklanan butonun değerini alıyor.

Tıklanan buton değeri, hesaplama işlemi (=) ise eval fonksiyonu ile işlemi yaparak sonucu ekran görevi gören veri giriş alanına yazıyor.

Değer hesaplama işlemi (=) değilse buton değerini veri giriş alanına ekliyor.

<script>
"use strict";
  var _sayilar = document.getElementsByTagName("button"),
    _sayiUzunluk = _sayilar.length,
    i = 0,
    _sonuc = document.getElementById("sonuc");

  for (i = 0; i < _sayiUzunluk; i++) {
    _sayilar[i].onclick = hesapla;
  }

  function hesapla() {
    var _deger = this.innerHTML;

    if (_deger == "=") {
      try {
        _sonuc.value = eval(_sonuc.value);
      } catch (e) {
        _sonuc.value = "0";
      }
      return;
    }

    _sonuc.value += _deger;
  }
</script>

Örnek hesap makinesi kodlarını incelemek için tıklayın.

Hesap makinesine daha fazla işlem eklemek istersek bir buton ve hesapla isimli fonksiyon içerisinde eklenen işleme özel hesaplamalar yaptırabilirsiniz.

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.