İlk olarak ekrana hesap makinemizin tuşlarını ekleyelim.
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.
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.
<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>
<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