Home JS Dasar Hingga Medium

JS Dasar Hingga Medium

Bagus Rian Kusuma
Bagus Rian Kusuma
Updated: • 0 • min read
Table of Contents

 

🧩 LEVEL 1 – DASAR MUTLAK (Fundamental Core)

Tujuan: memahami cara kerja JavaScript dan logikanya tanpa framework.

1. Pengenalan dan Dasar Sintaks

  • Apa itu JavaScript, dan bagaimana cara kerjanya di browser.

  • Cara menulis JS di:

    • Tag <script> langsung di HTML,

    • File .js eksternal.

  • Konsep console.log() dan debugging di DevTools.

🎯 Latihan:

  • Cetak kalimat di console.

  • Buat alert dan prompt sederhana.

2. Variabel dan Tipe Data

  • let, const, var (perbedaan & kapan pakai apa).

  • Tipe data: string, number, boolean, null, undefined, array, object.

  • Operator aritmatika dan logika (+, -, *, /, ==, ===, &&, ||, dll).

🎯 Latihan:

  • Buat kalkulator sederhana di console.

  • Gabungkan string dan angka.

3. Kontrol Alur (Control Flow)

  • if, else if, else.

  • switch statement.

  • Looping: for, while, do...while.

  • break dan continue.

🎯 Latihan:

  • Program tebak angka (random 1–10).

  • Program menghitung jumlah angka genap dari 1–100.

4. Fungsi (Function)

  • Fungsi deklaratif (function nama() {}) dan ekspresif (const nama = function() {}).

  • Parameter, argumen, dan nilai return.

  • Arrow function (()=>{}).

🎯 Latihan:

  • Fungsi menghitung luas segitiga.

  • Fungsi memeriksa bilangan ganjil/genap.

5. Array dan Object

  • Array: push, pop, shift, unshift, slice, splice, forEach, map, filter, reduce.

  • Object: properti, method, destructuring, nested object.

🎯 Latihan:

  • Simpan daftar nama mahasiswa di array dan tampilkan satu-satu.

  • Buat object user dengan nama, umur, dan method sayHello().

6. DOM Manipulation

Inilah jembatan JavaScript dengan HTML.

  • document.querySelector(), getElementById().

  • Mengubah teks (innerText / innerHTML).

  • Mengubah atribut dan style.

  • Event handling: onclick, addEventListener.

🎯 Latihan:

  • Buat tombol yang mengubah warna background.

  • Form input yang menampilkan teks ke layar saat tombol diklik.

⚙️ LEVEL 2 – PEMAHAMAN MENENGAH (Intermediate Thinking)

Tujuan: memahami konsep yang sering dipakai developer modern.

7. Scope dan Closure

  • Perbedaan global, local, block scope.

  • Konsep closure (fungsi di dalam fungsi).

🎯 Latihan:

  • Buat counter yang menyimpan nilai di dalam fungsi tanpa variabel global.

8. ES6+ Modern JavaScript

  • Destructuring assignment.

  • Spread & rest operator.

  • Template literal.

  • Default parameter.

  • Modules (import / export).

🎯 Latihan:

  • Buat dua file JS dan gunakan import/export.

  • Gunakan spread operator untuk menggabungkan array.

9. Asynchronous JS (Promise & Async/Await)

  • Callback hell.

  • Promise (then, catch).

  • async / await untuk menangani proses asinkron.

  • Fetch API.

🎯 Latihan:

  • Fetch data dari API publik (misal: JSONPlaceholder).

  • Tampilkan hasil di halaman HTML.

10. Error Handling dan Debugging

  • try...catch.

  • throw new Error().

  • Teknik debugging pakai Chrome DevTools (breakpoint, watch).

🎯 Latihan:

  • Simulasikan error jika input kosong dan tampilkan pesan error.

11. Local Storage & Session Storage

Dasar penting untuk membuat web “ingat” data tanpa server.

  • localStorage.setItem(), getItem(), removeItem().

  • sessionStorage perbedaan dengan localStorage.

🎯 Latihan:

  • Buat todo list sederhana yang tersimpan di localStorage.

12. Mini Project:

  • Kalkulator web.

  • Todo list dengan penyimpanan localStorage.

  • Fetch API data dan tampilkan di card HTML (misal: daftar pengguna, cuaca, dsb).

🚀 LEVEL 3 – TRANSISI KE MEDIUM / PRA-LANJUT

Tujuan: berpikir seperti developer JS modern dan siap belajar framework.

13. Event Delegation & DOM Traversal

  • Konsep bubbling dan capturing.

  • Cara menangani event banyak elemen tanpa ribet.

14. Modularisasi Kode

  • Struktur folder yang rapi untuk project JS.

  • Pisahkan fungsi ke file terpisah dan gunakan module system.

15. OOP di JavaScript

  • class, constructor, inheritance, super().

  • Object literal vs class-based.

🎯 Latihan:

  • Buat class User dengan properti name dan method greet().

16. Data Fetching yang Lebih Nyata

  • Fetch API + tampilkan hasil ke UI.

  • Penanganan loading & error.

🎯 Mini project:

  • Aplikasi pencarian gambar dari Unsplash API.

  • Aplikasi cuaca berdasarkan kota.

17. Persiapan Menuju Level Lanjut

Setelah tahap ini kamu sudah bisa:

  • Bikin web interaktif sepenuhnya pakai Vanilla JS.

  • Paham struktur data & logika JS.

  • Siap belajar framework (React, Vue, atau Svelte).

Bagus Rian Kusuma
Bagus Rian Kusuma The Coding Journey : Mengukir Masa Depan Lewat Baris Kode

Post a Comment