Selamat datang di dunia pemrograman web dinamis! JavaScript (JS) adalah bahasa pemrograman inti yang membuat halaman web Anda hidup. Jika HTML adalah struktur tulang dan CSS adalah penampilan luarnya, maka JavaScript adalah otot yang memungkinkan interaksi dan logika.
Mengapa Belajar JavaScript?
Di era digital saat ini, JavaScript sangat fundamental. Ia berjalan di hampir setiap browser modern. Awalnya hanya digunakan untuk memvalidasi formulir sederhana atau membuat efek visual kecil, kini JS menggerakkan aplikasi web kompleks (seperti Gmail atau Facebook), aplikasi desktop (dengan Electron), hingga backend server (dengan Node.js). Bagi pemula, menguasai JS membuka pintu karier yang sangat luas di bidang pengembangan front-end dan full-stack.
Dasar-Dasar Pertama: Variabel dan Tipe Data
Seperti bahasa pemrograman lainnya, Anda perlu tempat untuk menyimpan informasi. Di JS, ini disebut variabel. Anda mendeklarasikannya menggunakan kata kunci let atau const. const digunakan untuk nilai yang tidak akan berubah, sedangkan let untuk nilai yang mungkin diubah nanti.
Tipe data dasar yang akan Anda temui adalah:
- String: Teks (contoh:
"Halo Dunia") - Number: Angka (contoh:
10atau3.14) - Boolean: Nilai benar atau salah (
trueataufalse)
Contoh Deklarasi Variabel
let namaPengguna = "Budi";
const tahunLahir = 1995;
let isAktif = true;
Logika dengan Kondisional (If/Else)
Membuat program yang cerdas berarti program harus bisa mengambil keputusan. Di sinilah pernyataan kondisional if dan else berperan. Jika suatu kondisi benar (true), kode di blok if akan dieksekusi; jika salah, blok else yang akan berjalan.
Contoh Logika Sederhana
let usia = 18;
if (usia >= 17) {
console.log("Anda boleh membuat KTP.");
} else {
console.log("Anda masih di bawah umur.");
}
Pernyataan di atas akan mencetak pesan pertama karena nilai usia memenuhi syarat (lebih besar atau sama dengan 17).
Pengulangan: Loops
Ketika Anda perlu melakukan tugas yang sama berulang kali, Anda menggunakan perulangan (loops). Yang paling umum untuk pemula adalah for loop. Loop for sangat baik jika Anda tahu persis berapa kali pengulangan harus terjadi.
Contoh Perulangan For
Mari kita tampilkan angka dari 0 sampai 4:
for (let i = 0; i < 5; i++) {
console.log("Angka ke: " + i);
}
Di sini, i dimulai dari 0, akan terus berjalan selama i kurang dari 5, dan setelah setiap iterasi, i akan bertambah satu (i++).
Memanipulasi Halaman Web (DOM)
Kekuatan sejati JavaScript di web adalah kemampuannya berinteraksi dengan Document Object Model (DOM). DOM adalah representasi struktur halaman HTML Anda yang dapat diakses dan diubah oleh JS. Ini memungkinkan Anda mengubah teks, menyembunyikan elemen, atau merespons klik mouse tanpa memuat ulang halaman.
Langkah pertama dalam manipulasi DOM adalah 'menangkap' elemen HTML. Misalnya, jika Anda memiliki tombol dengan ID tombolSubmit:
const tombol = document.getElementById("tombolSubmit");
Kemudian, Anda dapat menambahkan "pendengar" (listener) untuk mengetahui kapan pengguna melakukan aksi:
tombol.addEventListener('click', function() {
alert("Tombol berhasil diklik!");
});
Langkah Selanjutnya Setelah Memahami Dasar
Setelah Anda menguasai variabel, tipe data, kondisi, dan loop, Anda siap untuk mendalami fungsi (cara mengelompokkan kode yang dapat digunakan kembali), array (daftar data), dan objek (kumpulan data terstruktur). Ingatlah, pemrograman adalah tentang latihan. Cobalah membuat kalkulator sederhana atau mengubah warna latar belakang halaman saat tombol diklik. Konsistensi adalah kunci untuk menjadi mahir dalam JavaScript.