WEB-APIS DOCS

DOM-CORE

document.querySelector()
Description: Mengembalikan elemen pertama yang cocok dengan selector CSS.
Example: 
const el = document.querySelector('.my-class')
Output: Element | null
document.querySelectorAll()
Description: Mengembalikan NodeList statis dari semua elemen yang cocok dengan selector CSS.
Example: 
const els = document.querySelectorAll('div.item')
Output: NodeList
document.getElementById()
Description: Mengembalikan elemen berdasarkan atribut id.
Example: 
const el = document.getElementById('header')
Output: Element | null
document.createElement()
Description: Membuat elemen HTML baru.
Example: 
const div = document.createElement('div')
Output: HTMLDivElement
element.innerHTML
Description: Mendapatkan atau mengatur konten HTML dalam elemen.
Example: 
div.innerHTML = '<p>Hello</p>'
Output: Konten HTML
element.textContent
Description: Mendapatkan atau mengatur teks dalam elemen (tanpa HTML).
Example: 
div.textContent = 'Hello'
Output: Teks murni
element.addEventListener()
Description: Menambahkan event listener ke elemen.
Example: 
button.addEventListener('click', () => { console.log('Klik') })
Output: Handler terdaftar
element.removeEventListener()
Description: Menghapus event listener.
Example: 
button.removeEventListener('click', handler)
Output: Handler dihapus
element.classList
Description: Objek DOMTokenList untuk memanipulasi class (add, remove, toggle, contains).
Example: 
el.classList.add('active')
Output: Class ditambahkan
element.dataset
Description: Membaca/menulis atribut data-*.
Example: 
const id = el.dataset.userId
Output: Nilai dari data-user-id
element.getBoundingClientRect()
Description: Mengembalikan ukuran dan posisi elemen relatif terhadap viewport.
Example: 
const rect = el.getBoundingClientRect()
Output: { x: 100, y: 200, width: 300, height: 150, ... }
element.scrollIntoView()
Description: Menggulir halaman hingga elemen terlihat.
Example: 
el.scrollIntoView({ behavior: 'smooth', block: 'center' })
Output: Tergulir ke elemen

FETCH-API

fetch()
Description: Melakukan permintaan jaringan dan mengembalikan Promise yang resolve ke Response.
Example: 
const res = await fetch('/api/data')
Output: Response object
Response.json()
Description: Mengurai body respons sebagai JSON.
Example: 
const data = await res.json()
Output: Objek JavaScript
Response.text()
Description: Mengurai body respons sebagai teks.
Example: 
const text = await res.text()
Output: String
Response.blob()
Description: Mengurai body respons sebagai Blob (gambar, file).
Example: 
const blob = await res.blob()
Output: Blob
Response.status
Description: Kode status HTTP respons (200, 404, dll).
Example: 
res.status
Output: 200
Response.ok
Description: Boolean, true jika status antara 200-299.
Example: 
if (res.ok) { ... }
Output: true
Request options (method, headers, body)
Description: Objek opsi untuk fetch: method, headers, body, mode, credentials.
Example: 
fetch('/api', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) })
Output: POST request
AbortController
Description: Membatalkan permintaan fetch yang sedang berjalan.
Example: 
const controller = new AbortController()
fetch(url, { signal: controller.signal })
controller.abort()
Output: Permintaan dibatalkan

STORAGE

localStorage
Description: Penyimpanan persisten per origin, tidak kadaluarsa.
Example: 
localStorage.setItem('key', 'value')
const val = localStorage.getItem('key')
Output: Data tersimpan
sessionStorage
Description: Penyimpanan per sesi tab, hilang saat tab ditutup.
Example: 
sessionStorage.setItem('temp', 'data')
Output: Data sesi
IndexedDB (basic)
Description: Database NoSQL yang kuat di browser untuk data terstruktur.
Example: 
const request = indexedDB.open('myDB', 1)
request.onsuccess = () => { const db = request.result }
Output: Database terbuka
Cache API
Description: Penyimpanan untuk pasangan Request/Response, biasanya digunakan di Service Worker.
Example: 
const cache = await caches.open('v1')
await cache.put(request, response)
const res = await cache.match(request)
Output: Data di-cache
Cookies (document.cookie)
Description: String yang berisi semua cookie untuk halaman (baca/tulis). Gunakan HttpOnly untuk keamanan.
Example: 
document.cookie = 'theme=dark; max-age=86400; path=/'
Output: Cookie diatur

GEOLOCATION

navigator.geolocation.getCurrentPosition()
Description: Mendapatkan posisi geografis pengguna sekali.
Example: 
navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (err) => console.error(err)
)
Output: Koordinat
navigator.geolocation.watchPosition()
Description: Memantau perubahan posisi secara terus menerus.
Example: 
const watchId = navigator.geolocation.watchPosition(success, error)
Output: ID pemantau
Position.coords.latitude / longitude
Description: Nilai latitude dan longitude dalam derajat desimal.
Example: 
position.coords.latitude
Output: -6.2088

CANVAS

