14 Nisan 2016 Perşembe

Javascript Basit Hesap Makinesi

Yazılım yeni başlayanlara ilk yaptırılan uygulama ekrana "Hello World" yazdırmaktır. Bir sonraki proje de genelde hesap makinesi yaptırmak olur. Bende can sıkıntısından bunu javascript ile yapayım dedim. Tabi detaylı değil sadece tam sayıları toplayıp çıkaran bir sistem olacak ama olsun :)

İlk olarak ekrana hesap makinemizin tuşlarını ekleyelim.

javascript_calculator_1











Hesap makinemizde işlemi yapacağımız rakamı gireceğimiz bir alan ve işlemin sonucunu gösterecek olan iki alan bulunmakta. C butonu ise makineyi sıfırlayan butonumuz. Diğer butonları biliyorsunuzdur :)

Sayfamızın body kısmının kodları şu şekilde;

<body>
<form>
<input type="text" id="result" placeholder="0" />
<label for="total">Total : </label>
<input type="text" id="total" placeholder="0" readonly />
<table>
<tr>
<td>
<input type="button" id="1" value="1" onclick="addOne()" />
</td>
<td>
<input type="button" id="2" value="2" onclick="addTwo()"/>
</td>
<td>
<input type="button" id="3" value="3" onclick="addThree()"/>
</td>
<td>
<input type="reset" id="reset" value="C" />
</td>
</tr>
<tr>
<td>
<input type="button" id="4" value="4" onclick="addFour()"/>
</td>
<td>
<input type="button" id="5" value="5" onclick="addFive()"/>
</td>
<td>
<input type="button" id="6" value="6" onclick="addSix()"/>
</td>
</tr>
<td>
<input type="button" id="7" value="7" onclick="addSeven()"/>
</td>
<td>
<input type="button" id="8" value="8" onclick="addEight()"/>
</td>
<td>
<input type="button" id="9" value="9" onclick="addNine()"/>
</td>
</tr>
</tr>
<td>
<input type="button" id="sum" value="+" onclick="sumNumbers()"/>
</td>
<td>
<input type="button" id="0" value="0" onclick="addZero()"/>
</td>
<td>
<input type="button" id="minus" value="-" onclick="minusNumbers()"/>
</td>
</tr>
</table>
</form>
</body>

Rakamların bulunduğu butonlardaki metotlarımız makinemize işlem için gerekli sayıyı oluşturmamızı sağlayacak. Toplama butonu girilen sayı ile toplamı toplayarak bize yeni toplamı oluşturacak. Çıkarma işlemi de toplama işleminin aynı mantığıyla çalışacak.

<head>
<script type="text/javascript">

function getResultValue()
{
return document.getElementById("result").value;
}

function addOne()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"1";
}

function addTwo()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"2";
}

function addThree()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"3";
}

function addFour()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"4";
}

function addFive()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"5";
}

function addSix()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"6";
}

function addSeven()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"7";
}

function addEight()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"8";
}

function addNine()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"9";
}

function addZero()
{
var resultText=getResultValue();
document.getElementById("result").value=resultText+"0";
}

function sumNumbers()
{
if(getResultValue()=="")
{
var resultValue=0;
}
else
{
 var resultValue=parseInt(getResultValue());
}
if(document.getElementById("total").value=="")
{
 var totalValue=0;
}
else
{
 var totalValue=parseInt(document.getElementById("total").value);
}
var lastTotal=resultValue+totalValue;
document.getElementById("total").value=lastTotal;
document.getElementById("result").value="";
}

function minusNumbers()
{
if(getResultValue()=="")
{
var resultValue=0;
}
else
{
 var resultValue=parseInt(getResultValue());
}
if(document.getElementById("total").value=="")
{
 var totalValue=0;
}
else
{
 var totalValue=parseInt(document.getElementById("total").value);
}
var lastTotal=totalValue-resultValue;
document.getElementById("total").value=lastTotal;
document.getElementById("result").value="";
}

</script>
</head>

Benden bu kadar. İsteyen arkadaşlar bu makineyi daha da geliştirir güzel bir örnek ortaya çıkarabilirler. Bir dahaki yazıda görüşmek üzere.

Hiç yorum yok:

Yorum Gönder