Pengantar Lengkap JavaScript untuk Pemula

#01: Mengenal JavaScript

JavaScript (JS) adalah bahasa pemrograman yang membuat website menjadi "hidup". Jika HTML hanya membangun struktur (kerangka) dan CSS hanya memberi gaya (dekorasi), maka JavaScript-lah yang menambahkan interaksi dan logika. Dengan JavaScript, Anda bisa membuat gambar slider, form validasi, game, dan banyak lagi. Ia adalah pilar ketiga dari pengembangan web modern.

Analogi: Trio Pembangun Web
• HTML: Sang Arsitek yang merancang struktur dan kerangka bangunan.
• CSS: Sang Desainer Interior yang memilih warna cat dan menata perabotan.
• JavaScript: Sang Insinyur Listrik yang memasang saklar dan sistem otomatis agar bangunan bisa merespons penghuninya.

#02: Cara Menulis JavaScript di HTML

Ada dua cara utama untuk menambahkan JavaScript ke halaman web:

A. Internal JavaScript (di dalam HTML)

Kode ditulis langsung di dalam file HTML menggunakan tag <script>. Cocok untuk skrip yang sangat pendek.

<body>
  <script>
    // Kode JS ditulis di sini
  </script>
</body>

B. External JavaScript (Praktik Terbaik)

Kode ditulis dalam file terpisah dengan ekstensi .js (contoh: skrip.js) dan dihubungkan ke HTML. Ini membuat kode lebih rapi dan bisa digunakan di banyak halaman.

<!-- Di file HTML, idealnya sebelum tag penutup </body> -->
<script src="skrip.js"></script>

#03: Fungsi Output & Input

Agar interaktif, JavaScript perlu cara untuk berkomunikasi dengan pengguna. Ia bisa memberikan output (menampilkan informasi) dan menerima input (meminta masukan).

A. Menampilkan Output

Ada beberapa cara untuk menampilkan informasi dari JavaScript ke pengguna.

Teks awal.

// 1. Mengubah konten elemen HTML dengan .innerHTML
document.getElementById("output-text").innerHTML = "Teks diubah!";

// 2. Menampilkan pop-up sederhana dengan alert()
alert("Ini adalah pesan alert.");

// 3. Menulis ke console browser (untuk developer)
console.log("Pesan ini hanya terlihat di console (F12).");

Penjelasan Kode: .innerHTML adalah cara paling umum untuk menampilkan output di halaman. alert() berguna untuk notifikasi cepat. console.log() adalah alat debugging terpenting bagi seorang developer.

B. Menerima Input

JavaScript juga bisa meminta masukan dari pengguna menggunakan jendela dialog.

// 1. Meminta input teks dengan prompt()
let nama = prompt("Siapa nama Anda?", "Siswa");
// Parameter kedua adalah nilai default

// 2. Meminta konfirmasi Ya/Tidak dengan confirm()
let yakin = confirm("Apakah Anda yakin?");
if (yakin) {
  alert("Baik, kita lanjutkan!");
} else {
  alert("Dibatalkan.");
}

Penjelasan Kode: prompt() akan mengembalikan teks yang diketik pengguna (atau null jika dibatalkan). confirm() akan mengembalikan nilai boolean: true jika pengguna menekan "OK", dan false jika menekan "Cancel".

#04: Variabel dan Tipe Data

Variabel adalah nama simbolis untuk sebuah nilai. Anggap saja seperti wadah berlabel yang bisa Anda isi dengan data. Tipe Data adalah jenis dari data tersebut. JavaScript adalah bahasa "loosely typed", artinya Anda tidak perlu mendeklarasikan tipe data dari sebuah variabel.

Analogi: Kotak Penyimpanan Berlabel
Variabel adalah kotak, nama variabel adalah label di kotak itu (misal: "Mainan Anak"), dan nilai adalah isi kotaknya. Tipe data adalah jenis isinya: apakah itu surat (String), kelereng (Number), atau saklar on/off (Boolean).

Contoh 1: Deklarasi Variabel

let pesan; // Mendeklarasikan variabel bernama 'pesan'
pesan = "Halo Dunia"; // Memberi nilai (assignment) ke variabel 'pesan'
document.getElementById('var-preview-1').textContent = pesan;

Penjelasan Kode: Baris pertama membuat "wadah" kosong bernama pesan. Baris kedua mengisi wadah tersebut dengan teks "Halo Dunia".

Contoh 2: `let` vs `const`

