Cara Membuat Kalkulator Dengan Java Script

-
Kali ini saya akan membagikan tutorial cara membuat kalkulator sederhana dengan java script. Kita ketahui java script adalah bahasa pemrograman klien. Artinya kode program dapat dilihat dari web browser. Kelebihan bahasa java script ini halaman tidak perlu reload.


<!--nama file calc.php-->
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style type="text/css">
.tombol{
background-color: deepskyblue;
}
.tabel{
background-color: gold;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<form name="calculator">

<table style="background-color: " class="tabel">
<caption>Calculator</caption>
<tr>
<td>Angka 1</td><td>:</td><td><input type="number" name="angka1"></td>
</tr>
<tr>
<td>Angka 2</td><td>:</td><td><input type="number" name="angka2"></td>
</tr>
<tr>
<td>Hasil</td><td>:</td><td><input type="number" name="hasil"></td>
</tr>
<tr>
<td colspan="3" align="center">
<input class="tombol" type="button" onclick="tambah()" value="  +  ">
<input class="tombol" type="button" onclick="kurang()" value="  -  ">
<input class="tombol" type="button" onclick="kali()" value="  *  ">
<input class="tombol" type="button" onclick="bagi()" value="  /  ">
</td>
</tr>
</table>
</form>

 </body>
</html>
<script type="text/javascript">
function tambah(){
var angka1=parseFloat(document.calculator.angka1.value);
var angka2=parseFloat(document.calculator.angka2.value);
var hasil= angka1+angka2;
document.calculator.hasil.value=hasil;
}
function kurang(){
var angka1=parseFloat(document.calculator.angka1.value);
var angka2=parseFloat(document.calculator.angka2.value);
var hasil= angka1-angka2;
document.calculator.hasil.value=hasil;
}
function kali(){
var angka1=parseFloat(document.calculator.angka1.value);
var angka2=parseFloat(document.calculator.angka2.value);
var hasil= angka1*angka2;
document.calculator.hasil.value=hasil;
}
function bagi(){
var angka1=parseFloat(document.calculator.angka1.value);
var angka2=parseFloat(document.calculator.angka2.value);
var hasil= angka1/angka2;
document.calculator.hasil.value=hasil;
}
</script>

Kita akan bahas bagian-bagian dari kode diatas.
<style type="text/css">
.tombol{
background-color: deepskyblue;
}
.tabel{
background-color: gold;
margin: 10px;
padding: 10px;
}
</style>
Kode di atas, adalah internal css untuk mengatur tabel dan tombol. Class yang ada yaitu tombol dan kelas tabel. Pada class tombol, di atur warna background tombol deepskyblue. Pada class table yang diatur warna background yaitu gold, margin 10 pixel dan padding 10 pixel.

<form name="calculator">
<table class="tabel">
<caption>Calculator</caption>
<tr>
<td>Angka 1</td><td>:</td><td><input type="number" name="angka1"></td>
</tr>
<tr>
<td>Angka 2</td><td>:</td><td><input type="number" name="angka2"></td>
</tr>
<tr>
<td>Hasil</td><td>:</td><td><input type="number" name="hasil"></td>
</tr>
<tr>
<td colspan="3" align="center">
<input class="tombol" type="button" onclick="tambah()" value="  +  ">
<input class="tombol" type="button" onclick="kurang()" value="  -  ">
<input class="tombol" type="button" onclick="kali()" value="  *  ">
<input class="tombol" type="button" onclick="bagi()" value="  /  ">
</td>
</tr>
</table>
</form>

Kode di atas fungsinya untuk membuat form yang terdiri dari 3 input dan 4 tombol. untuk menyusun elemen form kita gunakan tabel.

Bagian-bagian yang penting adalah name form dan name elemen form. Name form adalah calcularor dan name elemen form adalah angka1 dan angka2. Pada setiap tombol akan memanggil fungsi java script dengan event onclick. Tombol tambah akan memanggil fungsi tambah. Tombol kurang akan memanggil fungsi kurang. Tombol kali akan memanggil fungsi kali dan tombol bagi akan memanggil fungsi bagi.

<script type="text/javascript">
function tambah(){
var angka1=parseFloat(document.calculator.angka1.value);
var angka2=parseFloat(document.calculator.angka2.value);
var hasil= angka1+angka2;
document.calculator.hasil.value=hasil;
}
function kurang(){
var angka1=parseFloat(document.calculator.angka1.value);
var angka2=parseFloat(document.calculator.angka2.value);
var hasil= angka1-angka2;
document.calculator.hasil.value=hasil;
}
function kali(){
var angka1=parseFloat(document.calculator.angka1.value);
var angka2=parseFloat(document.calculator.angka2.value);
var hasil= angka1*angka2;
document.calculator.hasil.value=hasil;
}
function bagi(){
var angka1=parseFloat(document.calculator.angka1.value);
var angka2=parseFloat(document.calculator.angka2.value);
var hasil= angka1/angka2;
document.calculator.hasil.value=hasil;
}
</script>

Untuk menuliskan kode java script maka harus di dalam tag script buka dan tutup. Pada fungsi tambah, variabel angka1 di isi oleh nilai element form dengan name angka1 (var angka1 = parseFloat(document.calculator.angka1.value);). Begitu juga dengan variabel angka2. Untuk variabel hasil nilainya di isi oleh variabel angka1 ditambah variabel angka2. Terakhir adalah mengembalikan nilai ke elemen form bernama hasil (document.calculator.hasil.value=hasil;).
Untuk kurang, kali dan bagi cara nya hampir sama, perbedaannya hanya pada operator.

Coba aplikasinya di sini.


Calculator
Angka 1:
Angka 2:
Hasil:

Popular posts from this blog

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

-
Image
Link adalah bagian dari HTML yang fungsinya untuk menghubungkan satu halaman dengan halaman lain. Link juga bisa diartikan sebagai cara berpindah dari satu halaman ke halaman lain. 1. Link ke Halaman Lain Tag yang digunakan untuk membuat link adalah tag anchor atau tag <a> , yang berpasangan dengan </a> . Link biasanya menggunakan objek untuk di klik yang di letakkan diatara tag buka dan tag tutup. Teks Tombol (Button) Gambar Ketiga objek di atas sering dijadikan link, dan tidak ada kategori yang paling sering digunakan. Mimilih teks, tombol, atau gambar sebagai link sangat opsional atau tidak ada keharusan. Format link <a href="url" name="nama_link"> Objek Link </a> 1.1. Contoh Link Dengan Objek Teks <!--nama file link.html--> Untuk ke halaman selanjutnya <a href="link2.html">Klik disini</a> Teks klik disini jika di klik halaman akan berpindah ke link2.html. Pada conto
Read more

Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis

-
Image
Kali ini saya akan membuat tutorial bagaimana menggunakan template gratis sebagai template web dinamis. Pertama anda download terlebih dulu templatenya disini . Pada tutorial ini saya menggunakan template admin LTE 2. Pada template ini saya memecah bagian index.php dan menyatukan kembali dengan include, tujuannya agar template terbagi-bagi dan mudah dipahami. Selain itu, pembagian ini lah yang membuat web menjadi dinamis. Perlu diingat cara saya ini bukanlah cara satu-satu nya Cara Menggunakan template Admin LTE Sebagai Template Web Dinamis . Cara ini saya sharing karena menurut saya adalah cara yang cukup efisien dan mampu menangani semua halaman yang akan kita buat. Bagian terpenting nya adalah mampu menghasilkan program sesuai yang kita harapkan dengan cara yang lebih mudah dibuat. Pertama kita buat folder di htdocs template kemudian ekstrak file zip nya di folder tersebut. Selanjutnya buka folder template dan rename file index.html menjadi index.php  . Buka file
Read more