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.
Kita akan bahas bagian-bagian dari kode diatas.
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.
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.
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.
Kita akan bahas bagian-bagian dari kode diatas.
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.
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.
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.