Roadmap Belajar JavaScript Kelas 10


Roadmap Belajar JavaScript – Kelas 10

Panduan Umum Pengerjaan & Pengumpulan

1. Aplikasi yang dipakai

  • Di lab / laptop:
    gunakan Visual Studio Code atau text editor lain, dan jalankan
    index.html di browser (Chrome/Firefox).
  • Di rumah / online:
    boleh menggunakan Replit atau CodePen untuk menulis HTML + JavaScript.

2. Struktur folder & file per lesson

  • Buat 1 folder per lesson, contoh: lesson01_NamaKamu, lesson02_NamaKamu, dan seterusnya.
  • Di dalam folder, minimal ada:
    • index.html – file HTML utama.
    • script.js – tempat menulis kode JavaScript.
    • style.css – opsional, kalau ingin menata tampilan.
  • Pastikan di index.html ada baris:

    <script src="script.js"></script>

3. Cara kirim tugas via Google Chat

  • Jika pakai file di komputer:

    • Kompres folder menjadi .zip, contoh: lesson01_NamaKamu.zip.
    • Buka Google Chat, pilih ruang/DM dengan guru, klik ikon Upload file, pilih file .zip, lalu kirim.
  • Jika pakai Replit / CodePen:

    • Copy link project.
    • Kirim link di Google Chat dengan format pesan:

      Lesson X – [judul] – [Nama Lengkap]

4. Aturan belajar

  • Kerjakan lesson berurutan dari 1 sampai 10.
  • Tonton / baca materi di setiap lesson, lalu selesaikan Challenge-nya.
  • Coba selesaikan sendiri dulu sebelum bertanya ke teman / guru.

Di bawah ini daftar lesson. Untuk setiap lesson, baca materi, lalu kerjakan challenge yang ada.

Lesson 1 – Pengenalan & Menjalankan JavaScript

Dasar

Kenalan dengan JavaScript dan cara menjalankannya di browser.

Challenge:
  • Buat folder lesson01_NamaKamu dengan file index.html dan script.js.
  • Di index.html, tampilkan teks “Belajar JavaScript Kelas 10”.
  • Di script.js, tulis console.log() untuk menampilkan perkenalan diri (nama, kelas, hobi).
  • Tambahkan satu alert() yang menyapa pengguna ketika halaman dibuka.

Lesson 2 – Variabel, Tipe Data, Operator

Dasar

Belajar menyimpan data di variabel dan melakukan operasi dasar.

Challenge:
  • Buat folder lesson02_NamaKamu dengan index.html dan script.js.
  • Buat 3 variabel: nama (string), umur (number), dan sedangBelajar (boolean).
  • Tampilkan kalimat di console, contoh: “Nama saya …, umur …, sekarang saya sedang belajar JavaScript: true/false”.
  • Buat dua variabel angka dan hitung penjumlahan, pengurangan, perkalian, dan pembagian. Tampilkan tiap hasil di console dengan kalimat yang jelas.

Lesson 3 – Percabangan (if / else / switch)

Logika

Mengambil keputusan dengan if/else dan switch.

Challenge:
  • Buat folder lesson03_NamaKamu dengan index.html dan script.js.
  • Buat variabel nilai (0–100). Gunakan if / else if / else untuk menentukan grade A–E dan tampilkan di console.
  • Tambahkan logika: jika grade A–C tulis “LULUS”, kalau D–E tulis “REMEDIAL”.
  • Coba versi lain dengan switch (boleh kategori: “Sangat Baik”, “Baik”, “Cukup”, “Kurang”).

Lesson 4 – Perulangan (for, while)

Logika

Mengulang perintah dengan for, while, dan do…while.

Challenge:
  • Buat folder lesson04_NamaKamu dengan index.html dan script.js.
  • Tampilkan bilangan 1 sampai 50 dengan for. Tambahkan teks “- genap” atau “- ganjil” di belakang tiap angka.
  • Pakai while untuk menghitung jumlah bilangan genap dari 1 sampai 100.
  • Coba gunakan break untuk menghentikan loop ketika mencapai angka tertentu (misal 73).

