Calculator Javascript W3schools

MUAZHAN

5 min read

·

Jun 22, 2024

31

Share

Membangun Kalkulator Sederhana dengan JavaScript (W3Schools)

Artikel ini akan memandu Anda dalam membuat kalkulator sederhana menggunakan JavaScript, mengikuti contoh yang terdapat di W3Schools.

Langkah-Langkah Pembuatan Kalkulator:

1. Struktur HTML:

   Mulailah dengan membuat struktur HTML dasar untuk kalkulator. Anda akan membutuhkan beberapa elemen <button> untuk tombol angka dan operator, dan sebuah elemen <input> untuk menampilkan hasil perhitungan.

   
   
   
       
   
   
   
       
   Kalkulator Sederhana
   
       
   
       
   
           
   
               
   7
               
   8
               
   9
               
   +
           
           
   
               
   4
               
   5
               
   6
               
   -
           
           
   
               
   1
               
   2
               
   3
               
   *
           
           
   
               
   0
               
   .
               
   =
               
   /
           
       
   
       
   
   
   
   

2. JavaScript:

   Anda perlu membuat file JavaScript (script.js) untuk menangani logika kalkulator. Berikut adalah kode JavaScript dasar yang dapat Anda gunakan:

   let display = document.getElementById('display');
   let previousOperator = null;
   let previousOperand = null;
   
   function appendNumber(number) {
       display.value += number;
   }
   
   function appendOperator(operator) {
       if (previousOperator) {
           calculate();
       }
       previousOperator = operator;
       previousOperand = parseFloat(display.value);
       display.value += operator;
   }
   
   function calculate() {
       let currentOperand = parseFloat(display.value.substring(display.value.lastIndexOf(previousOperator) + 1));
       let result;
   
       switch (previousOperator) {
           case '+':
               result = previousOperand + currentOperand;
               break;
           case '-':
               result = previousOperand - currentOperand;
               break;
           case '*':
               result = previousOperand * currentOperand;
               break;
           case '/':
               result = previousOperand / currentOperand;
               break;
       }
   
       display.value = result;
       previousOperator = null;
       previousOperand = null;
   }
   

3. Penjelasan Kode JavaScript:

   • appendNumber(number): Fungsi ini menambahkan angka yang diklik ke dalam input display.
   • appendOperator(operator): Fungsi ini menambahkan operator yang diklik ke dalam input display. Ia juga menyimpan operator dan operand sebelumnya untuk digunakan dalam perhitungan.
   • calculate(): Fungsi ini melakukan perhitungan berdasarkan operator dan operand yang disimpan. Hasilnya ditampilkan dalam input display.

4. Menjalankan Kalkulator:

   Simpan kode HTML dan JavaScript di file yang terpisah. Buka file HTML di browser Anda dan Anda akan melihat kalkulator sederhana yang dapat digunakan untuk melakukan perhitungan dasar.

Meningkatkan Kalkulator:

Anda dapat menambahkan fitur dan fungsionalitas tambahan ke kalkulator sederhana ini, seperti:

• Fungsi clear: Menambahkan tombol "C" untuk membersihkan display.
• Fungsi backspace: Menambahkan tombol "Backspace" untuk menghapus karakter terakhir dalam display.
• Fungsi akar kuadrat: Menambahkan tombol untuk menghitung akar kuadrat dari angka yang dimasukkan.
• Fungsi persentase: Menambahkan tombol untuk menghitung persentase dari angka yang dimasukkan.
• Fungsi memori: Menambahkan fungsi untuk menyimpan dan memanggil hasil perhitungan sebelumnya.

Kesimpulan:

Artikel ini menunjukkan contoh sederhana tentang bagaimana membuat kalkulator dasar menggunakan JavaScript. Dengan mempelajari contoh ini, Anda dapat membangun kalkulator yang lebih kompleks dengan menambahkan fitur tambahan dan fungsionalitas yang lebih advanced.