let skor = 100;
skor = 150; // Benar, nilai `let` bisa diubah

const namaPanggilan = "Alex";
// namaPanggilan = "Budi"; // Salah! Ini akan menyebabkan error karena nilai `const` tidak bisa diubah.
document.getElementById('var-preview-2').textContent = `Skor terakhir: ${skor}, Nama Panggilan: ${namaPanggilan}`

Penjelasan Kode: Gunakan let jika Anda tahu nilainya akan berubah. Gunakan const (konstan) untuk nilai yang tidak akan pernah berubah, ini membuat kode lebih aman dan mudah diprediksi.

Contoh 3: Tipe Data Primitif

let namaSiswa = "Citra";  // Tipe data String (teks)
let umur = 17;         // Tipe data Number (angka)
let sudahLulus = false; // Tipe data Boolean (benar/salah)
document.getElementById('var-preview-3').innerHTML = 
`Nama: ${namaSiswa} (${typeof namaSiswa})<br>
Umur: ${umur} (${typeof umur})<br>
Lulus: ${sudahLulus} (${typeof sudahLulus})`;

Penjelasan Kode: Operator typeof digunakan untuk memeriksa tipe data dari sebuah variabel, ini sangat berguna saat melakukan debugging.

#05: Operator

Operator adalah simbol khusus yang digunakan untuk melakukan operasi pada nilai dan variabel. Memahaminya adalah kunci untuk melakukan perhitungan dan logika.

Contoh 1: Operator Aritmatika

let x = 15;
let y = 4;
let sisaBagi = x % y; // Operator Modulo (sisa bagi), hasilnya 3
document.getElementById("op-preview-1").innerHTML = "Sisa dari 15 dibagi 4 adalah: " + sisaBagi;

Penjelasan Kode: Operator % (modulo) sangat berguna untuk menemukan sisa dari sebuah pembagian, misalnya untuk menentukan apakah sebuah angka ganjil atau genap.

Contoh 2: Operator Penugasan (Assignment)

let a = 10;
a += 5; // Sama dengan a = a + 5. Nilai a sekarang 15
document.getElementById("op-preview-2").innerHTML = "Nilai a setelah 'a += 5' adalah " + a;

Penjelasan Kode: Operator += adalah cara singkat untuk menambahkan nilai ke variabel yang sudah ada. Ini juga berlaku untuk -=, *=, dan /=.

Contoh 3: Operator Perbandingan (`==` vs `===`)

let angka = 5;
let teks = "5";
let hasil1 = (angka == teks); // true, karena nilainya sama
let hasil2 = (angka === teks); // false, karena tipe datanya berbeda (Number vs String)
document.getElementById("op-preview-3").innerHTML = `5 == "5" ? ${hasil1} <br> 5 === "5" ? ${hasil2}`;

Penjelasan Kode: Selalu utamakan menggunakan === (Strict Equality) untuk perbandingan. Ini akan membandingkan nilai DAN tipe datanya, sehingga lebih aman dan akurat.

#06: Percabangan (if/else)

Memungkinkan program untuk membuat keputusan dan menjalankan kode yang berbeda berdasarkan kondisi tertentu.

Analogi: Memilih Jalan di Persimpangan
Bayangkan Anda berada di persimpangan. if (tujuan == "kanan") adalah seperti Anda bertanya "Apakah tujuan saya ke kanan?". Jika ya, Anda belok kanan. else if (tujuan == "kiri") adalah pertanyaan kedua, "Jika tidak ke kanan, apakah tujuannya ke kiri?". Jika tidak keduanya, else adalah pilihan terakhir, "Kalau begitu, saya akan lurus."

Contoh 1: Pengecekan Umur Sederhana

let umur = 15;
if (umur >= 17) {
  document.getElementById('if-preview-1').textContent = "Anda boleh membuat SIM.";
} else {
  document.getElementById('if-preview-1').textContent = "Anda belum cukup umur.";
}

Contoh 2: Sistem Grading dengan `else if`

let nilai = 85;
let grade;
if (nilai >= 90) { grade = "A"; } 
else if (nilai >= 80) { grade = "B"; } 
else if (nilai >= 70) { grade = "C"; } 
else { grade = "D"; }
document.getElementById('if-preview-2').textContent = `Nilai ${nilai} mendapatkan grade ${grade}.`;

Contoh 3: Kondisi dengan Operator Logika `&&` (DAN)

