Membuat Kalkulator Sederhana dengan Javascript

Desember 28, 2020 Posting Komentar

Seperti telah kita ketahui bersama bahwa bahasa javascript merupakan bahasa pemrograman client yang berjalan pada browser baik itu chrome,mozilla, opera dll, semua proses eksekusi dijalankan dikomputer client, jika javascript pada komputer client tidak dijalankan maka program tidak akan dapat berjalan, maka pastikan javascript anda tidak dinonakifkan namun anda tidak perlu khawatir karena secara default javascript pada semua browser secara default biasanya sudah dalam keadaan hidup. salah satu kelebihan dari javascript yaitu halaman tidak perlu reload/refresh ketika mengesekusi sebuah program. sehingga saat ini pemrograman menggunakan javascript makin banyak diminati oleh kalangan programmer apalagi dengan munculnya berbagai macam framework yang ada saat ini, seperti reactjs,vuejs,angularjs dll.

Saat ini kita akan mempelajari dasar bahasa pemrograman javascript yaitu kita akan membahas bagaimana caranya membuat kalkulator sederhana menggunakan javascript. kalkulator yang akan dibuat digunakan untuk menghitung nilai ujian akhir, pada nilai akhir tersebut akan terdapat beberapa komponen penilaian diantaranya adalah :

Nilai Absen
Nilai Tugas
Nilai UTS
Nilai UAS

dari nilai diatas kita asumsikan saja memiliki bobot yang sama sehingga untuk nilai akhir kita akan ambil nilai rata-rata nya saja. oke langsung saja kita mulai dengan membuat desain form seperti gambar berikut :

Desain form diatas dibuat menggunakan HTML dan Bootstrap 4 berikut adalah script dari design tersebut :


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hitung Nilai Akhir</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <script languange="Javascript" type="text/javascript">
      function hitung() {
        var angka_absen = parseFloat(document.getElementById("absen").value);
        var angka_tugas = parseFloat(document.getElementById("tugas").value);
        var angka_uts = parseFloat(document.getElementById("uts").value);
        var angka_uas = parseFloat(document.getElementById("uas").value);
        var hasil = (angka_absen + angka_tugas + angka_uts + angka_uas) / 4;
        document.getElementById("nilai_akhir").value = hasil;
        console.log(hasil);
      }
    </script>
  </head>
  <body>
    <div class="jumbotron">
      <h1 class="display-3">HITUNG NILAI AKHIR</h1>
      <p class="lead">Belajar menghitung nilai akhir menggunakan Javascript</p>
      <hr class="my-2" />
    </div>
    <div class="container-fluid">
      <form name="nilai">
        <div class="form-group">
          <label for="">Absen</label>
          <input
            type="number"
            class="form-control"
            name="absen"
            id="absen"
            placeholder="Nilai Absen"
          />
        </div>
        <div class="form-group">
          <label for="">Tugas</label>
          <input
            type="number"
            class="form-control"
            name="tugas"
            id="tugas"
            placeholder="Nilai Tugas"
          />
        </div>
        <div class="form-group">
          <label for="">UTS</label>
          <input
            type="number"
            class="form-control"
            name="uts"
            id="uts"
            placeholder="Nilai UTS"
          />
        </div>
        <div class="form-group">
          <label for="">UAS</label>
          <input
            type="number"
            class="form-control"
            name="uas"
            id="uas"
            placeholder="Nilai UAS"
          />
        </div>
        <button type="button" class="btn btn-primary" onclick="hitung()">
          Htung
        </button>
        <button type="reset" class="btn btn-secondary">Reset</button>
        <div class="form-group">
          <label for="">Nilai Akhir</label>
          <input
            type="number"
            class="form-control"
            name="nilai_akhir"
            id="nilai_akhir"
            placeholder="Nilai Akhir"
            readonly
          />
        </div>
      </form>
    </div>
  </body>
</html>

Saya asumsikan anda telah mengenal tag HTML dan cara penggunaannya sehingga yang akan dijelaskan adalah potongan codign javascriptnya sajam Berikut adalah Penjelasan coding javascript diatas :

Coding diatas merupakan coding javascript yang terdiri dari beberapa baris diantaranya :

Baris 1 :

baris pertama adalah deklarasi untuk membuat coding javascript, coding javascript tersebut harus berada diatara tag <script></script> jika coding javascript tidak berada diantara tag tersebut maka tidak akan terbaca.

Baris 2 :

baris kedua tersebut merupakan sebuah function / fungsi untuk menghitung nilai, fungsi tersebut dinamai dengan hitung()

Baris 3-6 :

pada bari 3-6 merupakan deklarasi variabel untuk mengambil nilai yang diinputkan pada form sebelum diolah

var,berguna untuk deklarasi nama variabel
parseFloat, berguna untuk konversi nilai yang diinputkan kedalam bentuk float
getElementById, digunakan untuk mengambil data yang diinputkan (tag input) berdasarkan id.

Baris 7 :

Pada baris ke-7 terdapat sebuah variabel lagi dengan nama hasil untuk menampung data yang akan dihitung, data yang dihitung merupakan varibel angka_absen,angka_tugas,angka_uts,angka_uas variabel-variabel tersebut akan dijumlahkan kemudian dibagi empat untuk mengambil nilai rata-rata.

Baris 8 :

baris ke-8 berguna untuk mengisi nilai_akhir dari tag input id nilai_akhir pada form, kemudian diisi dengan variabel hasil yang merupakan nilai yang telah mengampung data nilai hasil kalkulasi nilai akhir pada baris ke-7.

Baris 9 :

console.log dugunakan untuk melihat hasil menggunakan console / developer mode dalam browser untuk membuka developer mode dengan cara klik kanan pada halaman > pilih inspect > pilih console.

sekian pembahasan mengenai Membuat Kalkulator Sederhana dengan Javascript, mudah-mudahan menambah wawasan mengenai bahasa pemgorgaman javascript, terimakasih.

YIISolutions