Basic JavaScript: Dari Nol sampai Proyek Pertama8/10

Bab 8 dari 10

DOM dan Event

DOM adalah representasi halaman HTML dalam bentuk object. JavaScript dapat memilih, mengubah, membuat, dan menghapus elemen melalui DOM.

Memilih elemen

Code
<h1 id="judul">Daftar Tugas</h1>
<input id="input-tugas" />
<button id="tambah">Tambah</button>
<ul id="daftar"></ul>
Code
const judul = document.querySelector("#judul");
const input = document.querySelector("#input-tugas");
const tombol = document.querySelector("#tambah");
const daftar = document.querySelector("#daftar");

Mengubah konten dan class

Code
judul.textContent = "Tugas Hari Ini";
judul.classList.add("aktif");
judul.classList.toggle("besar");

Gunakan textContent untuk teks dari pengguna. Hindari memasukkan input pengguna melalui innerHTML karena dapat membuka celah XSS.

Membuat elemen

Code
function tambahTugas(teks) {
  const item = document.createElement("li");
  item.textContent = teks;
  daftar.append(item);
}

Event listener

Code
tombol.addEventListener("click", () => {
  const teks = input.value.trim();

  if (!teks) return;

  tambahTugas(teks);
  input.value = "";
  input.focus();
});

Tangani tombol Enter:

Code
input.addEventListener("keydown", event => {
  if (event.key === "Enter") tombol.click();
});

Event delegation

Untuk banyak item, pasang satu listener pada parent.

Code
daftar.addEventListener("click", event => {
  if (event.target.matches("li")) {
    event.target.classList.toggle("selesai");
  }
});

Latihan

Kembangkan daftar tugas agar:

  1. item dapat ditandai selesai;
  2. ada tombol hapus pada setiap item;
  3. input kosong menampilkan pesan validasi;
  4. jumlah tugas aktif ditampilkan di halaman.