Intermediate · Level 5: JavaScript AdvancedIntermediate40 menitBahasa Indonesia

URL dan Timer API Dasar

Membaca query parameter dengan URL API dan menjalankan aksi sederhana dengan timer.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membaca nilai dari URL query parameter
Memakai setTimeout untuk aksi sekali jalan
Memakai setInterval untuk aksi berulang yang bisa dihentikan

JavaScriptURL APITimer

Isi lesson

7 blok

1.
Browser punya API yang bisa dipakai JavaScriptBelum selesaiWajib
2.
URL menyimpan konteks halamanBelum selesaiWajib
3.
Membaca query dan menjalankan timer kecilBelum selesaiWajib
4.
Timer yang tidak dihentikan bisa membuat app terasa anehBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
Coding practiceBelum selesaiWajib
7.
RingkasanBelum selesaiWajib

Browser punya API yang bisa dipakai JavaScript

Wajib

Di module sebelumnya, kamu sudah membuat async flow yang lebih jujur untuk user. Sekarang kita mulai memakai kemampuan browser dengan lebih sengaja.

Browser API adalah fitur yang disediakan browser untuk JavaScript. Di lesson ini, fokusnya kecil dulu: membaca URL dan menjalankan timer. Dua hal ini sering muncul di app nyata, misalnya filter dari query string, notifikasi sementara, countdown, atau refresh status berkala.

Bagian ini memengaruhi progres lesson.

URL menyimpan konteks halaman

Wajib

Query parameter adalah bagian URL setelah tanda tanya. Contoh: `/dashboard?tab=active`. Nilai `tab` bisa dipakai JavaScript untuk menentukan tampilan awal.

Timer punya dua bentuk dasar. `setTimeout` menjalankan function setelah jeda tertentu. `setInterval` menjalankan function berulang sampai kamu menghentikannya dengan `clearInterval`.

Bagian ini memengaruhi progres lesson.

Membaca query dan menjalankan timer kecil

Wajib

const currentUrl = new URL(window.location.href);
const selectedTab = currentUrl.searchParams.get("tab") ?? "overview";

console.log("Tab aktif:", selectedTab);

setTimeout(() => {
  console.log("Pesan ini muncul sekali setelah 1 detik.");
}, 1000);

let tick = 0;
const timerId = setInterval(() => {
  tick += 1;
  console.log("Tick:", tick);

  if (tick === 3) {
    clearInterval(timerId);
  }
}, 1000);

URL dipakai untuk membaca query parameter. setTimeout cocok untuk aksi sekali jalan, sedangkan setInterval perlu dihentikan saat tugasnya selesai.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Timer yang tidak dihentikan bisa membuat app terasa aneh

Jangan memakai setInterval tanpa rencana berhenti. Kalau interval terus berjalan setelah UI tidak membutuhkannya, app bisa menjalankan kerja yang tidak perlu dan membuat debugging lebih sulit.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

API mana yang paling tepat untuk menjalankan function sekali setelah jeda tertentu?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Baca query dan jalankan timer

Latihan membaca query parameter dari URL dan membuat timer kecil yang berhenti sendiri.

Tujuan awal: Fokus di tab JS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis4 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

URL API membantu JavaScript membaca bagian URL dengan lebih aman daripada parsing string manual.
URLSearchParams dipakai untuk mengambil query parameter.
setTimeout cocok untuk aksi sekali jalan.
setInterval cocok untuk aksi berulang, tetapi harus punya strategi berhenti.
Berikutnya, kamu akan memakai Clipboard dan localStorage untuk fitur UI kecil yang sering muncul di app.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Browser punya API yang bisa dipakai JavaScript.

Memuat progres Review module