Membuat aplikasi kalkulator sederhana dengan javascript

Masdita.com, Javascript adalah bahasa pemrograman yang akan kita pelajari di tutorial kali ini. Apa sih javascript itu? Saat ini javascript bisa digunakan untuk mendevelop program desktop, mobile, game dan lain-lain, selain digunakan di sisi client javascript juga bisa digunakan di sisi server. Ini membuat bahasa pemrograman javascript banyak di gemari kalangan programmer untuk mendevelop suatu sistem. Pada tutorial saya sebelumnya sudah saya jelaskan membuat website dengan mudah menggunakan html, kali  ini saya akan menjelaskan bagaimana cara membuat aplikasi kalkulator sederhana dengan javascript. Mari kita ikuti langkah-langkah sebagai berikut

Apa saja yang disiapkan untuk belajar javascript?

1. Web browser (Google Chrome, Firefox, Opera)
2. Xampp
3. Teks editor

Untuk sementara 3 itu saja dulu sudah cukup ya sob

Langsung saja ya Sob

Buat file index.html

<style> input{ display:block; } </style> <input type='text' name='nilai' placeholder='input'/> <button onclick='tambah()'>+</button> <button onclick='kurang()'>-</button> <button onclick='kali()'>x</button> <button onclick='bagi()'>:</button> <button onclick='hitung()'>Hitung</button> <input type='text' name='hasil' placeholder='output'/> <script type="text/javascript"> function tambah(){ val = document.getElementsByName('nilai')[0].value; document.getElementsByName('nilai')[0].value += "+"; } function kurang(){ val = document.getElementsByName('nilai')[0].value; document.getElementsByName('nilai')[0].value += "-"; } function kali(){ val = document.getElementsByName('nilai')[0].value; document.getElementsByName('nilai')[0].value += "*"; } function bagi(){ val = document.getElementsByName('nilai')[0].value; document.getElementsByName('nilai')[0].value += "/"; } function hitung(){ val = document.getElementsByName('nilai')[0].value; document.getElementsByName('hasil')[0].value = eval(val); } </script>

Jika di jalankan maka akan seperti di bawah tampilannya 

Atau bisa juga di lihat di demo programnya disini

Mari kita bahas satu-satu kode program diatas

<input type='text' name='nilai' placeholder='input'/> Ini berguna untuk membuat form input guna menghitung inputan dengan name “nilai”

<button onclick='tambah()'>+</button> digunakan untuk button atau tombol “+” dan menjalankan function tambah ketika diklik

<input type='text' name='hasil' placeholder='output'/> digunakan untuk form inputan hasil nya dengan name “hasil”

function tambah(){

  val = document.getElementsByName('nilai')[0].value;

  document.getElementsByName('nilai')[0].value += "+";

}

Fungsi tambah digunakan untuk menghitung penjumlahan dengan mengambil dari name “nilai”, value berarti action dari tombol tersebut adalah “+” jika ditekan.

Sekian tutorial untuk cara membuat aplikasi kalkulator sederhana dengan javascript, ikuti terus tutorial-tutorial dari saya hanya di masdita.com, semoga bermanfaat.

Bagikan Artikel ini