Cara menggunakan calculator javascript

Artikel ini merupakan potongan kode sederhana untuk membuat sebuah kalkulator dengan menggunakan Javascript.

Pertama buat sebuah fungsi javascript untuk menghitung angka yang diinput.

function hitung(pilihan)
{
    var bil1=document.getElementById('angka1').value;
    var bil2=document.getElementById('angka2').value;
    bil1 = parseInt(bil1)
    bil2 = parseInt(bil2)
    if (pilihan=='tambah'){
        document.getElementById('hasil').value = bil1 + bil2;
    }
    else if(pilihan == 'kurang'){
        document.getElementById('hasil').value = bil1 - bil2;
    }
    else if(pilihan == 'kali'){
        document.getElementById('hasil').value = bil1 * bil2;
    }
    else {
        document.getElementById('hasil').value = bil1 / bil2;
    }
    document.getElementById('hasil').style.backgroundColor="#CCC";
}

Keterangan :

  1. function hitung(pilihan)
    1. hitung adalah nama method
    2. pilihan adalah parameter yang digunakan dalam method hitung, proses perhitungan akan dilihat dari nilai parameternya
  2. var bil1=document.getElementById(‘angka1’).value;Artinya, variabel bil1 bernilai sesuai dengan nilai (value) pada element yang memiliki id angka1
  3. bil1 = parseInt(bil1)parseInt(bil1), artinya konversi nilai bil1 menjadi tipe integer
  4. if (pilihan==’tambah’)artinya, jika nilai dari parameter pilihan adalah ‘tambah’
  5. document.getElementById(‘hasil’).value = bil1 + bil2;Artinya, mengatur nilai dari element yang memiliki id ‘hasil’ dengan nilai dari (bil1 + bil2)
  6. document.getElementById(‘hasil’).style.backgroundColor=”#CCC”;Menyisipkan style css (backgroundColor) pada element yang memiliki id ‘hasil’

HTML




tamba>
kuran>
kal>
bag>


Keterangan

tambah

onclick=”hitung(this.value)”, artinya memanggil method hitung dengan nilai (value) dari element tersebut pada saat element tersebut di klik

Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S

Cara menggunakan calculator javascript

KOMPTIK - Mendesain menggunakan HTML dan CSS memang menyenangkan bagi orang yang menyukai bahasa pemrograman web seperti dalam membuat kalkulator sederhana. Membuat kalkulator dengan javascript di postingan blogspot memang pembelajaran dasar mengenal HTML dan CSS, namun seringkali ini biasa terlewatkan. Seperti diketahui JavaScript adalah bahasa pemrograman klien yang artinya kode program dapat dilihat dari web browser, kelebihan dari bahasa java script ini adalah halaman tidak perlu di reload.

{tocify} $title={Table of Contents}

Padahal pada pembelajarannya sudah banyak orang mendesain website menggunakan tambahan framework seperti Bootstrap, Code Igniter, Laravel dan masih banyak lagi. Setidaknya jika kita mempelajari dasar-dasar HTML dan CSS tanpa framework, selain kita tahu alur kerja masing-masing kodenya juga bisa mengulang lebih cepat dalam membuat program. 

Cara Membuat Kalkulator dengan Javascript

Untuk membuat kalkulator dengan javasript, kita harus mempunyai script coding yang sudah jadi pada notepad++ dan dipindahkan pada postingan blogspot.

Berikut contoh script kalkulator sederhana.

Salin kode diatas dan letakkan pada postingan blogspot "html" bukan teks "compose". Kemudian simpan dan lihat hasilnya.

Jika kamu ingin menjalankannya pada local komputer, kamu salin ke notepad++ dan save ke ekstensi .hmtl misalnya kalkulator.html (Hyper Text Markup Language file) kemudian klik Run pilihan browser.

Hasil Tampilan

Sekarang coba jalankan program dengan menggunakan browser yang kamu punya. Untuk hasilnya kamu bisa melihat tampilan dari live demo dibawah ini.

Kalkulator Sederhana dapat Digunakan oleh?

Kalkulator ini dapat digunakan oleh semua orang yang berhubungan dengan perhitungan dasar karena hanya memiliki perkalian, pembagian, pengurangan dan tambah. Kalkulator ini cocok untuk perhitungan cepat dan bisa juga untuk melatih anak mengenal coding dan hitungan.

Kesimpulan

Itulah cara membuat kalkulator dengan javascript pada postingan blogspot. Kamu juga dapat memodifikasi dan mengembangkan kode sumber yang saya berikan sesuai dengan kreasi masing-masing. Setiap program yang dibuat harus memenuhi syarat agar dapat digunakan dengan nyaman, seperti kalkulator sederhana yang mudah dipahami sebagai dasar pemrograman.

Penutup

Demikian membuat kalkulator dengan javascript yang saya dapat sampaikan, semoga dapat bermanfaat dan menjadi referensi belajar dasar pemrograman web untuk kamu. Jangan lupa ikuti terus blog ini untuk mendapatkan update artikel terbaru lainnya.