JavaScript dari Nol

JavaScript membuat halaman web merespons pengguna. Setiap browser menjalankannya tanpa instalasi apa pun, dan ia juga berjalan di server melalui Node.js. Artikel ini dimulai dengan variabel dan fungsi, lalu bekerja dengan array, dan kemudian menunjukkan cara mengubah halaman web.

Setiap contoh di luar bagian DOM sudah dijalankan dengan Node.js dan keluarannya adalah keluaran nyata. Bagian DOM perlu diuji di browser.

Yang Anda butuhkan

• Browser web apa pun (tekan F12 dan buka tab Console untuk mencoba perintah)
• Atau Node.js 18 atau lebih baru untuk menjalankan file `.js` di komputer Anda

Cara kerjanya

Variabel

Gunakan `const` untuk nilai yang tidak berubah, dan `let` untuk nilai yang berubah.

const namaSekolah = "Sekolah Contoh";
let jumlah = 0;
jumlah = jumlah + 1;
console.log(namaSekolah, jumlah);

Fungsi

function nilai(skor) {
  if (skor >= 80) return "A";
  if (skor >= 70) return "B";
  if (skor >= 50) return "C";
  return "F";
}

Fungsi menerima input, melakukan pekerjaan, dan mengembalikan nilai dengan `return`. Pernyataan `if` diperiksa berurutan, dan kondisi pertama yang benar dijalankan.

Array dengan map, reduce, dan forEach

const siswa = [
  { nama: "Budi", skor: 85 },
  { nama: "Siti", skor: 72 },
  { nama: "Andi", skor: 45 },
];

function nilai(skor) {
  if (skor >= 80) return "A";
  if (skor >= 70) return "B";
  if (skor >= 50) return "C";
  return "F";
}

const daftarNilai = siswa.map(s => `${s.nama}: ${nilai(s.skor)}`);
const rataRata = siswa.reduce((jumlah, s) => jumlah + s.skor, 0) / siswa.length;

console.log("Halo JavaScript");
daftarNilai.forEach(baris => console.log(baris));
console.log("Nilai rata-rata:", rataRata.toFixed(2));

Keluaran nyata:

Halo JavaScript
Budi: A
Siti: B
Andi: F
Nilai rata-rata: 67.33

• `map` membuat array baru dengan mengubah setiap item.
• `reduce` menggabungkan semua item menjadi satu nilai.
• `forEach` menjalankan fungsi pada setiap item tanpa membuat array baru.
• `toFixed(2)` membulatkan angka menjadi dua tempat desimal untuk ditampilkan.

Bekerja dengan halaman (DOM)

Di browser, JavaScript membaca dan mengubah halaman melalui DOM. Contoh ini mengubah teks ketika tombol diklik:

<p id="pesan">Belum ditekan</p>
<button id="tombol">Tekan saya</button>
<script>
  const pesan = document.getElementById("pesan");
  document.getElementById("tombol").addEventListener("click", () => {
    pesan.textContent = "Sudah ditekan!";
  });
</script>

Simpan sebagai file `.html` dan buka di browser. Klik tombolnya dan teksnya berubah.

Kesalahan umum

• **Memakai `=` alih-alih `===`:** `===` membandingkan nilai dan tipe sekaligus, jadi lebih baik dipakai.
• **Lupa bahwa `const` tidak bisa diberi nilai baru:** gunakan `let` jika nilainya harus berubah.
• **Memakai elemen DOM sebelum halaman dimuat:** letakkan script di akhir `<body>` atau gunakan `defer`.

Langkah berikutnya

Kembangkan contoh DOM dengan kotak input yang menghitung nilai saat Anda mengetik, lalu pelajari `fetch` untuk memuat data dari server.

Ringkasan

JavaScript dibangun di atas variabel, fungsi, dan array, serta bekerja dengan halaman melalui DOM dan event. Berlatih dengan contoh pendek yang bisa dijalankan adalah cara tercepat untuk mempelajarinya.