Belajar JavaScript Dasar untuk Pemula

Kalau kamu udah kenal HTML dan CSS, JavaScript ini biasanya jadi langkah ketiga. Gampangnya gini: HTML ngurus struktur, CSS ngurus tampilan, nah JavaScript yang ngurus perilaku. Apa yang terjadi pas tombol diklik, gimana data dicek dulu sebelum dikirim, atau gimana konten bisa berubah tanpa halaman perlu di-reload. JavaScript inilah yang bikin web berasa hidup dan interaktif.

Yang enak, JavaScript jalan langsung di dalam browser. Jadi kamu nggak perlu install apa-apa buat mulai nyoba. Cukup buka browser, tekan F12 buat munculin Console, dan kamu udah bisa ngetik kode di situ. Sebelum lanjut, sebaiknya kamu udah paham belajar HTML dasar untuk pemula dulu, biar tahu elemen-elemen apa aja yang nanti bakal kamu utak-atik.

Nempelin JavaScript ke Halaman

Cara paling umum ya pakai file .js terpisah, terus panggil sebelum tag penutup </body>.

<script src="app.js"></script>

Naruh <script> di paling bawah itu tujuannya biar elemen HTML kebaca duluan sebelum kodenya jalan. Kalau nggak gitu, JavaScript-nya bisa error gara-gara nyari elemen yang belum ada.

Variable: Tempat Nyimpen Data

Variable itu ibarat wadah buat nyimpen nilai. Di JavaScript modern, pakai let kalau nilainya bisa berubah, dan const kalau nilainya tetap.

let umur = 20;        // bisa diubah nanti
const nama = "Razin"; // tidak boleh diubah

umur = 21;            // boleh
// nama = "Budi";     // error!

Hindari var, itu gaya lama dan perilakunya bikin bingung. Aturan gampangnya: pakai const sebagai default, baru ganti ke let kalau nilainya emang perlu berubah.

Tipe Data Dasar

Ada beberapa tipe data di JavaScript yang bakal sering kamu pakai sehari-hari.

let teks = "Halo dunia";   // string
let angka = 42;            // number
let aktif = true;          // boolean
let kosong = null;         // null
let daftar = [1, 2, 3];    // array
let orang = { nama: "Razin", umur: 21 }; // object

Array dipakai buat nyimpen daftar nilai, sedangkan object nyimpen data berpasangan (kunci sama nilai). Dua-duanya ini fondasi penting banget begitu kamu mulai ngolah data.

Function: Buat Membungkus Logika

Function itu blok kode yang bisa kamu panggil berulang kali. Manfaatnya, kode jadi lebih rapi dan nggak nulis hal yang sama berkali-kali.

function sapa(nama) {
  return "Halo, " + nama + "!";
}

console.log(sapa("Razin")); // Halo, Razin!

JavaScript modern juga punya arrow function yang lebih ringkas:

const tambah = (a, b) => a + b;
console.log(tambah(3, 4)); // 7

Condition: Bikin Keputusan

Pakai if sama else, program kamu bisa ngambil keputusan berdasarkan suatu kondisi.

let nilai = 75;

if (nilai >= 80) {
  console.log("Sangat baik");
} else if (nilai >= 60) {
  console.log("Cukup");
} else {
  console.log("Perlu ditingkatkan");
}

Perhatiin tanda === pas kamu membandingkan nilai. Tanda ini ngecek nilai sekaligus tipe datanya, jadi lebih aman dipakai ketimbang ==.

Loop: Ngulang Pekerjaan

Kalau kamu perlu ngulang sesuatu, ya pakai loop. Yang paling umum itu for.

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

Buat array, cara modern yang lebih bersih adalah forEach:

const buah = ["apel", "mangga", "jeruk"];
buah.forEach((item) => console.log(item));

Nyentuh Halaman lewat DOM

Nah, ini bagian yang bikin JavaScript berasa "ajaib". DOM (Document Object Model) itu cara JavaScript baca dan ngubah elemen HTML. Kamu bisa milih satu elemen, terus ubah isi atau gayanya.

const judul = document.querySelector("#judul");
judul.textContent = "Judul Baru";
judul.style.color = "tomato";

Yang lebih sering dipakai sebenernya adalah ngerespons aksi pengguna lewat event listener. Contohnya, njalanin kode pas tombol diklik.

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

const tombol = document.querySelector("#tombol");

tombol.addEventListener("click", () => {
  alert("Tombol berhasil diklik!");
});

Pola "pilih elemen, terus pasang event listener" ini salah satu pola paling penting yang bakal kamu pakai terus-terusan.

FAQ

JavaScript itu sama nggak sih sama Java?

Beda. Walaupun namanya mirip, dua-duanya bahasa yang beda banget. JavaScript dirancang buat web dan jalan di browser, sedangkan Java itu bahasa serbaguna yang berdiri sendiri.

Perlu kuasai HTML sama CSS dulu nggak?

Sangat disaranin sih. JavaScript kerjanya kan memanipulasi elemen HTML dan gaya CSS, jadi kalau kamu udah paham keduanya, JavaScript bakal jauh lebih gampang dicerna.

Gimana cara nyari kesalahan di kode?

Buka Console di browser. Pesan error biasanya nyebutin nama file sama nomor barisnya. Selain itu, console.log() itu teman terbaik kamu buat ngintip nilai variable di tengah jalan.

Penutup

JavaScript ini yang mbukain pintu dari halaman statis ke aplikasi web yang beneran interaktif. Mulai dari variable dan function, terus naik ke DOM sama event. Satu tips terakhir yang praktis: jangan cuma dibaca, ketik ulang tiap contoh pakai tangan kamu sendiri terus jalanin di Console. Belajar coding itu mirip olahraga; otot logika kamu cuma bakal tumbuh kalau rutin dilatih.

💡 Baca juga: belajar CSS dasar untuk pemula buat mempercantik tampilan halaman yang kamu bikin pakai JavaScript.