Tutorial Java Script: Aplikasi Kalkulator
Javascript merupakan salah satu pemrograman web yang berjalan disisi client. Dalam percobaan ini, kita akan membuat sebuah aplikasi kalkulator sederhana yang terdiri dari operasi : addition (penjumlahan), subtraction (pengurangan), multiply (perkalian) dan division (pembagian).
Pertama-tama buatlah sebuah file bernama style.css yang berisi kode sebagai berikut:
div.row { clear: both; padding-top: 8px; } div.row span.label { float: left; width: 120px; text-align: right; } div.row span.formw { float: right; width: 335px; text-align: left; }
Kemudian buatlah file yang bernama index.html yang berisi kode sebagai berikut:
<html> <head><title>Aplikasi Kalkulator dengan Java Script</title> <link rel =stylesheet href=style.css> </head> <body> <script language="JavaScript"> function addition() { var a=Number(document.opform.bilangan1.value); var b=Number(document.opform.bilangan2.value); var c=a+b; document.opform.hasil.value=c; } function subtraction() { var a=Number(document.opform.bilangan1.value); var b=Number(document.opform.bilangan2.value); var c=a-b; document.opform.hasil.value=c; } function multiply() { var a=Number(document.opform.bilangan1.value); var b=Number(document.opform.bilangan2.value); var c=a*b; document.opform.hasil.value=c; } function division() { var a=Number(document.opform.bilangan1.value); var b=Number(document.opform.bilangan2.value); var c=a/b; document.opform.hasil.value=c; } </script> <div style="width: 550px; background-color: #fffcc9; border: 1px dotted #333; padding: 5px; margin: 0px auto";> <form name="opform"> <div class="row"> <span class="label">First Number</span> <span class="forming"><input type="text" size="25" name="bilangan1"/>
</span> </div> <div class="row"> <span class="label">Second Number:</span> <span class="forming"><input type="text" size="25" name="bilangan2"/>
</span> </div> <div class="row"> <span class="label">Result:</span> <span class="forming"><input type="text" size="25" name="hasil"/></span> </div> <br><br> <span class="forming"></span> <INPUT type="button" value="Add" onclick="javascript:addition();"> <INPUT type="button" value="Subtract" onclick="javascript:subtraction();"> <INPUT type="button" value="Multiply" onclick="javascript:multiply();"> <INPUT type="button" value="Divide" onclick="javascript:division();"> <div class="spacer"> </div> </form> </div> </body> </html>
Output dari program tersebut jika kita memilih operasi multiply (perkalian) :
Silahkan klik Live Demo untuk melihat hasilnya.
