Infografis: 5 tahap belajar berurutan

Ikuti alur dari atas ke bawah. Tiap tahap membuka prasyarat untuk tahap berikutnya.

Mengapa urutan ini penting?

JavaScript adalah fondasi interaksi web; pemahaman variabel dan fungsi membantu saat membaca input form. DOM dan event kemudian menjelaskan cara browser menanggapi tindakan pengguna. Setelah itu barulah sintaks jQuery menjadi lebih mudah dimengerti—sebagai library yang menyederhanakan sejumlah operasi DOM, bukan pengganti pemahaman JavaScript.

Panduan praktik tiap tahap

Latihan pertama: JavaScript mengubah halaman HTML

Mulai dengan contoh pendek berikut. Simpan sebagai index.html, buka di browser, lalu klik tombol.

<!DOCTYPE html>
<html lang="id">
<body>
  <h1 id="pesan">Halo!</h1>
  <button id="ubah">Klik saya</button>
  <script>
    const tombol = document.getElementById("ubah");
    tombol.addEventListener("click", () => {
      document.getElementById("pesan").textContent = "Saya belajar JavaScript!";
    });
  </script>
</body>
</html>

Tantangan: ganti pesan, tambahkan tombol kedua, dan jelaskan apa fungsi getElementById serta addEventListener.

Rangkuman materi

Cara memakai roadmap ini di OdooCamp

Baca materi secara berurutan, coba kode sendiri, lalu kerjakan Knowledge Check, Quiz, Coding Exercise, dan Assessment yang disediakan dalam Course Desain Web. Jika hasilnya belum dipahami, ulangi tahap tersebut sebelum lanjut.

Catatan: PDF pembelajaran bukan tautan unduhan publik otomatis. Pengajar perlu menautkannya pada Lesson di LMS. Link course dan quiz juga perlu diisi setelah halaman resminya diverifikasi.