JavaScript Örnekleri – Basit Hesap Makinesi Yapımı

admin tarafından

25 Şubat 2014 2325 kez okundu Okuma süresi: 3dk, 1sn

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.

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.

Bu İçeriğe Tepkin Ne Oldu?