Java script Hesap makinesi

Burada java script ile hesap makinesi  yapmayı öğreneceğiz

kodlar ve açıklamaları
--------------------------------------------------------------------------------------------------------------
<form name="hesapmakinesi">  //formumuzun adı:hesapmakinesi
  <input type="text" disabled id="total" style="text-align: right; background: white; width:"> 
 </form> 
  
 <table> 
  <tr> 
   <td><input type="button" value="C" style="width: 100%" onclick="hesapmakinesi.total.value = ''"></td>//hesap makinesini sıfırlayan kod 
   <td><input type="button" value="/" style="width: 100%" onclick="hesapmakinesi.total.value += '/'"></td>  //hesap makinesindeki sayıyı bölen kod
   <td><input type="button" value="*" style="width: 100%" onclick="hesapmakinesi.total.value += '*'"></td>
//hesap makinesindeki sayıyı çarpan kod.
   <td><input type="button" value="-" style="width: 100%" onclick="hesapmakinesi.total.value += '-'" ></td>
//hesap makinesindeki sayıyı çıkaran kod
  </tr> 
  <tr>  //sayı butonları başlıyor.
   <td><input type="button" value="7" onclick="hesapmakinesi.total.value += '7'"></td>//hesap makinesi sayı7
   <td><input type="button" value="8" onclick="hesapmakinesi.total.value += '8'"></td>//hesap makinesi sayı8
   <td><input type="button" value="9" onclick="hesapmakinesi.total.value += '9'"></td>//hesap makinesisayı9 
 
<td rowspan="2"><input type="button" onclick="hesapmakinesi.total.value += '+'" style="height: 50px; vertical-align: middle" value ="+"></td> 
//hesap makinesindeki sayıyı toplayan kod.
  </tr> 
  <tr> 
   <td><input type="button" value="4" onclick="hesapmakinesi.total.value += '4'"></td>//hesap makinesi sayı4 
   <td><input type="button" value="5" onclick="hesapmakinesi.total.value += '5'"></td>//hesap makinesi sayı5 
   <td><input type="button" value="6" onclick="hesapmakinesi.total.value += '6'"></td>//hesap makinesi sayı6 
  </tr> 
  <tr> 
   <td><input type="button" value="1" onclick="hesapmakinesi.total.value += '1'"></td>//hesap makinesi sayı1 
   <td><input type="button" value="2" onclick="hesapmakinesi.total.value += '2'"></td>//hesap makinesi sayı2 
   <td><input type="button" value="3" onclick="hesapmakinesi.total.value += '3'"></td>//hesap makinesi sayı3 
   <td rowspan="2"><input type="button" onclick="hesapmakinesi.total.value = eval(hesapmakinesi.total.value)" style="height: 50px; vertical-align: middle" value ="="></td> 
  </tr> 
  <tr> 
   <td colspan="2"><input type="button" style="width: 68px; text-align: center" value="0" onclick="hesapmakinesi.total.value += '0'"></td> 
   <td><input type="button" value="."  style="width: 100%" onclick="hesapmakinesi.total.value += '.' "></td> 
  </tr> 
 </table>
--------------------------------------------------------------------------------------------------------------
SADE KODLAR
<form name="hesapmakinesi"> 
  <input type="text" disabled id="total" style="text-align: right; background: white; width:"> 
 </form> 
  
 <table> 
  <tr> 
   <td><input type="button" value="C" style="width: 100%" onclick="hesapmakinesi.total.value = ''"></td>
   <td><input type="button" value="/" style="width: 100%" onclick="hesapmakinesi.total.value += '/'"></td> 
   <td><input type="button" value="*" style="width: 100%" onclick="hesapmakinesi.total.value += '*'"></td>

   <td><input type="button" value="-" style="width: 100%" onclick="hesapmakinesi.total.value += '-'" ></td>

  </tr> 
  <tr>    <td><input type="button" value="7" onclick="hesapmakinesi.total.value += '7'"></td>
   <td><input type="button" value="8" onclick="hesapmakinesi.total.value += '8'"></td>
<td><input type="button" value="9" onclick="hesapmakinesi.total.value += '9'"></td>
 
<td rowspan="2"><input type="button" onclick="hesapmakinesi.total.value += '+'" style="height: 50px; vertical-align: middle" value ="+"></td>
  </tr> 
  <tr> 
   <td><input type="button" value="4" onclick="hesapmakinesi.total.value += '4'"></td>
   <td><input type="button" value="5" onclick="hesapmakinesi.total.value += '5'"></td>
   <td><input type="button" value="6" onclick="hesapmakinesi.total.value += '6'"></td>
  </tr> 
  <tr> 
   <td><input type="button" value="1" onclick="hesapmakinesi.total.value += '1'"></td>
   <td><input type="button" value="2" onclick="hesapmakinesi.total.value += '2'"></td>
   <td><input type="button" value="3" onclick="hesapmakinesi.total.value += '3'"></td>
   <td rowspan="2"><input type="button" onclick="hesapmakinesi.total.value = eval(hesapmakinesi.total.value)" style="height: 50px; vertical-align: middle" value ="="></td> 
  </tr> 
  <tr> 
   <td colspan="2"><input type="button" style="width: 68px; text-align: center" value="0" onclick="hesapmakinesi.total.value += '0'"></td> 
   <td><input type="button" value="."  style="width: 100%" onclick="hesapmakinesi.total.value += '.' "></td> 
  </tr> 
 </table>
___________________________________________________________________________________
ÖRNEK: