Vanilla JS

Bahasa milik browser, tanpa framework: logika, DOM, event dan fetch. 16 modul masing-masing 10 menit, dengan soal yang mengecek jawabanmu di browser.

Mulai jalurnya

Dasar

• 1. Variabel (let/const), tipe, dan operatorGratis
  Simpan nilai dengan const dan let, kenali tipe-tipe dasar JavaScript, dan lakukan perhitungan serta perbandingan dengan aman.
• 2. Function dan arrow functionGratis
  Kemas logika ke dalam function yang bisa dipakai ulang dengan parameter, nilai default, dan nilai kembalian, tulis arrow function yang ringkas, dan oper function sebagai nilai.
• 3. Array dan objekGratis
  Simpan daftar di array dan record di objek, baca dan perbarui keduanya, gabungkan menjadi array berisi objek, serta gunakan destructuring dan spread untuk mengolahnya dengan rapi.
• 4. Percabangan dan perulanganGratis
  Ambil keputusan dengan if, else, operator ternary, dan switch, pahami nilai truthy dan falsy, lindungi diri dari data yang hilang dengan ?? dan ?., serta ulangi pekerjaan dengan for, for...of, dan while.

Menengah

• 5. DOM: memilih dan mengubah elemenGratis
  Temukan elemen dengan querySelector, ubah teks, class, dan atributnya, buat dan hapus elemen, serta tampilkan daftar data dengan aman tanpa jebakan innerHTML.
• 6. Event dan event listenerGratis
  Bereaksi terhadap klik, ketikan, pengiriman formulir, dan tombol keyboard dengan addEventListener, gunakan objek event, hentikan perilaku default browser, dan tangani banyak elemen dengan satu listener yang didelegasikan.
• 7. Template literal dan pengolahan stringGratis
  Bangun string dengan template literal, bersihkan dan periksa teks dengan trim, huruf besar-kecil, includes, startsWith, slice, split, join, replaceAll, dan padStart, serta format angka untuk pengguna Indonesia.
• 8. Method array (map, filter, reduce, forEach)Gratis
  Ubah data secara deklaratif dengan map, filter, reduce, find, some, every, dan sort, rangkai menjadi pipeline yang mudah dibaca, dan hindari jebakan klasik sort dan mutasi.

Lanjutan

• 9. Scope, closure, dan thisPro
  Pahami di mana variabel terlihat, bagaimana function mengingat variabel di sekitarnya (closure) untuk membuat state privat, dan apa arti this di method, arrow function, dan event handler.
• 10. JS asinkron: callback dan promisePro
  Pahami kenapa JavaScript tidak menunggu pekerjaan yang lambat, bagaimana event loop mengurutkan callback dan promise, serta cara membuat, merangkai, menggabungkan, dan menangani error pada promise.
• 11. async/await dan fetch (memanggil API)Pro
  Tulis kode asinkron yang terbaca dari atas ke bawah dengan async dan await, panggil JSON API dengan fetch, cek status response, kirim data dengan POST, dan tampilkan state loading serta error.
• 12. JSON dan localStoragePro
  Ubah data ke dan dari JSON dengan stringify dan parse, tangani apa yang tidak bisa direpresentasikan JSON, dan simpan sedikit data di browser dengan localStorage secara aman.

Ahli

• 13. Module (import/export)Pro
  Pecah aplikasi JavaScript menjadi file-file ES module dengan named export dan default export, impor apa yang dibutuhkan setiap file, muat module di browser dengan type="module", dan rancang antarmuka module yang kecil.
• 14. Penanganan error dan debuggingPro
  Tangkap dan munculkan error dengan try, catch, dan finally, buat error kustom yang bermakna, tangani kegagalan di kode async, baca pesan error dan stack trace, serta debug dengan console dan breakpoint.
• 15. Kode yang bersih: menata aplikasi vanilla JSPro
  Susun aplikasi tanpa framework di sekitar satu objek state, function update yang murni, satu function render, dan event handler yang tipis, supaya halaman selalu sesuai dengan datanya dan setiap bagian tetap kecil serta bisa dites.
• 16. Proyek kecil: UI interaktif tanpa frameworkPro
  Bangun katalog toko kopi yang lengkap dengan JavaScript biasa, dengan data yang dimuat dari API, pencarian langsung, filter kategori, pengurutan, keranjang dengan total, isi keranjang yang tersimpan, serta state loading dan error.

Proyek jalur

• Proyek JavaScript: tampilan depan toko Toko KitaPro
  Tiga tugas bernilai yang menghidupkan halaman toko. Muat dan cari daftar produk dari API, simpan keranjang yang tetap ada setelah halaman dimuat ulang, dan kirim formulir checkout yang menangani koneksi lambat dan kegagalan dengan baik.

Modul Pro terbuka dengan sekali bayar Rp 149.000, milikmu selamanya.