Contoh Kode JavaScript untuk Pemula: Variabel sampai DOM

Belajar JavaScript sering terasa membingungkan karena contohnya terlalu abstrak: foo, bar, dan angka acak. Lebih mudah kalau langsung memakai kasus sehari-hari. Di artikel ini, semua contoh kode memakai satu cerita: menghitung pesanan di kedai kopi. Semua kode sudah dicoba dan bisa kamu jalankan di Console browser (tekan F12, lalu buka tab Console).

1. Variabel: menyimpan data

const namaToko = "Kopi Lereng";
let stok = 20;
stok = stok - 3;
console.log(namaToko, "sisa stok:", stok);
// Kopi Lereng sisa stok: 17

• const untuk nilai yang tidak akan diubah, seperti nama toko.
• let untuk nilai yang bisa berubah, seperti stok.

Biasakan memakai const lebih dulu. Ganti ke let hanya kalau nilainya memang perlu diubah. Kode jadi lebih mudah ditebak.

2. Fungsi: membungkus perhitungan

function hitungTotal(harga, jumlah) {
  return harga * jumlah;
}
console.log(hitungTotal(15000, 3)); // 45000

const hitungDiskon = (total, persen) => total - (total * persen) / 100;
console.log(hitungDiskon(45000, 10)); // 40500

Fungsi pertama ditulis dengan cara biasa. Fungsi kedua memakai arrow function, bentuk yang lebih ringkas dan banyak dipakai di kode modern. Keduanya sama-sama mengembalikan hasil dengan return.

3. Percabangan: if dan else

function ongkir(jarakKm) {
  if (jarakKm <= 3) {
    return 0;
  } else if (jarakKm <= 10) {
    return 10000;
  }
  return 20000;
}
console.log(ongkir(2), ongkir(7), ongkir(15)); // 0 10000 20000

Kode ini memberi gratis ongkir untuk jarak sampai 3 km, Rp10.000 sampai 10 km, dan Rp20.000 untuk jarak lebih jauh.

4. Array dan objek: menyimpan banyak data

const pesanan = [
  { menu: "Kopi susu", harga: 15000, jumlah: 2 },
  { menu: "Teh tarik", harga: 12000, jumlah: 1 },
  { menu: "Roti bakar", harga: 18000, jumlah: 3 },
];

const total = pesanan.reduce((jml, p) => jml + p.harga * p.jumlah, 0);
console.log("Total:", total); // Total: 96000

const mahal = pesanan.filter((p) => p.harga >= 15000).map((p) => p.menu);
console.log(mahal); // ["Kopi susu", "Roti bakar"]

Tiga metode array ini akan sering kamu pakai:

5. Template literal: menyusun teks

console.log(`Total bayar: Rp${total.toLocaleString("id-ID")}`);
// Total bayar: Rp96.000

Tanda backtick dan ${...} memudahkan menyisipkan nilai ke dalam teks. toLocaleString("id-ID") menambahkan titik pemisah ribuan ala Indonesia.

6. DOM: menghubungkan JavaScript dengan halaman

Sekarang bagian paling seru: membuat tombol yang menghitung total di halaman web. Simpan kode ini sebagai index.html, lalu buka di browser.

<label>Jumlah kopi: <input id="jumlah" type="number" value="1" min="1"></label>
<button id="hitung">Hitung</button>
<p id="hasil"></p>

<script>
  const harga = 15000;
  document.getElementById("hitung").addEventListener("click", () => {
    const jumlah = Number(document.getElementById("jumlah").value);
    const total = harga * jumlah;
    document.getElementById("hasil").textContent =
      `Total: Rp${total.toLocaleString("id-ID")}`;
  });
</script>

Alurnya: ambil elemen dengan getElementById, dengarkan klik dengan addEventListener, baca isi input, hitung, lalu tampilkan hasilnya dengan textContent.

Nilai dari input selalu berupa teks. Ubah dulu menjadi angka dengan Number() sebelum dihitung, kalau tidak "2" + 1 bisa menjadi "21".

Urutan belajar yang disarankan

1. Variabel, tipe data, dan operator.
2. Fungsi dan percabangan.
3. Array, objek, serta map, filter, dan reduce.
4. DOM dan event.
5. Proyek kecil, misalnya kalkulator pesanan, daftar belanja, atau kuis.

Kalau HTML dan CSS-nya belum lancar, pelajari dulu dasarnya agar halaman yang kamu buat enak dilihat.

Kesalahan pemula yang paling sering

Saat kode tidak jalan, buka Console di browser. Pesan galat berwarna merah biasanya menunjukkan nomor baris yang bermasalah. Membaca pesan galat adalah keterampilan penting yang sering dilewatkan pemula.

Ingin lebih dalam? Artikel ini baru membahas sebagian kecil. Di ebook JavaScript Dasar untuk Pemula, kamu akan mempelajari lebih jauh:

• Menjalankan kode di konsol browser dan Node.js, variabel, tipe data, dan template string
• Keputusan dengan if, operator perbandingan, dan fungsi yang bisa dipakai ulang
• Array berisi objek, filter, map, reduce, dan format rupiah dengan Intl.NumberFormat

Semua langkahnya disusun berurutan dan bisa langsung dipraktikkan. Lihat isi bukunya.

Pertanyaan yang sering diajukan

Apa beda JavaScript dan Java? Keduanya bahasa yang berbeda. JavaScript berjalan di browser dan dipakai untuk membuat halaman web interaktif, sedangkan Java banyak dipakai untuk aplikasi Android dan sistem perusahaan.

Perlukah menginstal aplikasi untuk belajar JavaScript? Tidak. Browser seperti Chrome sudah bisa menjalankan JavaScript lewat Console. Untuk menulis file, cukup pakai editor gratis seperti Visual Studio Code.

Berapa lama belajar JavaScript dasar? Dengan latihan rutin 1 jam per hari, dasar-dasarnya bisa dikuasai dalam beberapa minggu. Kuncinya adalah sering membuat proyek kecil, bukan hanya membaca.

Kalau artikel ini membantu, langkah berikutnya ada di ebook JavaScript Dasar untuk Pemula.