Cara Membuat Kalkulator Sederhana Dengan Java Script
JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript sangat populer di internet dan dapat bekerja di sebagian besar web browser populer seperti Google Chrome, Internet Explorer, Mozilla Firefox, Netscape dan Opera.
Pada pembahasan ini kita akan mengaplikasikan JavaScript untuk membuat sebuah aplikasi kalkulator yang sederhana. 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.
Pertama buat terlebih dahulu file “calculator.html”. Selanjutnya buatlah form yang terdiri dari 3 textbox, 1 combo box, dan 1 button. Berikut kode nya:
| <html> | |
| <head> | |
| <title>Kalkulator</title> | |
| </head> | |
| <body> | |
| <h4>Kalkulator</h4> | |
| <input type=”text” id=”angkaSatu”> | |
| <select id=”op”> | |
| <option value=”+”>+</option> | |
| <option value=”-”>-</option> | |
| <option value=”x”>x</option> | |
| <option value=”/”>/</option> | |
| </select> | |
| <input type=”text” id=”angkaDua”> | |
| <input type=”submit” onclick=”kalkulator()” value=”=”> | |
| <input type=”text” id=”hasil”> | |
| </body> | |
| </html> |
Mari kita modifikasi dengan menambahkan JavaScript pada kode html tersebut agar kalkulator dapat berfungsi. Untuk penempatannya di dalam tag <head>. Berikut kode nya:
| <script language="JavaScript" type="text/javascript"> | |
| function kalkulator() { | |
| //variable angka satu | |
| var angkaSatu = parseInt(document.getElementById("angkaSatu").value); | |
| //variable angka dua | |
| var angkaDua = parseInt(document.getElementById("angkaDua").value); | |
| //variable operasi aritmatik | |
| var op = document.getElementById("op").value; | |
| //variable angka hasil | |
| var hasil = document.getElementById("hasil"); | |
| //variable untuk total angka satu dan angka dua | |
| var total; | |
| if (isNaN(angkaSatu) || isNaN(angkaDua)) { | |
| alert('isi form dengan angka!') | |
| } else { | |
| if (op == "+") { | |
| total = angkaSatu + angkaDua; | |
| } else if (op == "-") { | |
| total = angkaSatu - angkaDua; | |
| } else if (op == "x") { | |
| total = angkaSatu * angkaDua; | |
| } else { | |
| total = angkaSatu / angkaDua; | |
| } | |
| } | |
| hasil.value = total; | |
| } | |
| </script> |
Apa fungsi isNaN() pada kode tersebut? kode isNaN() berfungsi untuk mendeteksi apakah input berupa teks atau bilangan. jika input bukan sebuah angka, maka akan mucul peringatan seperti ini.
Jika input berupa angka, maka operasi bilangan yang kita pilih akan berjalan.
Sekian tutorial yang dapat saya bagikan, terima kasih dan selamat mencoba!
Ketika kamu lelah dan kecewa, maka saat itu kamu sedang belajar tentang kesungguhan.#Wawasan ku luas banget
Tidak ada komentar:
Posting Komentar