Lesson 5 – Array Dasar

Struktur Data

Menyimpan banyak data dalam satu variabel dengan array.

Challenge:
  • Buat folder lesson05_NamaKamu dengan index.html dan script.js.
  • Buat array berisi minimal 5 nama teman sekelas.
  • Tampilkan jumlah teman (panjang array) dan nama teman pertama dan terakhir.
  • Loop array dengan for dan tampilkan “Teman ke-X: <nama>”.
  • Gunakan push() untuk menambah satu nama baru, lalu tampilkan array lagi.

Lesson 6 – Fungsi (Function)

Fundamental

Membuat fungsi untuk mengorganisir dan mengulang kode.

Challenge:
  • Buat folder lesson06_NamaKamu dengan index.html dan script.js.
  • Buat fungsi luasPersegiPanjang(panjang, lebar) yang mengembalikan luas.
  • Panggil fungsi tersebut minimal 3 kali dengan nilai berbeda dan tampilkan hasil di console.
  • Buat fungsi konversiCelciusKeFahrenheit(c) dan uji dengan beberapa nilai (misal 0, 25, 100).

Lesson 7 – Object Dasar

Struktur Data

Mengelompokkan data dan perilaku dengan object.

Challenge:
  • Buat folder lesson07_NamaKamu dengan index.html dan script.js.
  • Buat object siswa dengan properti: nama, kelas, umur.
  • Tambahkan method perkenalan() yang menampilkan perkenalan di console.
  • Buat array berisi beberapa object siswa dan loop untuk memanggil perkenalan() masing-masing.

Lesson 8 – DOM Dasar (Manipulasi HTML)

Web

Belajar bagaimana JavaScript berinteraksi dengan HTML melalui DOM.

Challenge:
  • Buat folder lesson08_NamaKamu dengan index.html, script.js (dan style.css jika perlu).
  • Buat halaman dengan satu input teks untuk nama, satu tombol “Sapa”, dan satu paragraf kosong.
  • Gunakan JavaScript untuk mengambil nilai input saat tombol diklik dan tampilkan “Halo, <nama>!” di paragraf.
  • Tambahkan fitur: jika input kosong dan tombol diklik, tampilkan pesan error (misal “Nama belum diisi”).

Lesson 9 – Proyek Mini: To-Do List

Proyek

Menggabungkan HTML, DOM, array, dan event untuk membuat aplikasi to-do list sederhana.

  • Video: Belajar JavaScript Dasar – Full Lengkap (ada banyak contoh)
    (
    Tonton di YouTube
    ) [web:9]
Challenge:
  • Buat folder lesson09_NamaKamu dengan index.html, script.js, (style.css opsional).
  • Buat input teks dan tombol “Tambah Tugas”, serta elemen <ul> untuk daftar tugas.
  • Saat tombol diklik, isi input ditambahkan sebagai item baru di dalam <ul>.
  • Tambahkan tombol “Hapus” di setiap item untuk menghapus tugas dari daftar.

Lesson 10 – Algoritma Dasar di JavaScript

Logika

Latihan logika: mencari nilai maksimum, minimum, rata-rata dari array.

Challenge:
  • Buat folder lesson10_NamaKamu dengan index.html dan script.js.
  • Buat array berisi beberapa angka (misal 10 nilai ujian).
  • Tulis fungsi untuk mencari nilai maksimum, fungsi lain untuk minimum, dan satu fungsi lagi untuk rata-rata.
  • Tampilkan hasil perhitungan di console. Coba ganti isi array dan pastikan fungsi masih bekerja.

Catatan: kerjakan challenge tanpa melihat jawaban dulu. Diskusikan dengan teman atau tanya guru jika mengalami kesulitan.