tutorial interaktif

Dasar-dasar pengkodingan

Bukan sekadar teori. Tiap konsep di sini punya kotak kode yang bisa langsung kamu ubah dan jalankan, supaya logikanya nempel di kepala, bukan cuma lewat di mata.

Sebenarnya, kode itu apa?

Kode adalah daftar perintah yang kamu tulis untuk komputer, dan komputer akan menjalankannya persis apa adanya — tidak lebih, tidak kurang.

Anggap komputer sebagai robot yang sangat patuh tapi sangat harfiah. Kalau kamu bilang "ambil gelas", robot itu akan bingung — gelas yang mana, diambil pakai apa, taruh di mana. Tapi kalau kamu bilang "gerakkan tangan 20 cm ke kanan, tutup jari, angkat 10 cm", robot itu langsung bisa jalan. Menulis kode itu proses menerjemahkan niat kita jadi langkah-langkah sejelas itu.

Kenapa ini penting: Hampir semua konsep di halaman ini — variabel, percabangan, perulangan, fungsi — cuma cara berbeda untuk memberi instruksi ke robot itu. Begitu satu konsepnya klik, sisanya ikut lebih gampang.

Bahasa yang dipakai di kotak-kotak kode halaman ini adalah JavaScript, karena bisa langsung jalan di browser tanpa kamu install apa pun. Tapi logikanya berlaku hampir sama di bahasa pemrograman apa pun yang nanti kamu pelajari.

Variabel: kotak penyimpan nilai

Variabel adalah nama yang kamu tempelkan ke sebuah nilai, supaya nilai itu bisa dipanggil ulang tanpa ditulis dari nol.

Menulis let nama = "Budi" itu seperti menempelkan label "nama" ke kotak yang isinya teks "Budi". Setelah itu, tiap kali kamu menyebut nama, robotnya tahu kamu maksud isi kotak itu. Ada beberapa tipe nilai dasar: teks (string), angka (number), dan benar/salah (boolean).

Coba ubah: Ganti isi variabel nama dan umur di bawah, lalu tekan jalankan. Perhatikan bagaimana baris keluarannya ikut berubah.

variabel.js

let nama = "Budi";
let umur = 17;
let suka_kode = true;

console.log(nama + " berumur " + umur + " tahun.");
console.log("Suka belajar kode?", suka_kode);

Operator: cara nilai saling berinteraksi

Operator adalah simbol yang menggabungkan atau membandingkan nilai — dari operasi matematika biasa sampai pertanyaan benar/salah.

Operator aritmatika (+ - * /) bekerja seperti kalkulator. Operator perbandingan (=== > <) menghasilkan jawaban benar atau salah, dan jawaban itu yang nanti dipakai robot untuk mengambil keputusan di bagian percabangan.

operator.js

let harga = 15000;
let jumlah = 3;
let total = harga * jumlah;

console.log("Total belanja:", total);
console.log("Lebih dari 40rb?", total > 40000);
console.log("Sisa uang 50rb:", 50000 - total);

Percabangan: robot mengambil keputusan

if / else adalah cara robot memilih jalan berbeda tergantung sebuah kondisi benar atau salah.

Struktur dasarnya: if (kondisi) { ...lakukan A }, dan kalau kondisinya salah, kode di dalam else { ...lakukan B } yang dijalankan. Kamu bisa menumpuk lebih dari dua pilihan dengan else if.

Coba ubah: Ganti angka pada nilai, lalu jalankan lagi. Cari angka yang membuat hasilnya berpindah kategori.

percabangan.js

let nilai = 82;

if (nilai >= 90) {
  console.log("Predikat: A");
} else if (nilai >= 75) {
  console.log("Predikat: B");
} else {
  console.log("Predikat: C, ayo belajar lagi");
}

Perulangan: robot mengulang tanpa capek

Perulangan (loop) menyuruh robot mengerjakan langkah yang sama berkali-kali, tanpa kamu perlu menulis ulang perintahnya satu per satu.

for adalah bentuk perulangan yang paling umum: kamu menentukan titik mulai, syarat berhenti, dan seberapa besar lompatan tiap putaran. Robotnya akan patuh mengulang persis sebanyak itu, lalu berhenti sendiri.

Coba ubah: Ganti batas i <= 5 jadi angka lain, atau ganti isi pesannya, lalu jalankan.

perulangan.js

for (let i = 1; i <= 5; i++) {
  console.log("Putaran ke-" + i + ": push-up!");
}
console.log("Selesai, robot capek pura-pura.");

Fungsi: perintah yang bisa dipakai ulang

Fungsi adalah kumpulan langkah yang kamu beri nama sekali, lalu bisa dipanggil ulang kapan pun dengan input berbeda-beda.

Daripada menulis rumus konversi suhu berulang kali, kamu bungkus jadi satu fungsi bernama celsiusKeFahrenheit. Sekali dipanggil dengan angka berbeda, hasilnya otomatis menyesuaikan — ini yang membuat kode besar tetap rapi dan gampang diubah.

fungsi.js

function celsiusKeFahrenheit(celsius) {
  return celsius * 9 / 5 + 32;
}

console.log("0°C =", celsiusKeFahrenheit(0), "°F");
console.log("28°C =", celsiusKeFahrenheit(28), "°F");
console.log("100°C =", celsiusKeFahrenheit(100), "°F");

Uji pemahaman & playground bebas

Lima soal singkat untuk mengecek apakah konsepnya sudah nempel, plus satu kotak kosong buat kamu bereksperimen sendiri.

Kotak bebas — tulis apa saja

playground.js

// tulis kode JavaScript apa pun di sini
let favorit = "kamu";
console.log("Halo, " + favorit + "!");

Search This Blog

kenzie

dasar dasar coding