JavaScript İle Hesap Makinesi Yapımı

<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>

Genişletmek için tıkla ...

<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>

Genişletmek için tıkla ...

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

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

Genişletmek için tıkla ...

PcPassW0lf' Alıntı:

Merhaba Arkadaşlar Ben PcPassW0lf Bugün Sizlere JavaScript İle Hesap Makinesi Yapımını Göstereceğim Hazırsanız Başlayalım.

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.



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



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.



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

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



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.



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

Hayırlı günler dilerim.

Genişletmek için tıkla ...

JavaScript Hesap Makinesi Yapımı - Yusuf SEZER

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

www.yusufsezer.com.tr