HTMLCanvasElement.getContext()
Description: Mendapatkan konteks rendering (2d, webgl, webgpu).
Example: 
const ctx = canvas.getContext('2d')
Output: CanvasRenderingContext2D
ctx.fillRect()
Description: Menggambar persegi panjang terisi.
Example: 
ctx.fillRect(10, 10, 100, 50)
Output: Kotak hitam
ctx.fillStyle
Description: Warna atau gaya isian.
Example: 
ctx.fillStyle = 'red'
Output: Warna merah
ctx.strokeRect()
Description: Menggambar kerangka persegi panjang.
Example: 
ctx.strokeRect(10, 70, 100, 50)
Output: Kotak tanpa isi
ctx.beginPath() / moveTo / lineTo / stroke
Description: Menggambar jalur kustom.
Example: 
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(100, 100)
ctx.stroke()
Output: Garis diagonal
ctx.drawImage()
Description: Menggambar gambar ke canvas.
Example: 
ctx.drawImage(image, 0, 0)
Output: Gambar ditampilkan

WEB-ANIMATION

element.animate()
Description: Membuat animasi langsung menggunakan JavaScript.
Example: 
el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 1000, easing: 'ease-in-out' })
Output: Animasi berjalan
Animation.finished
Description: Promise yang resolve saat animasi selesai.
Example: 
await animation.finished
Output: Animasi selesai
requestAnimationFrame()
Description: Menjadwalkan fungsi sebelum repaint berikutnya (untuk animasi halus).
Example: 
function animate() { /* update */ requestAnimationFrame(animate) }
Output: Loop animasi

WEB-AUDIO

AudioContext
Description: Antarmuka utama untuk pemrosesan audio.
Example: 
const audioCtx = new AudioContext()
Output: AudioContext
OscillatorNode
Description: Menghasilkan gelombang suara periodik.
Example: 
const osc = audioCtx.createOscillator()
osc.type = 'sine'
osc.frequency.value = 440
osc.connect(audioCtx.destination)
osc.start()
Output: Nada 440Hz
GainNode
Description: Mengontrol volume.
Example: 
const gain = audioCtx.createGain()
gain.gain.value = 0.5
Output: Volume setengah
decodeAudioData()
Description: Mendekode file audio (MP3, WAV) menjadi AudioBuffer.
Example: 
const buffer = await audioCtx.decodeAudioData(arrayBuffer)
Output: AudioBuffer

WEB-RTC

RTCPeerConnection
Description: Membuat koneksi peer-to-peer untuk audio/video/data.
Example: 
const pc = new RTCPeerConnection(configuration)
Output: PeerConnection
getUserMedia()
Description: Meminta akses kamera dan mikrofon.
Example: 
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
Output: MediaStream
addTrack() / addStream()
Description: Menambahkan track media ke koneksi.
Example: 
stream.getTracks().forEach(track => pc.addTrack(track, stream))
Output: Track ditambahkan
createOffer() / createAnswer()
Description: Membuat SDP offer/answer.
Example: 
const offer = await pc.createOffer()
await pc.setLocalDescription(offer)
Output: SDP dihasilkan
RTCDataChannel
Description: Mengirim data arbitrer melalui koneksi peer.
Example: 
const channel = pc.createDataChannel('chat')
channel.send('Hello')
Output: Data terkirim

OBSERVERS

IntersectionObserver
Description: Mengamati visibilitas elemen relatif terhadap viewport/ancestor (lazy loading, infinite scroll).
Example: 
const observer = new IntersectionObserver(cb, { threshold: 0.5 })
observer.observe(el)
Output: Callback dipanggil saat visibilitas berubah
MutationObserver
Description: Mengamati perubahan pada DOM (childList, attributes, characterData).
Example: 
const observer = new MutationObserver(mutations => { ... })
observer.observe(el, { childList: true, attributes: true })
Output: Callback dipanggil saat DOM berubah
ResizeObserver
Description: Mengamati perubahan ukuran elemen.
Example: 
const observer = new ResizeObserver(entries => { ... })
observer.observe(el)
Output: Callback dipanggil saat elemen di-resize

CLIPBOARD

navigator.clipboard.writeText()
Description: Menulis teks ke clipboard (perlu izin pengguna).
Example: 
await navigator.clipboard.writeText('Hello')
Output: Teks disalin
navigator.clipboard.readText()
Description: Membaca teks dari clipboard (perlu izin).
Example: 
const text = await navigator.clipboard.readText()
Output: Teks dari clipboard

NOTIFICATIONS

Notification.requestPermission()
Description: Meminta izin untuk menampilkan notifikasi.
Example: 
const permission = await Notification.requestPermission()
Output: 'granted' | 'denied' | 'default'
new Notification()
Description: Menampilkan notifikasi sistem.
Example: 
new Notification('Halo', { body: 'Pesan baru', icon: '/icon.png' })
Output: Notifikasi muncul

OTHER-APIS

history.pushState() / replaceState()
Description: Mengubah URL tanpa reload halaman.
Example: 
history.pushState({ id: 1 }, '', '/page/1')
Output: URL berubah, state ditambahkan
Web Workers
Description: Menjalankan skrip di background thread.
Example: 
const worker = new Worker('worker.js')
worker.postMessage('data')
worker.onmessage = (e) => console.log(e.data)
Output: Pemrosesan di latar belakang
Intl.DateTimeFormat
Description: Internationalization API untuk format tanggal.
Example: 
new Intl.DateTimeFormat('id-ID', { dateStyle: 'long' }).format(new Date())
Output: '27 Juni 2025'
Intl.NumberFormat
Description: Format angka dengan lokal.
Example: 
new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(100000)
Output: 'Rp 100.000,00'