Skip to content Skip to sidebar Skip to footer

Membuat Program Penjumlahan Sederhana Dengan HTML dan Javascript

Program penjumlahan sederhana dengan javascript yang akan saya sajikan pada artikel ini, hampir sama fungsinya seperti kalkulator. Namun bedanya di program ini hanya mencangkup beberapa operasi aritmatika tidak selengkap kalkulator yang pernah saya sajikan pada artikel sebelumnya. Cara Membuat Kalkulator Sederhana Menggunakan HTML, CSS dan JavaScript

Disini akan memberikan tutorial membuat penjumlahan menggunakan html dan javascrpt (ditambah CSS) untuk menghiasi tampilan. Dengan menggunakan form dan function onclick() untuk melakukan operasi aritmatika  penjumlahan, pengurangan, perkalian, dan pembagian kemudian ditambahkan tombol clear yang berfungsi untuk mereset seluruh angka.

Adapun parseInt() yang digunakan pada program ini berfungsi untuk mengubah nilai String dari tag Input menjadi Integer. Baca selengkapnya Memahami penggunaan parseInt() di javascript

Dan juga alert() berfungsi untuk memberikan pesan dialog (popup box) yang saya gunakan pada program ini apabila tidak ada data/angka yang dimasukan maka akan muncul pesan "angka kosong". Pelajari selengkanya Memahami penggunaan popup box pada javascript

Oke, langsung saja berikut adalah tutorial membuat penjumlahan menggunakan HTML, CSS dan Javascript sederhana.

Program Penjumlahan Sederhana Dengan Javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>

 <style>

  form{
   background:linear-gradient(gray,steelblue);
   color: white;
   padding: 15%;
   margin:auto;
  }
 </style>

</head>
<body>

<!-- Form input data Angka -->
 <form name="form" align="center">
  <span>Angka 1</span>
  <input type="text" name="angka1" size="3"><br><br>
  <span>Angka 2</span>
  <input type="text" name="angka2" size="3"><br> <br>
  <span>Hasil</span>
  <input type="text" name="hasil" size="6" value=""><br><br><br> 

  <input type="button" onclick="tambah()" value="+">
  <input type="button" onclick="kurang()" value="-">
  <input type="button" onclick="kali()" value="X">
  <input type="button" onclick="bagi()" value="/">
  <input type="reset"  onclick="clear()" value="CLEAR">
 </form>

<!-- javascript -->
 <script>
  function cek(){
   if (form.angka1.value == "" || form.angka2.value == "") {
    alert("Angka Kosong");
    exit
   }
  }
  function tambah(){
   cek();
   a = parseInt(form.angka1.value);
   b = parseInt(form.angka2.value);
   form.hasil.value = a+b;
  }
  function kurang(){
   cek();
   a = parseInt(form.angka1.value);
   b = parseInt(form.angka2.value);
   form.hasil.value = a-b;
  }
  function kali(){
   cek();
   a = parseInt(form.angka1.value);
   b = parseInt(form.angka2.value);
   form.hasil.value = a*b;
  }
  function bagi(){
   cek();
   a = parseInt(form.angka1.value);
   b = parseInt(form.angka2.value);
   form.hasil.value = a/b;
  }

 </script>
</body>
</html>
Hasil :
Gambar gif Penjumlahan sederhana dengan javascript

Post a comment for "Membuat Program Penjumlahan Sederhana Dengan HTML dan Javascript"