FluentStack

Uji Kompetensi DOM, Events, Forms, localStorage, and Fetch Basics

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 4: JavaScript FundamentalsBeginner65 menitBahasa Indonesia

Uji Kompetensi DOM, Events, Forms, localStorage, and Fetch Basics

Checkpoint akhir untuk mengecek kesiapan membuat interaksi browser sederhana sebelum Local Vanilla JavaScript App.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Mengecek kemampuan memilih dan mengubah DOM
  • Mengecek event, form submit, dan localStorage dasar
  • Mengecek fetch JSON dasar dan readiness menuju project lokal
JavaScriptDOMAssessmentCheckpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint browser behaviorBelum selesaiWajib
  2. 2.
    Yang dicek di checkpoint iniBelum selesaiWajib
  3. 3.
    QuizBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    Baca MDN untuk DOM dan browser APIsBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint browser behavior

Wajib

Module ini menghubungkan JavaScript ke halaman browser. Kamu memilih elemen DOM, merespons event, membaca form, menyimpan data kecil dengan localStorage, dan mengambil data contoh dengan fetch JSON. Checkpoint ini memastikan kamu siap membawa pola itu ke project lokal.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Yang dicek di checkpoint ini

Fokusnya adalah interaksi kecil yang bisa dipahami: pilih elemen, dengarkan event, cegah submit default, simpan satu value, dan render data hasil fetch. Kamu belum perlu membuat arsitektur app besar atau error handling async yang kompleks.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi DOM, Events, Forms, localStorage, and Fetch Basics

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 6

Target lulus: 70

Kamu ingin memilih elemen dengan id="result" agar teksnya bisa diubah. Kode mana yang paling tepat?

Coding practice

WajibDibuka di workspace khusus

Membangun checkpoint interaksi browser

Checkpoint praktik yang menggabungkan form submit, DOM update, localStorage, fetch, dan render list.

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.

10 cek otomatis3 checklist
Belum selesaiBuka practice

Documentation Bridge

Wajib

Baca MDN untuk DOM dan browser APIs

Gunakan dokumentasi ini untuk mengenali istilah resmi sebelum masuk Local Vanilla JavaScript App.

MDN Web Docs

DOM scripting introduction

Fokus baca

  • DOM sebagai cara JavaScript membaca halaman
  • contoh memilih elemen
  • contoh mengubah isi halaman

Abaikan dulu

  • manipulasi DOM yang panjang
  • contoh project besar
Buka dokumentasi

MDN Web Docs

Document.querySelector

Fokus baca

  • querySelector menerima selector CSS
  • hasilnya satu elemen pertama yang cocok
  • contoh selector sederhana

Abaikan dulu

  • selector kompleks
  • CSS.escape
  • pseudo-element
Buka dokumentasi

MDN Web Docs

EventTarget.addEventListener

Fokus baca

  • nama event seperti click dan submit
  • function yang dijalankan saat event terjadi
  • contoh addEventListener sederhana

Abaikan dulu

  • options lanjutan
  • event propagation detail
  • removeEventListener
Buka dokumentasi

MDN Web Docs

Window.localStorage

Fokus baca

  • localStorage menyimpan key dan value
  • setItem dan getItem
  • data tersimpan sebagai string

Abaikan dulu

  • quota
  • storage event
  • privacy edge cases
Buka dokumentasi

MDN Web Docs

Using the Fetch API

Fokus baca

  • fetch mengirim request
  • response.json membaca JSON
  • alur promise dasar

Abaikan dulu

  • streaming
  • upload file
  • AbortController
Buka dokumentasi

Aksi setelah membaca

Pilih satu halaman MDN di atas, lalu cocokkan satu istilah di docs dengan kode practice checkpoint yang baru kamu kerjakan.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Kamu sudah mengecek readiness untuk membuat interaksi browser dasar.
  • Jika event atau form masih membingungkan, review lesson Event Click dan Form Submit sebelum lanjut.
  • Jika fetch masih terasa cepat, fokus dulu pada pola fetch -> response.json -> render data.
  • Berikutnya, Local Vanilla JavaScript App akan membawa DOM, event, storage, dan fetch ke project lokal di device kamu.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint browser behavior.

Memuat progresReview module