JavaScript DOM Dasar ⚡

Buat halaman web jadi interaktif! Pelajari cara memanipulasi DOM — mengganti teks, mengubah warna, merespons klik tombol, dan banyak lagi.

📌 Cara Menyertakan JavaScript

Ada 3 cara menyertakan JavaScript di HTML:

/* 1. Inline — langsung di elemen HTML */
<button onclick="alert('Halo!')">Klik Saya</button>

/* 2. Internal — di dalam tag <script> */
<script>
  console.log("Halo dari JavaScript!");
</script>

/* 3. External — file .js terpisah (REKOMENDASI) */
<script src="script.js" defer></script>
/* defer = tunggu HTML selesai dimuat dulu */

🎯 Memilih Elemen HTML (DOM Selection)

Langkah pertama manipulasi DOM: pilih elemen yang ingin diubah.

// Cara 1: Pilih satu elemen berdasarkan ID (paling umum)
const judul = document.getElementById("judul");

// Cara 2: Pilih satu elemen berdasarkan CSS selector
const tombol = document.querySelector("button");
const kotak = document.querySelector(".kotak");   // class
const nama = document.querySelector("#nama");     // id

// Cara 3: Pilih semua elemen yang cocok (mengembalikan NodeList)
const semuaTombol = document.querySelectorAll("button");
const semuaLi = document.querySelectorAll("ul li");

✏️ Mengubah Konten & Teks

textContent

Mengubah teks elemen (tanpa HTML, lebih aman)

// HTML: <h1 id="judul">Teks Lama</h1>
const judul = document.getElementById("judul");
judul.textContent = "Teks Baru yang Keren!";
// Hasil: <h1 id="judul">Teks Baru yang Keren!</h1>

innerHTML

Mengubah konten HTML di dalam elemen (bisa sisipkan tag HTML)

const kotak = document.querySelector("#info");
kotak.innerHTML = "<strong>Selamat!</strong> Kamu berhasil! 🎉";
// innerHTML bisa menyisipkan tag HTML — hati-hati XSS!

value

Membaca atau mengubah nilai input field

const inputNama = document.getElementById("nama");
const nilaiBaru = inputNama.value;   // Baca nilai input
inputNama.value = "Budi";            // Set nilai input

🎨 Mengubah Gaya (CSS)

const kotak = document.querySelector(".kotak");

// Ubah properti CSS langsung via .style
kotak.style.backgroundColor = "#3b82f6";  // background-color → camelCase!
kotak.style.color = "white";
kotak.style.fontSize = "20px";
kotak.style.display = "none";         // Sembunyikan elemen
kotak.style.display = "block";        // Tampilkan lagi

// Cara lebih baik: tambah/hapus class CSS
kotak.classList.add("aktif");         // Tambah class
kotak.classList.remove("aktif");      // Hapus class
kotak.classList.toggle("aktif");     // Toggle (on/off)
kotak.classList.contains("aktif");  // Cek apakah punya class

🖱️ Event Listener (Respons Aksi Pengguna)

Event listener menunggu aksi pengguna (klik, ketik, hover, dll.) lalu menjalankan fungsi.

const tombol = document.getElementById("btnKlik");

// Cara 1: addEventListener (REKOMENDASI)
tombol.addEventListener("click", function() {
    alert("Tombol diklik!");
});

// Cara 2: Arrow function (lebih ringkas)
tombol.addEventListener("click", () => {
    console.log("Klik terdeteksi");
});

// Jenis-jenis event yang umum:
// "click"      - klik mouse
// "dblclick"   - double klik
// "mouseover"  - kursor masuk ke elemen
// "mouseout"   - kursor keluar dari elemen
// "keydown"    - tombol keyboard ditekan
// "keyup"      - tombol keyboard dilepas
// "input"      - nilai input berubah
// "submit"     - form dikirim
// "change"     - select/checkbox berubah

🚀 Proyek Mini: Tombol Interaktif

Contoh lengkap: tombol yang mengubah warna latar dan teks saat diklik.

<!-- HTML -->
<div id="kotak" style="padding:20px;background:#dbeafe;border-radius:12px">
  <p id="teks">Klik tombol di bawah!</p>
  <button id="btn">Ubah Warna</button>
  <button id="btnReset">Reset</button>
</div>

<!-- JavaScript -->
<script>
  const kotak = document.getElementById("kotak");
  const teks = document.getElementById("teks");
  const btn = document.getElementById("btn");
  const btnReset = document.getElementById("btnReset");

  const warna = ["#fef3c7", "#d1fae5", "#fce7f3", "#e0e7ff"];
  let i = 0;

  btn.addEventListener("click", () => {
    kotak.style.background = warna[i % warna.length];
    teks.textContent = "Warna ke-" + (i + 1) + "! 🎨";
    i++;
  });

  btnReset.addEventListener("click", () => {
    kotak.style.background = "#dbeafe";
    teks.textContent = "Klik tombol di bawah!";
    i = 0;
  });
</script>

📝 Proyek Mini: Kalkulator Input

<!-- HTML -->
<input type="number" id="angka1" placeholder="Angka 1">
<input type="number" id="angka2" placeholder="Angka 2">
<button id="btnHitung">Tambahkan!</button>
<p id="hasil">Hasil: -</p>

<!-- JavaScript -->
<script>
  document.getElementById("btnHitung")
    .addEventListener("click", () => {
      const a = Number(document.getElementById("angka1").value);
      const b = Number(document.getElementById("angka2").value);
      document.getElementById("hasil").textContent = "Hasil: " + (a + b);
    });
</script>

💬 Dialog & Debug

// 3 jenis dialog bawaan browser
alert("Pesan informasi untuk pengguna");

const setuju = confirm("Apakah kamu yakin?");
// setuju = true jika klik OK, false jika Cancel

const nama = prompt("Siapa namamu?", "Tulis di sini");
// nama = teks yang diketik pengguna, null jika Cancel

// Debug dengan console (buka F12 → Console)
console.log("Nilai:", variabel);    // Cetak nilai biasa
console.error("Ada error!");         // Cetak pesan error (merah)
console.warn("Peringatan!");         // Cetak peringatan (kuning)
console.table(arrayData);            // Tampilkan array/objek sebagai tabel

⚡

Latihan Terbaik

Buka codepen.io, buat HTML dengan beberapa tombol dan elemen, lalu coba manipulasi dengan JavaScript di panel JS. Tekan F12 → Console untuk debug. Setiap error adalah pelajaran!