let punyaTiket = true;
let usia = 20;
if (punyaTiket === true && usia >= 18) {
  document.getElementById('if-preview-3').textContent = "Silakan masuk ke bioskop.";
} else {
  document.getElementById('if-preview-3').textContent = "Maaf, Anda tidak bisa masuk.";
}

#07: Perulangan (Loops)

Digunakan untuk menjalankan blok kode yang sama berulang kali. Ini sangat efisien untuk tugas-tugas repetitif.

Contoh 1: Loop `for` Sederhana

Menampilkan angka 1 sampai 5.

let teks = "";
for (let i = 1; i <= 5; i++) {
  teks += i + " ";
}
document.getElementById('loop-preview-1').textContent = teks; // Hasil: "1 2 3 4 5 "

Contoh 2: Loop `for` pada Array

Menampilkan semua item dalam sebuah daftar.

const buah = ["Apel", "Pisang", "Mangga"];
let listBuah = "";
for (let i = 0; i < buah.length; i++) {
  listBuah += `<li>${buah[i]}</li>`;
}
document.getElementById('loop-preview-2').innerHTML = listBuah;

Contoh 3: Loop `while`

Terus berjalan selama kondisi terpenuhi.

let hitungan = 0;
let hasilWhile = "";
while (hitungan < 3) {
  hasilWhile += "Hitungan ke-" + hitungan + "<br>";
  hitungan++;
}
document.getElementById('loop-preview-3').innerHTML = hasilWhile;

#08: Struktur Data Array

Array adalah variabel khusus yang dapat menampung lebih dari satu nilai. Ini sangat berguna untuk mengelola daftar data.

Contoh 1: Membuat dan Mengakses Array

const buah = ["Apel", "Pisang", "Mangga"];
// Mengakses elemen kedua (indeks 1)
document.getElementById('array-result-1').textContent = `Buah favorit saya adalah ${buah[1]}.`;

Contoh 2: Mengubah Elemen Array

const warna = ["Merah", "Kuning", "Biru"];
warna[1] = "Hijau"; // Mengubah "Kuning" menjadi "Hijau"
document.getElementById('array-result-2').textContent = `Warna sekarang: ${warna.join(', ')}`;

Contoh 3: Menambah Elemen dengan `.push()`

const hewan = ["Kucing", "Anjing"];
hewan.push("Kelinci"); // Menambah "Kelinci" di akhir array
document.getElementById('array-result-3').textContent = `Daftar hewan: ${hewan.join(', ')}`;

#09: Fungsi

Blok kode yang dapat digunakan kembali. Ini adalah konsep inti untuk membuat kode yang terorganisir.

function hitungLuas(panjang, lebar) {
  return panjang * lebar;
}

// Fungsi akan dipanggil saat tombol diklik
document.getElementById('btn-fungsi').onclick = () => {
    let luas = hitungLuas(10, 5);
    document.getElementById('fungsi-result').textContent = `Luasnya adalah ${luas}`;
};

#10: Objek

Objek digunakan untuk mengelompokkan data dan fungsi yang terkait dalam satu wadah, merepresentasikan "benda" dengan properti dan kemampuannya.

const siswa = {
  nama: "Andi",
  jurusan: "TJKT",
  perkenalan: function() {
    return `Halo, saya ${this.nama} dari jurusan ${this.jurusan}.`;
  }
};
document.getElementById('objek-result').textContent = siswa.perkenalan();

#11: Mengenal DOM

DOM (Document Object Model) adalah cara JavaScript melihat halaman HTML. Ia mengubah seluruh dokumen menjadi sebuah objek besar berbentuk pohon, di mana setiap elemen adalah sebuah "cabang" yang bisa diakses dan dimanipulasi.

#12: Memahami Event

Event adalah aksi yang terjadi di halaman web yang dapat direspons oleh JavaScript. Ini adalah kunci interaktivitas.

document.getElementById('event-btn').addEventListener('click', () => {
  alert('Event "click" terdeteksi!');
});

Kesimpulan Akhir

Selamat! Anda telah mempelajari semua konsep paling dasar yang diperlukan untuk mulai menggunakan JavaScript. Anda tahu apa itu JS, bagaimana menulisnya, dan bagaimana ia berinteraksi dengan HTML untuk menciptakan halaman web yang dinamis. Perjalanan Anda sebagai developer web telah dimulai. Teruslah berlatih dengan membuat proyek-proyek kecil untuk mengasah pemahaman Anda.