Belajar JavaScript dari Nol untuk Pemula (Panduan Lengkap)

JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi hidup dan interaktif: tombol yang merespons klik, form yang memvalidasi input, konten yang berubah tanpa memuat ulang halaman. Bila HTML adalah kerangka dan CSS adalah tampilan, JavaScript adalah “otak”-nya. Artikel ini adalah panduan belajar JavaScript dari nol untuk pemula, lengkap dengan contoh.

Apa Itu JavaScript?

JavaScript berjalan langsung di browser (tanpa perlu server), sehingga bisa langsung Anda coba. Ada dua cara menjalankannya:

<!DOCTYPE html>
<html>
<body>
    <h1>Halaman Saya</h1>
    <script>
        alert("Halo dari JavaScript!");
    </script>
</body>
</html>

Cara tercepat lain: buka browser, tekan F12, pilih tab Console, lalu ketik kode JavaScript langsung.

1. Variabel

Variabel menyimpan data. Gunakan let (nilai bisa berubah) dan const (nilai tetap):

<script>
let nama = "Budi";
const tahunLahir = 1998;
nama = "Andi"; // boleh, karena let
console.log(nama);
</script>

2. Tipe Data

<script>
let teks   = "Halo";      // string
let angka  = 42;          // number
let aktif  = true;        // boolean
let daftar = [1, 2, 3];   // array
let orang  = { nama: "Budi", umur: 25 }; // object
</script>

3. Operator dan Kondisi

Kondisi if/else membuat program mengambil keputusan:

<script>
let nilai = 75;
if (nilai >= 75) {
    console.log("Lulus");
} else {
    console.log("Belum lulus");
}
</script>

4. Perulangan

Perulangan menjalankan kode berulang kali:

<script>
for (let i = 1; i <= 3; i++) {
    console.log("Baris ke-" + i);
}

const buah = ["Apel", "Mangga", "Jeruk"];
buah.forEach(function(item) {
    console.log(item);
});
</script>

5. Fungsi

Fungsi adalah blok kode yang bisa dipakai ulang:

<script>
function sapa(nama) {
    return "Halo, " + nama + "!";
}
console.log(sapa("Budi")); // "Halo, Budi!"
</script>

6. Berinteraksi dengan Halaman (DOM)

Inilah kekuatan JavaScript — mengubah isi halaman secara langsung:

<button id="tombol">Klik Saya</button>
<p id="pesan"></p>

<script>
document.getElementById("tombol").addEventListener("click", function() {
    document.getElementById("pesan").textContent = "Tombol diklik!";
});
</script>

Kode di atas mengubah teks paragraf saat tombol diklik — contoh nyata interaktivitas.

Kesalahan Umum Pemula

Lupa titik koma atau kurung — perhatikan pesan error di Console (F12).
Menjalankan skrip sebelum elemen dimuat — letakkan <script> di akhir <body>.
Bingung = dan === — = untuk mengisi nilai, === untuk membandingkan.

Langkah Selanjutnya

Setelah menguasai dasar ini, pelajari manipulasi DOM lebih dalam, penanganan event, lalu AJAX (mengambil data dari server), dan akhirnya framework modern seperti React atau Vue.

Kesimpulan

Anda telah menyelesaikan dasar-dasar belajar JavaScript dari nol: variabel, tipe data, kondisi, perulangan, fungsi, dan interaksi DOM. Kunci menguasai JavaScript adalah praktik — coba semua contoh di atas langsung di browser, ubah-ubah, dan amati hasilnya. Selamat belajar!