DOM, BOM, dan Interaksi dengan Form

DOM (Document Object Model)

DOM adalah representasi struktur dokumen HTML dalam bentuk objek, sehingga JavaScript bisa:

• Mengakses elemen.
• Mengubah teks dan atribut.
• Mengubah style.
• Menangani event (klik, input, dan lain-lain).

Mengakses Elemen

Metode yang digunakan di materi:

const inputHarga = document.querySelector("#harga-awal");
const inputDiskon = document.querySelector("#diskon");
const tombolHitung = document.querySelector("#hitung-btn");
const hasil = document.querySelector("#hasil");

document.querySelector menerima selector CSS:

• #id untuk id.
• .class untuk class.
• tag untuk tag.

Menangani Event

Untuk membuat halaman interaktif, digunakan addEventListener.

tombolHitung.addEventListener("click", () => {
  // kode yang dijalankan ketika tombol diklik
});

Mengambil Nilai Input

Nilai dari input HTML diambil menggunakan .value:

const hargaInput = inputHarga.value;
const diskonInput = inputDiskon.value;

Nilai tersebut berbentuk string, lalu dikonversi menjadi number:

const harga = Number(hargaInput);
const diskon = Number(diskonInput);

Mengubah Konten di Halaman

innerHTML digunakan untuk mengubah isi elemen:

hasil.innerHTML = "Harga Akhir: Rp." + hargaAkhir;
hasil.style.display = "block";

Pada awalnya, elemen #hasil disembunyikan:

<div id="hasil" style="display: none;"></div>

Setelah tombol klik dan perhitungan selesai, style.display diubah menjadi "block" agar terlihat.

BOM (Browser Object Model)

BOM adalah kumpulan objek yang disediakan browser untuk berinteraksi dengan lingkungan browser.

Salah satu contoh yang digunakan adalah alert:

if (hargaInput === "") {
  alert("Harga Harus diisi");
}
if (diskonInput === "") {
  alert("Diskon harus diisi");
}

alert menampilkan pop-up sederhana kepada pengguna. Ini adalah bagian dari objek window.

Contoh API BOM lain (tidak semua digunakan di materi):

• window.alert()
• window.confirm()
• window.setTimeout()

Alur Lengkap Kalkulator Diskon

Ringkasan alur di script.js:

1. Ambil referensi elemen input dan tombol.
2. Tambahkan event listener pada tombol.
3. Saat tombol diklik:
   • Baca nilai harga-awal dan diskon.
   • Jika kosong, tampilkan alert.
   • Konversi ke number.
   • Hitung harga akhir menggunakan fungsi hitungDiskon.
   • Tampilkan hasil di elemen #hasil dan ubah display menjadi block.

Dengan memanfaatkan DOM dan BOM, JavaScript bisa membuat halaman web menjadi interaktif dan responsif terhadap aksi pengguna.