JavaScript: otaknya

Aplikasimu sekarang sudah punya kerangka dan baju. Tapi coba klik tombol Tambah-nya. Nggak terjadi apa-apa, kan?

Wajar. Ingat Bab 1: komputer itu patuh, tapi cuma ngerjain yang kita suruh. Dan kita belum menyuruhnya apa-apa. Yang kita mau sebenarnya begini:

1. Kalau tombol diklik,
2. ambil angka dari kotak harga,
3. tambahkan ke total, lalu tampilkan total yang baru.

Itu resepnya. Sekarang tinggal menerjemahkannya ke bahasa yang dimengerti browser, yaitu JavaScriptJavaScriptBahasa pemrograman yang bikin halaman web bisa bereaksi, misalnya saat diklik, menghitung, atau menyimpan data.Penjelasan lengkap →. Siap? Ini salah satu bab terpanjang, tapi juga yang paling terasa “ngoding beneran”.

Di mana JavaScript ditulis?

Di dalam tag <script>, ditaruh paling bawah, setelah semua isi halaman:

  </div>

  <script>
    // kode JavaScript di sini
  </script>
</body>

Kenapa di bawah? Karena JavaScript akan mencari elemen-elemen di halaman, dan dia hanya bisa menemukan yang sudah ada. Sama seperti kamu nggak bisa mengambil gelas dari rak kalau gelasnya belum ditaruh di sana.

Tulisan setelah // sampai ujung baris adalah komentar. Browser mengabaikannya, dan kamu bisa memakainya untuk catatan buat dirimu sendiri.

Variabel: kotak berlabel

Hal pertama yang perlu kita punya adalah tempat menyimpan total. Di dunia ngoding, tempat ini disebut variabelVariabelKotak berlabel di dalam program untuk menyimpan sebuah nilai yang bisa diganti.Penjelasan lengkap →.

let total = 0;

Bayangin sebuah kotak yang ditempeli label. Baca baris di atas begini: “Buatkan kotak baru (let), labelnya total, isi dengan (=) angka 0.”

Dua hal penting. Pertama, tanda = di JavaScript bukan “sama dengan” ala pelajaran matematika. Artinya “masukkan ke dalam”, dari kanan ke kiri. Kedua, isi kotaknya bisa diganti-ganti. Contohnya:

total = total + 5000;

Dibaca: “Ambil isi kotak total, tambahkan 5000, lalu masukkan hasilnya kembali ke kotak total.” Kalau tadinya isinya 0, sekarang jadi 5000.

Selain let, ada const. Bedanya, kotak const dikunci setelah diisi sekali. Aturan gampangnya: pakai const untuk hal yang nggak akan diganti, dan pakai let kalau isinya memang mau berubah, seperti total kita.

Mengambil elemen dari halaman

Sekarang kita perlu “memegang” kotak harga, tombol, dan tulisan total dari HTML tadi. Di sinilah id yang kamu ketik persis di Bab 3 dipakai:

const inputHarga = document.getElementById('harga');

Bacanya dari kanan ke kiri. document adalah halaman web yang sedang terbuka. getElementById('harga') artinya “carikan elemen yang id-nya harga”. Hasilnya disimpan di kotak const bernama inputHarga. Nama kotaknya bebas, asal jelas.

Setelah elemennya dipegang, ada dua hal yang akan sering kamu pakai:

• inputHarga.value untuk membaca isi sebuah kotak isian.
• teksTotal.textContent = '...' untuk mengganti tulisan di dalam sebuah elemen.

Tulisan yang diapit tanda kutip, seperti 'harga', disebut stringStringIstilah programmer untuk teks, selalu ditulis di antara tanda kutip.Penjelasan lengkap →, istilah programmer untuk teks.

Klik tombol: pasang telinga

Terakhir, kita mau komputer bereaksi saat tombol diklik. Kejadian seperti klik, ketikan, atau geseran layar disebut eventEventKejadian di halaman web, seperti klik, mengetik, atau halaman selesai dimuat.Penjelasan lengkap →. Caranya:

tombol.addEventListener('click', function () {
  // perintah-perintahnya di sini
});

Baca begini: “Pada tombol, pasang telinga untuk kejadian click. Setiap kali kejadian itu muncul, jalankan perintah yang ada di dalam kurung kurawal { }.”

Bagian function () { ... } itu fungsiFungsiSekumpulan instruksi yang dibungkus jadi satu paket, supaya bisa dijalankan kapan pun dibutuhkan.Penjelasan lengkap →: sekumpulan perintah yang dibungkus jadi satu paket. Ibaratnya bel pintu. Kamu memasang belnya sekali, tapi tugas “buka pintu” dikerjakan setiap kali ada yang memencet.

Perintah di dalamnya tidak jalan saat halaman dibuka, melainkan menunggu sampai tombolnya diklik.

console.log: mengintip isi kotak

Gimana caranya kita tahu kodenya benar-benar jalan? Pakai alat bantu bernama console.log. Ia menulis pesan ke consoleConsolePapan catatan tempat program menulis pesan dan error, berguna untuk mengintip apa yang sedang terjadi.Penjelasan lengkap →, semacam papan catatan buat programmer:

console.log('Tombol diklik!');

Di kotak latihan, console ada di bawah hasil, ditandai tulisan Console. Di browser laptop, kamu bisa membukanya dengan menekan F12, lalu pilih tab Console. Bagi programmer, console.log itu seperti senter: dipakai buat mengintip apa isi sebuah kotak di tengah jalannya program. Nanti di Bab 7 kita kenalan lebih jauh.

