Web APIs Lanjutan — JavaScript

Coba bayangin kamu jago DOM saja — bisa baca-tulis HTML, tapi gak bisa: ngenotif user, deteksi posisi geo, akses kamera, deteksi kalo elemen masuk viewport…

Selain DOM, browser menyediakan banyak alat siap pakai buat JavaScript: memantau elemen yang masuk layar, menyalin teks ke clipboard, membaca lokasi pengguna, dan masih banyak lagi. Alat-alat bawaan browser ini disebut Web API. Gak perlu install apa pun, tinggal panggil.

🧪 Tebakan cepat: kamu mau tahu kapan sebuah kartu kelihatan di layar. Perlukah mengecek posisi scroll tiap beberapa milidetik pakai setInterval? Tebak dulu, jawabannya ada di bagian "IntersectionObserver: tahu kapan elemen kelihatan".

IntersectionObserver: tahu kapan elemen kelihatan

Gambar yang baru dimuat waktu discroll, atau kartu yang muncul pelan-pelan, butuh tahu kapan sebuah elemen masuk layar. IntersectionObserver adalah pengamat (observer) yang mengabarimu begitu itu terjadi:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('muncul')
    }
  })
})

document.querySelectorAll('.foto').forEach((foto) => {
  observer.observe(foto)
})

new IntersectionObserver(callback) bikin pengamatnya. Browser memanggil callback ini sekali di awal, lalu tiap kali elemen yang diamati masuk atau keluar layar.
entries adalah array laporan, satu untuk tiap elemen yang berubah.
entry.isIntersecting bernilai true kalau elemen itu sedang bersinggungan dengan layar, artinya kelihatan, walau cuma sebagian.
entry.target adalah elemen yang dilaporkan.
observer.observe(foto) mendaftarkan satu elemen. Satu pengamat boleh mengamati banyak elemen, jadi daftarkan semuanya lewat querySelectorAll(...).forEach(...).

Hasilnya, foto yang sudah ada di layar langsung dapat class muncul, sedangkan foto yang jauh di bawah baru dapat waktu kamu scroll ke sana. Jawaban tebakan: gak perlu setInterval, browser yang mengabari. Kalau sudah gak dibutuhkan, observer.disconnect() menghentikan semua pengamatannya.

Observer lain: ukuran dan isi DOM

Polanya sama: bikin pengamat dengan callback, lalu observe elemennya.

const ro = new ResizeObserver((entries) => {
  console.log('Lebar:', entries[0].contentRect.width)
})
ro.observe(document.querySelector('#kotak'))

const mo = new MutationObserver((records) => {
  console.log('Daftar berubah:', records.length, 'perubahan')
})
mo.observe(document.querySelector('#daftar'), { childList: true })

ResizeObserver mengabari waktu ukuran elemen berubah. contentRect.width adalah lebarnya.
MutationObserver mengabari waktu isi DOM berubah. { childList: true } artinya "kabari kalau ada anak yang ditambah atau dihapus".

Clipboard: menyalin teks

navigator.clipboard.writeText('Halo!')
  .then(() => console.log('Tersalin'))

navigator adalah objek berisi info dan alat dari browser. Clipboard ada di navigator.clipboard, bukan di document atau window.
writeText(teks) menyalin teks ke clipboard. Hasilnya Promise, karena browser bisa menolak.
Clipboard cuma jalan di halaman HTTPS atau localhost, dan sebaiknya dipanggil dari klik pengguna.

Geolocation: lokasi pengguna

navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (err) => console.log('Gagal:', err.message)
)

Browser minta izin ke pengguna dulu. Callback pertama jalan kalau diizinkan, dan membawa koordinatnya. Callback kedua jalan kalau ditolak atau gagal.

⚠️ Jebakan yang sering ketemu

Cuma mengamati satu elemen. observer.observe(document.querySelector('.foto')) hanya mendaftarkan foto pertama. Pakai querySelectorAll dan forEach.
Gak mengecek isIntersecting. Callback juga dipanggil di awal buat elemen yang belum kelihatan. Tanpa cek itu, semua elemen ikut ditandai, termasuk yang jauh di bawah.
Lupa disconnect(). Pengamat terus bekerja walau halamannya sudah gak butuh.
Izin bisa ditolak. Lokasi dan clipboard bisa ditolak pengguna, atau gak tersedia di halaman http://. Siapkan juga jalan buat kalau gagal.

TL;DR: Web API adalah alat bawaan browser. new IntersectionObserver(callback) plus observer.observe(el) mengabari kapan elemen masuk layar: cek entry.isIntersecting, lalu pakai entry.target. ResizeObserver memantau ukuran, MutationObserver memantau isi DOM, dan disconnect() menghentikan pengamat. navigator.clipboard.writeText(teks) menyalin teks, navigator.geolocation.getCurrentPosition(...) membaca lokasi setelah pengguna mengizinkan.