JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi hidup dan interaktif. Tombol yang bisa diklik, form yang memvalidasi input secara otomatis, sampai mode gelap yang berubah hanya dengan satu sentuhan, semuanya digerakkan oleh JavaScript. Kalau kamu mengikuti tutorial JavaScript pemula ini sampai selesai, kamu akan menguasai tiga fondasi terpentingnya: variabel, fungsi, dan manipulasi DOM, lengkap dengan contoh program nyata berupa tombol toggle dark mode yang bisa langsung kamu coba di browser.
Kabar baiknya, kamu tidak perlu menginstal apa pun untuk mulai belajar. Cukup buka browser Chrome atau Edge, tekan F12 untuk membuka DevTools, lalu pilih tab Console. Di sanalah kamu bisa mengetik dan menjalankan kode JavaScript secara langsung. Untuk latihan yang lebih serius, kamu bisa memakai VS Code sebagai editor kode. Kalau belum memasangnya, baca dulu panduan 7 Ekstensi VS Code Wajib untuk Mahasiswa dan Programmer Pemula agar pengalaman ngodingmu lebih nyaman sejak awal.
Tutorial JavaScript Pemula: Persiapan dan Cara Menjalankan Kode
Sebelum menulis baris pertama, pahami dulu di mana kode JavaScript dijalankan. Ada dua tempat utama. Pertama, di browser melalui tab Console DevTools seperti yang sudah disebutkan. Cara ini paling cepat untuk bereksperimen dengan potongan kode kecil. Kedua, di dalam file HTML memakai tag script, yang akan kita pakai pada studi kasus di bagian akhir artikel ini.
Aturan mainnya sederhana. Setiap contoh kode pada artikel ini memakai sintaks modern JavaScript (ES6 ke atas) yang didukung semua browser terbaru. Kamu disarankan mengetik ulang setiap contoh, bukan sekadar menyalinnya, karena otot jarimu perlu terbiasa dengan sintaksnya. Kalau muncul error berwarna merah di Console, jangan panik. Baca pesannya baik-baik karena pesan error JavaScript biasanya cukup jelas menunjukkan baris yang bermasalah.
Satu kebiasaan penting sejak awal: biasakan memberi nama variabel dan fungsi yang deskriptif dalam bahasa Inggris, misalnya namaMahasiswa atau hitungTotal, bukan x atau data1. Kode yang kamu tulis hari ini akan kamu baca lagi minggu depan, dan nama yang jelas menghemat banyak waktu.
Mengenal Variabel: let, const, dan var
Variabel adalah wadah untuk menyimpan data. Di JavaScript modern ada dua kata kunci utama untuk membuat variabel, yaitu let dan const. Kamu mungkin juga menemukan var di kode-kode lama, tetapi untuk proyek baru sebaiknya hindari var karena perilakunya yang membingungkan terkait cakupan variabel.
Gunakan const untuk nilai yang tidak akan berubah setelah dibuat, dan let untuk nilai yang memang perlu diubah. Aturan praktisnya: selalu mulai dengan const, ganti ke let hanya bila kamu benar-benar perlu mengubah nilainya.
const namaKampus = "STT Payakumbuh";
let semester = 3;
console.log(namaKampus); // STT Payakumbuh
console.log(semester); // 3
semester = 4; // boleh, karena memakai let
console.log(semester); // 4
// namaKampus = "Kampus Lain"; // ERROR: tidak boleh mengubah const
Perhatikan bahwa mengubah isi dari const yang berupa object atau array masih diperbolehkan, yang dilarang adalah mengganti seluruh referensinya. Ini konsep yang akan terasa manfaatnya saat kamu bekerja dengan data yang kompleks.
const mahasiswa = { nama: "Budi", ipk: 3.5 };
mahasiswa.ipk = 3.7; // boleh: mengubah isi properti
console.log(mahasiswa.ipk); // 3.7
Tipe Data Dasar yang Wajib Dikuasai
JavaScript punya beberapa tipe data dasar. Lima yang paling sering dipakai pemula adalah string (teks), number (angka), boolean (benar atau salah), null (kosong yang disengaja), dan undefined (belum diberi nilai). Kamu bisa memeriksa tipe sebuah nilai dengan operator typeof.
const nama = "Ani"; // string
const umur = 20; // number
const lulus = true; // boolean
let nilai = null; // null
let alamat; // undefined
console.log(typeof nama); // "string"
console.log(typeof umur); // "number"
console.log(typeof lulus); // "boolean"
Satu hal unik JavaScript adalah ia tidak membedakan integer dan desimal, semuanya bertipe number. Operasi aritmetika dasar memakai simbol yang sudah familier: tambah (+), kurang (-), kali (*), bagi (/), dan sisa bagi (%).
const a = 10;
const b = 3;
console.log(a + b); // 13
console.log(a % b); // 1 (sisa pembagian 10 oleh 3)
Hati-hati dengan operator + pada string karena ia berfungsi sebagai penggabung teks, bukan penjumlahan. Untuk menggabungkan variabel ke dalam kalimat, cara modernnya memakai template literal dengan backtick dan ${}.
const namaDepan = "Dewi";
const kota = "Padang";
console.log(`Halo, saya ${namaDepan} dari ${kota}.`);
// Halo, saya Dewi dari Padang.
Fungsi: Blok Kode yang Bisa Dipakai Ulang
Fungsi adalah blok kode yang diberi nama dan bisa dipanggil berkali-kali. Tanpa fungsi, kamu akan menulis kode yang sama berulang-ulang. Ada dua cara penulisan yang umum: deklarasi fungsi biasa dan arrow function yang lebih ringkas.
// Deklarasi fungsi biasa
function sapa(nama) {
return `Halo, ${nama}! Selamat belajar JavaScript.`;
}
console.log(sapa("Rina")); // Halo, Rina! Selamat belajar JavaScript.
// Arrow function (sintaks ES6)
const kuadrat = (angka) => {
return angka * angka;
};
console.log(kuadrat(5)); // 25
// Arrow function satu baris bisa lebih ringkas lagi
const tambah = (x, y) => x + y;
console.log(tambah(4, 7)); // 11
Fungsi bisa menerima parameter (masukan) dan mengembalikan nilai lewat return. Parameter membuat fungsi menjadi fleksibel karena perilakunya bisa berubah tergantung argumen yang diberikan saat dipanggil. Biasakan memberi nilai default pada parameter bila masuk akal, supaya fungsi tetap berjalan walau pemanggil lupa memberi argumen.
function hitungDiskon(harga, persenDiskon = 10) {
const potongan = harga * (persenDiskon / 100);
return harga - potongan;
}
console.log(hitungDiskon(100000)); // 90000 (pakai default 10%)
console.log(hitungDiskon(100000, 25)); // 75000
Array dan Object: Menyimpan Banyak Data Sekaligus
Variabel biasa hanya menyimpan satu nilai. Untuk menyimpan banyak nilai, JavaScript menyediakan array (daftar berurutan) dan object (kumpulan pasangan kunci dan nilai).
Array memakai kurung siku dan indeksnya dimulai dari nol. Beberapa method array yang wajib hafal adalah push untuk menambah data, length untuk menghitung isi, dan forEach atau map untuk memproses setiap elemen.
const daftarBuah = ["apel", "mangga", "pisang"];
console.log(daftarBuah[0]); // "apel" (indeks mulai dari 0)
console.log(daftarBuah.length); // 3
daftarBuah.push("anggur"); // tambah di akhir
console.log(daftarBuah.length); // 4
// forEach: menjalankan fungsi untuk tiap elemen
daftarBuah.forEach((buah) => {
console.log(`Saya suka ${buah}`);
});
Object memakai kurung kurawal dan menyimpan data sebagai pasangan kunci: nilai. Ini struktur yang paling sering kamu temui saat berurusan dengan data dari API atau database.
const mahasiswa = {
nama: "Fajar",
nim: "2024001",
jurusan: "Informatika",
aktif: true
};
console.log(mahasiswa.nama); // "Fajar" (dot notation)
console.log(mahasiswa["nim"]); // "2024001" (bracket notation)
mahasiswa.semester = 5; // menambah properti baru
console.log(mahasiswa.semester); // 5
Kombinasi array berisi object adalah pola paling umum di dunia nyata, misalnya daftar mahasiswa yang masing-masing punya nama dan NIM. Kuasai pola ini baik-baik karena ia muncul di hampir setiap aplikasi.
const daftarMahasiswa = [
{ nama: "Fajar", ipk: 3.5 },
{ nama: "Sinta", ipk: 3.8 },
{ nama: "Bimo", ipk: 3.2 }
];
daftarMahasiswa.forEach((mhs) => {
console.log(`${mhs.nama} memiliki IPK ${mhs.ipk}`);
});
Manipulasi DOM: Menghubungkan JavaScript dengan Halaman Web
DOM (Document Object Model) adalah representasi halaman HTML sebagai struktur pohon yang bisa dibaca dan diubah oleh JavaScript. Inilah jembatan yang membuat halaman web menjadi interaktif. Tiga kemampuan DOM yang paling sering dipakai adalah mengambil elemen, mengubah isinya, dan merespons kejadian dari pengguna.
Untuk mengambil elemen, gunakan document.getElementById bila elemen punya atribut id, atau document.querySelector yang lebih fleksibel karena memakai sintaks selector CSS.
// <p id="sapaan">Halo dunia</p>
const paragraf = document.getElementById("sapaan");
paragraf.textContent = "Halo, JavaScript!"; // ubah isi teks
// querySelector memakai selector CSS
const tombol = document.querySelector(".btn-kirim");
tombol.style.backgroundColor = "orange"; // ubah gaya langsung
Interaksi sesungguhnya terjadi lewat event listener, yaitu fungsi yang dijalankan saat pengguna melakukan sesuatu seperti mengklik tombol. Polanya selalu sama: ambil elemen, pasang addEventListener, tulis fungsi yang dijalankan.
// <button id="tombolKlik">Klik saya</button>
// <p id="hasil"></p>
const tombolKlik = document.getElementById("tombolKlik");
const hasil = document.getElementById("hasil");
let jumlahKlik = 0;
tombolKlik.addEventListener("click", () => {
jumlahKlik++;
hasil.textContent = `Tombol diklik ${jumlahKlik} kali.`;
});
Selain click, ada banyak event lain seperti input (saat mengetik di form), submit (saat form dikirim), dan mouseover. Untuk mengubah tampilan, cara paling rapi adalah menambah atau menghapus class CSS lewat classList, bukan mengubah style satu per satu.
// <div id="kotak" class="kotak-biru"></div>
const kotak = document.getElementById("kotak");
kotak.classList.add("kotak-merah"); // tambah class
kotak.classList.remove("kotak-biru"); // hapus class
kotak.classList.toggle("aktif"); // alihkan: ada jadi hilang, hilang jadi ada
Method toggle pada contoh terakhir inilah yang akan menjadi bintang utama studi kasus kita berikutnya.
Studi Kasus Tutorial JavaScript Pemula: Membuat Toggle Dark Mode
Sekarang gabungkan semua yang sudah dipelajari menjadi satu program utuh: tombol yang mengalihkan halaman antara mode terang dan mode gelap. Buat satu file bernama dark-mode.html, lalu isi dengan kode berikut.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Toggle Dark Mode</title>
<style>
body {
font-family: sans-serif;
text-align: center;
padding: 50px;
transition: background-color 0.3s, color 0.3s;
}
body.dark {
background-color: #1a1a2e;
color: #f0f0f0;
}
button {
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 8px;
background-color: orange;
color: white;
}
</style>
</head>
<body>
<h1 id="judul">Belajar JavaScript Itu Seru</h1>
<p>Klik tombol di bawah untuk mengganti tema halaman.</p>
<button id="tombolTema">Aktifkan Dark Mode</button>
<script>
const tombolTema = document.getElementById("tombolTema");
const judul = document.getElementById("judul");
tombolTema.addEventListener("click", () => {
document.body.classList.toggle("dark");
const modeGelapAktif = document.body.classList.contains("dark");
if (modeGelapAktif) {
tombolTema.textContent = "Aktifkan Light Mode";
judul.textContent = "Mode Gelap Aktif";
} else {
tombolTema.textContent = "Aktifkan Dark Mode";
judul.textContent = "Belajar JavaScript Itu Seru";
}
});
</script>
</body>
</html>
Mari bedah cara kerjanya baris per baris. Pertama, const dipakai untuk menyimpan referensi ke tombol dan judul karena referensi ini tidak pernah berubah. Kedua, addEventListener("click", ...) memasang fungsi yang berjalan setiap tombol diklik. Ketiga, classList.toggle("dark") menambah class dark ke body bila belum ada, atau menghapusnya bila sudah ada, sehingga CSS yang sudah disiapkan otomatis mengubah warna latar dan teks. Keempat, classList.contains("dark") memeriksa status saat ini supaya teks tombol dan judul ikut diperbarui dengan benar.
Coba simpan file itu lalu buka di browser dan klik tombolnya beberapa kali. Perhatikan bahwa seluruh logika hanya belasan baris. Inilah kekuatan manipulasi DOM: sedikit kode, dampak langsung terlihat. Sebagai tantangan mandiri, coba simpan pilihan tema pengguna memakai localStorage supaya mode gelap tetap aktif walau halaman di-refresh.
Kesalahan Umum yang Sering Dilakukan Pemula
Setiap pemula JavaScript hampir pasti menabrak beberapa jebakan klasik. Mengetahui jebakan ini sejak awal menghemat waktu debugging yang lumayan.
Pertama, memakai = (assignment) padahal maksudnya === (perbandingan ketat) di dalam if. JavaScript juga punya == yang melakukan konversi tipe otomatis dan sering menimbulkan hasil mengejutkan, jadi biasakan selalu memakai ===.
const umur = "20"; // string, bukan number!
if (umur == 20) {
console.log("lolos dengan =="); // tercetak, karena konversi tipe
}
if (umur === 20) {
console.log("tidak akan tercetak"); // string "20" tidak identik dengan number 20
}
Kedua, menjalankan kode DOM sebelum elemennya ada. Kalau tag script ditaruh di dalam head tanpa atribut khusus, kode berjalan sebelum body selesai dimuat sehingga getElementById mengembalikan null. Solusi paling mudah adalah menaruh script tepat sebelum penutup </body>, seperti pada studi kasus di atas.
Ketiga, lupa bahwa indeks array dimulai dari nol. Mengakses daftarBuah[3] pada array berisi tiga elemen menghasilkan undefined, bukan error, sehingga bug-nya bisa lolos tanpa disadari.
Keempat, mengubah const secara langsung. Ingat, const melarang assignment ulang terhadap variabelnya, walau isi object-nya masih boleh diubah. Pesan errornya berbunyi “Assignment to constant variable” yang cukup jelas.
Langkah Selanjutnya Setelah Tutorial Ini
Selamat, kamu sekarang memegang fondasi JavaScript yang solid: variabel dengan let dan const, tipe data, fungsi termasuk arrow function, array dan object, sampai manipulasi DOM dengan event listener. Fondasi ini cukup untuk membuat halaman web interaktif sederhana dan menjadi modal wajib sebelum melangkah ke topik yang lebih besar.
Langkah logis berikutnya adalah mempelajari cara JavaScript berkomunikasi dengan server lewat HTTP request. Untuk itu, baca dulu penjelasan konsepnya di artikel Apa Itu API? Penjelasan Sederhana Lengkap dengan Contoh untuk Pemula, lalu praktikkan dengan fetch untuk mengambil data nyata. Setelah nyaman di sisi frontend, saatnya melirik sisi backend: panduan Tutorial Laravel 12: Membuat CRUD Sederhana dari Nol untuk Pemula akan menunjukkan bagaimana data yang kamu olah di browser sebenarnya disimpan dan dikelola di server. Kombinasi JavaScript di frontend dan Laravel di backend adalah paket skill yang sangat dicari di dunia kerja pengembangan web saat ini.