Calculator Html Javascript W3schools

MUAZHAN

5 min read

·

Jun 24, 2024

36

Share

Membuat Kalkulator Sederhana dengan HTML, JavaScript, dan W3Schools

Artikel ini akan memandu Anda dalam membuat kalkulator sederhana menggunakan HTML, JavaScript, dan referensi dari W3Schools.

1. HTML Struktur

Pertama, kita akan membuat struktur dasar HTML untuk kalkulator kita. Kode berikut ini akan membuat tampilan dasar kalkulator dengan tombol-tombol numerik, operator, dan layar untuk menampilkan hasil:

  
  



  

    

    

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

  

2. JavaScript Logic

Bagian ini berisi kode JavaScript yang menangani logika kalkulator:

• appendNumber(number): Menambahkan angka yang ditekan ke currentInput dan menampilkannya di layar.
• appendOperator(operator): Menambahkan operator yang ditekan ke currentInput dan menampilkannya di layar.
• calculate(): Menghitung ekspresi yang ada di currentInput menggunakan eval() dan menampilkan hasilnya di layar. try...catch digunakan untuk menangani kesalahan dalam kasus input yang tidak valid.

3. Penjelasan Lebih Lanjut

• eval(): Fungsi eval() mengeksekusi kode JavaScript yang diberikan sebagai string. Ini digunakan untuk mengevaluasi ekspresi matematika yang dibentuk dari currentInput.
• try...catch: Blok try...catch digunakan untuk menangani kesalahan yang mungkin terjadi selama proses evaluasi. Jika eval() menemukan kesalahan, kode dalam blok catch akan dijalankan, menampilkan pesan kesalahan di layar.

4. Penting untuk Diingat

• Kalkulator ini masih sederhana dan memiliki beberapa batasan. Misalnya, ia tidak menangani operasi kompleks seperti akar kuadrat atau trigonometri.
• Penggunaan eval() memiliki risiko keamanan jika kode JavaScript dibentuk dari input pengguna. Dalam aplikasi nyata, Anda perlu memvalidasi input pengguna dan menghindari menggunakan eval() langsung.

5. Pengembangan Lebih Lanjut

Anda dapat mengembangkan kalkulator ini lebih lanjut dengan menambahkan fitur-fitur tambahan, seperti:

• Riwayat Operasi: Menyimpan riwayat operasi yang dilakukan pengguna.
• Tombol Hapus: Memberikan kemampuan untuk menghapus input terakhir atau seluruh input.
• Fungsi Matematika: Menambahkan tombol untuk fungsi matematika seperti akar kuadrat, pangkat, dan trigonometri.

Dengan menggunakan W3Schools sebagai referensi, Anda dapat menemukan informasi lebih lanjut tentang HTML, JavaScript, dan bagaimana membuat kalkulator yang lebih kompleks dan canggih.