JavaScript Dört İşlem Örneği

Bu yazımızda javascript ile toplama çıkarma çarpma ve bölme işlemlerini yapacağız. Öncelikle klavyeden girilen iki sayıyı text kutularına yazdırma işlemini yapıyoruz. Daha sonra ayrı ayrı fonksiyon kullanarak toplama çıkarma çarpma ve bölme işlemlerini yaptırıyoruz. İstediğimiz sonucu kendi butonuna tıklayarak yine ekrana yazdırıyoruz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.bilisimkonulari.com</title>
<script type="text/javascript">
function toplam() {
var deger1 = parseInt(document.getElementById('sayi1').value);
var deger2 = parseInt(document.getElementById('sayi2').value);
document.getElementById('sonuc').value = deger1 + deger2;
}
function cikartma() {
var deger1 = parseInt(document.getElementById('sayi1').value);
var deger2 = parseInt(document.getElementById('sayi2').value);
document.getElementById('sonuc').value = deger1 - deger2;
}
function carpma() {
var deger1 = parseInt(document.getElementById('sayi1').value);
var deger2 = parseInt(document.getElementById('sayi2').value);
document.getElementById('sonuc').value = deger1 * deger2;
}
function bolme() {
var deger1 = parseInt(document.getElementById('sayi1').value);
var deger2 = parseInt(document.getElementById('sayi2').value);
document.getElementById('sonuc').value = deger1 / deger2;
}
</script>
</head>
<body>

<table width="313" height="127" border="0">
  <tr>
    <td colspan="2" align="center" bgcolor="#00CCFF"><strong>Dört İşlem</strong></td>
  </tr>
  <tr>
    <td width="119" bgcolor="#FFFF99">Birinci Sayı</td>
    <td width="184" bgcolor="#00FFFF"><input type="text" id="sayi1" /></td>
  </tr>
  <tr>
    <td bgcolor="#FFFF99">İkinci Sayı</td>
    <td bgcolor="#00FFFF"><input type="text" id="sayi2" /></td>
  </tr>
  <tr bgcolor="#FFFF99">
    <td colspan="2"><input type="button" value="Topla" id="topla" onclick="toplam()" />
    <input type="button" value="Çıkar" id="fark" onclick="cikartma()" />
    <input type="button" value="Çarp" id="carp" onclick="carpma()" />
    <input type="button" value="Böl" id="bol" onclick="bolme()" /></td>
  </tr>
  <tr>
    <td bgcolor="#FFFF99">Sonuç</td>
    <td bgcolor="#00FFFF"><input type="text" id="sonuc" /></td>
  </tr>
</table>
</body>
</html>

Programın Tarayıcıda görünen şekli: