JavaScript Örnekleri – Basit Hesap Makinesi Yapımı

Şimdiki JavaScript örneğimizde basit bir hesap makinesi yapacağız. Hesap makinesi yapımı örneği ile JavaScript ile fonksiyon kullanımı, JavaScript ile form nesnelerine buton,text erişim konularını pekiştirmiş olacağız. ilk olarak hesapmakinesi isminde bir form açıp aşağıdaki ekran görüntüsünü oluşturuyoruz.
jshesapmakinesi
daha sonra text kutusuna rakamlara basıldıkça sayıların eklenmesi için sayiyaz fonksiyonunu ve islemleri hesaplamak içinde islem fonksiyonunu yazıyoruz Javascript hesap makinesi örneğinin kodları ve çalışan hali aşağıda…

<html>
<head>
<title>bilisimogretmeni.com Hesap Makinesi</title>
<script language="javascript">
<!-- 
// ********************************************************************
// http://www.bilisimogretmeni.com/
// *************

var rakamekle = false
var oncekisonuc = 0
var islem = "="
function temizle()
{
  document.hesapmakinesi.sonuc.value = 0
  oncekisonuc = 0
  rakamekle = false
  islem = "="
} 
// http://www.bilisimogretmeni.com/
function hesapla(yeniislem)
{

  var yenisayi = eval(document.hesapmakinesi.sonuc.value)

  if (islem == "+") {
    oncekisonuc = oncekisonuc + yenisayi
  }
  else if (islem == "-") {
    oncekisonuc = oncekisonuc - yenisayi
  } // http://www.bilisimogretmeni.com/
  else if (islem == "/") {
    oncekisonuc = oncekisonuc / yenisayi
  }
  else if (islem == "*") {
    oncekisonuc = oncekisonuc * yenisayi
  }
  else if (islem == "=") {
    oncekisonuc = yenisayi
  }
  else { 
    oncekisonuc = yenisayi
  }
  
  document.hesapmakinesi.sonuc.value = oncekisonuc
  rakamekle = false
  islem = yeniislem
} 

function sayiyaz(rakam)
{
  if (rakamekle) {
    document.hesapmakinesi.sonuc.value += rakam
  }// http://www.bilisimogretmeni.com/
  else {
    document.hesapmakinesi.sonuc.value = rakam
    rakamekle = true
  }
}
-->
</script>
</head>
<body>
<form name="hesapmakinesi">
<input type="field" name="sonuc" value="0" width=20 align="right">
<br>
<input type="button" name="7" value="7" onClick="sayiyaz(7)">
<input type="button" name="8" value="8" onClick="sayiyaz(8)">
<input type="button" name="9" value="9" onClick="sayiyaz(9)">
<br>
<input type="button" name="4" value="4" onClick="sayiyaz(4)">
<input type="button" name="5" value="5" onClick="sayiyaz(5)">
<input type="button" name="6" value="6" onClick="sayiyaz(6)">
<br>
<input type="button" name="1" value="1" onClick="sayiyaz(1)">
<input type="button" name="2" value="2" onClick="sayiyaz(2)">
<input type="button" name="3" value="3" onClick="sayiyaz(3)">
<br>
<input type="button" name="0" value="0" onClick="sayiyaz(0)">
<input type="button" name="C" value="C" onClick="temizle()">
<input type="button" name="=" value="=" onClick="hesapla('=')">
<br>
<input type="button" name="+" value="+" onClick="hesapla('+')">
<input type="button" name="-" value="-" onClick="hesapla('-')">
<input type="button" name="*" value="*" onClick="hesapla('*')">
<input type="button" name="/" value="/" onClick="hesapla('/')">
</form>
</body>
</html>

[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/JXD78/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]
adresinden uygulamayı test edebilirsiniz.