Angka bukan selalu angka

Sekarang bagian yang sering bikin pemula garuk kepala. Coba tebak, berapa hasil ini?

console.log('15000' + 5000);

Kamu pasti kira 20000. Ternyata hasilnya 150005000!

Penyebabnya: '15000' memakai tanda kutip, jadi dianggap teks, bukan angka. Dan tanda + kalau bertemu teks bukan menjumlahkan, melainkan menyambung. Jadi tulisan “15000” disambung dengan “5000”.

Jenis isi seperti ini disebut tipe dataTipe dataJenis isi sebuah data, misalnya angka atau teks.Penjelasan lengkap →: angka dan teks diperlakukan berbeda oleh komputer. Kabar buruknya, apa pun yang diketik pengguna di kotak isian, termasuk kotak type="number", selalu diterima sebagai teks. Solusinya adalah Number(...), yang mengubah teks berisi angka menjadi angka sungguhan:

console.log(Number('15000') + 5000);

Sekarang hasilnya 20000, sesuai harapan. Ini kebiasaan yang wajib kamu pegang: ambil dari kotak isian, bungkus pakai Number(...).

Coba sendiri: bikin tombol Tambah hidup

Di kotak ini, bagian HTML dan CSS-nya sudah selesai. JavaScript-nya juga sudah menyiapkan tiga variabel, kotak total yang isinya 0, dan telinga di tombol. Tugasmu: mengisi bagian yang dikasih tanda Tantangan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Uang Jajanku</title>
  <style>
    body {
      font-family: sans-serif;
      background: #fff8e7;
      color: #222;
      margin: 0;
      padding: 16px;
    }

    .kartu {
      max-width: 400px;
      margin: 0 auto;
      background: white;
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    h1 {
      margin-top: 0;
      color: #e8590c;
    }

    label {
      display: block;
      margin-top: 12px;
      font-weight: bold;
    }

    input {
      width: 100%;
      box-sizing: border-box;
      margin-top: 4px;
      padding: 10px;
      border: 2px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
    }

    button {
      width: 100%;
      margin-top: 16px;
      padding: 12px;
      background: #e8590c;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }

    .total {
      margin-top: 20px;
      padding: 12px;
      background: #fff3bf;
      border-radius: 8px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="kartu">
    <h1>Uang Jajanku</h1>
    <p>Catat setiap kali kamu jajan.</p>

    <label for="nama">Jajan apa?</label>
    <input id="nama" type="text" placeholder="contoh: Bakso">

    <label for="harga">Harganya berapa?</label>
    <input id="harga" type="number" placeholder="contoh: 15000">

    <button id="tombol-tambah">Tambah</button>

    <p id="total" class="total">Total: Rp 0</p>
  </div>

  <script>
    // 1. Ambil elemen-elemen dari HTML, simpan di variabel
    const inputHarga = document.getElementById('harga');
    const tombol = document.getElementById('tombol-tambah');
    const teksTotal = document.getElementById('total');

    // 2. Siapkan "kotak" untuk menyimpan total, mulai dari 0
    let total = 0;

    // 3. Saat tombol diklik, jalankan perintah di dalam { }
    tombol.addEventListener('click', function () {
      console.log('Tombol diklik!');

      // Tantangan: tambahkan harga ke total, lalu tampilkan totalnya

    });
  </script>
</body>
</html>

Langkahnya:

1. Cek telinganya dulu. Klik Tambah beberapa kali dan lihat panel Console. Tiap klik harus muncul Tombol diklik!. Kalau muncul, berarti tombol dan JavaScript sudah nyambung.
2. Isi tantangannya. Di bawah komentar Tantangan, tulis tiga hal. Satu, ambil isi kotak harga, bungkus pakai Number(...), simpan di variabel harga. Dua, tambahkan harga ke total. Tiga, ganti tulisan teksTotal jadi Total: Rp diikuti angka totalnya.
3. Uji. Isi 15000, klik Tambah, lalu isi 5000, klik Tambah lagi. Totalnya harus naik.

Buntu? Wajar. Klik Lihat jawaban, lalu bandingkan dengan tulisanmu. Ini bagian yang kamu tulis:

tombol.addEventListener('click', function () {
  const harga = Number(inputHarga.value);
  total = total + harga;
  teksTotal.textContent = 'Total: Rp ' + total.toLocaleString('id-ID');
  console.log('Harga:', harga, '| Total sekarang:', total);
  inputHarga.value = '';
});

Dibaca dari atas ke bawah, tiap klik komputer akan: (1) mengambil isi kotak harga lalu mengubahnya jadi angka, (2) menambahkannya ke kotak total, (3) menulis ulang tulisan total di layar. Sisanya bonus. Baris toLocaleString('id-ID') mengubah 20000 menjadi tulisan 20.000 sesuai kebiasaan Indonesia, dengan titik sebagai pemisah ribuan. Baris console.log mencatat harga dan total ke console supaya bisa kamu intip. Baris terakhir, inputHarga.value = '', mengosongkan kotak harga biar siap diisi lagi.

Dua catatan jujur. Satu, kotak “Jajan apa?” belum dipakai sama sekali. Itu bagian dari Bab 6. Dua, coba ketik satu spasi sembarang di kodemu. Hasilnya dimuat ulang, dan totalnya balik ke 0. Kenapa? Kotak total hidup di memori sementara. Begitu halaman dimuat ulang, dia dibuang. Nasib ini akan kita perbaiki di bab depan.

Nah, tombol yang tadinya patung sekarang bisa menghitung. Aplikasimu sudah punya otak.