Front End Masterclass · Semester 1

JS

</>

{ }

( )

=>

；

BAB 9 — JavaScript Dasar

Pertama kalinya kamu memberi perintah hidup kepada halaman web. Dari HTML & CSS yang diam — kini menuju web yang berpikir & bergerak.

Kelas: 10 SMA Mapel: Informatika / RPL Durasi: ± 2 JP

Gunakan → ← atau tombol di bawah untuk navigasi

Slide 02

🎯 Tujuan Pembelajaran

Setelah menyelesaikan bab ini, kamu akan mampu:

1
Memahami peran JavaScript
Tahu apa itu JS dan posisinya bersama HTML & CSS.
2
Menyimpan data dengan variabel & tipe data
String, Number, Boolean, dan Array.
3
Mengolah data dengan operator
Aritmatika, perbandingan, dan logika.
4
Membuat keputusan & perulangan
If–Else, Switch, For, dan While.
5
Membungkus logika dalam Function
Membuat & memanggil fungsi dengan parameter dan return.
6
Membangun Mini Project
Aplikasi Nilai Siswa: input nilai → hitung rata-rata → tampilkan grade.

💡 Cara belajar di modul ini: setiap konsep selalu kamu temui dalam urutan Konsep → Analogi nyata → Penjelasan → Kode → Demo langsung yang bisa kamu jalankan sendiri.

Slide 03 · Konsep

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi interaktif & hidup — bisa merespons klik, menghitung, mengubah isi halaman, dan mengambil keputusan.

🚗 Analogi: Membangun Mobil

HTML = rangka & bodi mobil (struktur). CSS = cat, velg, interior (tampilan). JavaScript = mesin & sistem kontrol — yang membuat mobil benar-benar bergerak & merespons saat kamu menyetir.

Posisi JS di sebuah web

🧱

HTML

Struktur & isi konten

🎨

CSS

Gaya & tampilan

⚡

JavaScript

Perilaku & interaksi

🌐 JavaScript berjalan langsung di dalam browser (Chrome, Edge). Tidak perlu install apa pun — browser sudah punya "mesin" untuk menjalankannya.

Slide 04 · Konsep + Demo

✍️ Syntax Dasar

Syntax = "aturan tata bahasa" agar perintahmu dimengerti komputer.

Aturan penting

• Setiap perintah idealnya diakhiri titik koma ;

• Komentar pakai // (1 baris) — diabaikan komputer.

• JavaScript case-sensitive: nama ≠ Nama.

• console.log() = perintah untuk menampilkan sesuatu.

Analogi 📣

Anggap console.log() seperti pengeras suara di sekolah: apa pun yang kamu masukkan, akan "diumumkan" keluar agar terlihat.

// perintah pertamamu
console.log("Halo, dunia! 👋");
console.log("Aku sedang belajar JavaScript");

Output akan muncul di sini…

Slide 05 · Konsep + Animasi + Demo

📦 Variable (let)

KonsepAnalogiPenjelasanKodeDemo

Variabel adalah wadah berlabel untuk menyimpan data agar bisa dipakai lagi nanti.

🏷️ Analogi: Kotak Berlabel

Bayangkan kotak penyimpanan yang diberi nama (label). Kamu masukkan barang ke dalamnya, lalu cukup sebut namanya untuk mengambil isinya.

nama"Sahil"

⇐

umur15

3 kata kunci (fokus ke let)

let

Bisa diubah isinya. Pakai ini.

const

Nilai tetap, tidak bisa diubah.

var

Gaya lama, sebaiknya dihindari.

let nama = "Sahil";
let umur = 15;
umur = 16;            // boleh diubah karena pakai let
console.log(nama, "berumur", umur, "tahun");

Output akan muncul di sini…

Slide 06 · Tipe Data

🔤 Tipe Data: String

String = data berupa teks. Selalu dibungkus tanda kutip "…" atau '…'.

✉️ Analogi: Kalimat di dalam Surat

String itu seperti tulisan dalam surat — kumpulan huruf, spasi, dan tanda baca. Bisa "disambung" (digabung) jadi kalimat utuh.

Menggabung teks

Gunakan + untuk menyambung, atau template literal dengan backtick `…${ }`.

let depan = "Muhammad";
let belakang = "Sahil";
let penuh = depan + " " + belakang;
console.log("Nama lengkap: " + penuh);
console.log(`Halo, ${penuh}! Panjang nama: ${penuh.length} huruf`);

Output akan muncul di sini…

Slide 07 · Tipe Data

🔢 Tipe Data: Number

Number = data berupa angka (bulat maupun desimal). Tanpa tanda kutip.

🧮 Analogi: Angka di Kalkulator / Rapor

Number bisa langsung dihitung — ditambah, dikurang, dikali, dibagi — persis seperti angka di kalkulator atau nilai di rapor.

let mtk = 85;
let ipa = 90;
let bindo = 78;
let total = mtk + ipa + bindo;
let rata = total / 3;
console.log("Total nilai:", total);
console.log("Rata-rata:", rata.toFixed(2));

Output akan muncul di sini…

⚠️ Hati-hati: "5" + 5 hasilnya "55" (teks!), tapi 5 + 5 hasilnya 10. Tanda kutip mengubah segalanya.

Slide 08 · Tipe Data + Animasi

💡 Tipe Data: Boolean

Boolean hanya punya dua kemungkinan: true (benar) atau false (salah).

🔌 Analogi: Saklar Lampu Kamar

Lampu hanya bisa nyala (true) atau mati (false). Tidak ada "setengah nyala". Boolean dipakai komputer untuk mengambil keputusan.

true · NYALA

false · MATI

let sudahMengerjakanPR = true;
let sedangHujan = false;
let nilai = 80;
let lulus = nilai >= 75;   // hasil perbandingan = boolean
console.log("Sudah PR?", sudahMengerjakanPR);
console.log("Lulus KKM?", lulus);

Output akan muncul di sini…

Slide 09 · Tipe Data + Animasi

🗄️ Tipe Data: Array

Array = satu wadah berisi banyak data sekaligus, tersusun rapi dan bernomor.

🔢 Analogi: Rak Loker Bernomor

Bayangkan deretan loker di sekolah. Setiap loker punya nomor (index) yang dimulai dari 0. Untuk ambil isi, sebut nomornya: loker[0].

[0]"Sahil"

[1]"Rifqi"

[2]"Fahmi"

[3]"Aira"

let siswa = ["Sahil", "Rifqi", "Fahmi", "Aira"];
console.log("Loker ke-0:", siswa[0]);
console.log("Jumlah siswa:", siswa.length);
siswa.push("Bima");            // tambah data baru
console.log("Setelah ditambah:", siswa);

Output akan muncul di sini…

Slide 10 · Konsep + Demo Interaktif

➗ Operator

Operator = simbol untuk mengolah data. Ada 3 kelompok utama.

Aritmatika

+ - * / % (sisa bagi)

Perbandingan

> < >= <= === !== → hasil boolean

Logika

&& (dan) || (atau) ! (tidak)

🧮 Analogi: Mesin Hitung

Operator adalah tombol-tombol pada mesin hitung. Kamu masukkan dua angka, pilih tombol operasi, lalu mesin mengeluarkan hasilnya.

Kalkulator Mini — coba sendiri

Angka A Angka B

Masukkan dua angka lalu klik Hitung…

Slide 11 · Logika + Flowchart

🔀 If–Else

If–Else membuat program mengambil keputusan: "JIKA kondisi benar, lakukan A; JIKA TIDAK, lakukan B".

🛣️ Analogi: Persimpangan Jalan

Di persimpangan kamu memeriksa kondisi: "Apakah lampu hijau?" — JIKA ya, jalan terus; JIKA tidak, berhenti. Komputer memilih jalur berdasarkan kondisi.

let nilai = 82;
if (nilai >= 75) {
  console.log("Selamat, kamu LULUS! 🎉");
} else {
  console.log("Belum lulus, ikuti REMEDIAL.");
}

Output akan muncul di sini…

Slide 12 · Logika + Flowchart

🍽️ Switch–Case

Switch dipakai saat ada banyak pilihan tetap dari satu nilai — lebih rapi dibanding if bertingkat.

📋 Analogi: Memesan Menu di Kantin

Kamu sebut satu kode menu, dan dapur menyiapkan tepat menu itu. Setiap case = satu menu. default = "menu tidak tersedia".

let hari = 3;
switch (hari) {
  case 1: console.log("Senin — Upacara"); break;
  case 2: console.log("Selasa — Olahraga"); break;
  case 3: console.log("Rabu — Praktikum"); break;
  default: console.log("Hari tidak dikenali");
}

Output akan muncul di sini…

🔑 Jangan lupa break; di tiap case, agar program berhenti setelah menemukan pilihan yang cocok.

Slide 13 · Perulangan + Animasi + Flowchart

🔁 For Loop

For loop mengulang perintah dengan jumlah yang sudah diketahui.

🙋 Analogi: Guru Mengabsen Siswa 1–10

Guru memanggil nomor 1, 2, 3, … sampai 10 — perbuatan yang sama diulang, hanya nomornya bertambah. Itulah cara kerja for loop.

🚶

12345

3 bagian for

let i = 1 → mulai dari mana

i <= 10 → ulang selama benar

i++ → naik 1 tiap putaran

for (let i = 1; i <= 5; i++) {
  console.log("Absen nomor " + i);
}
console.log("Selesai mengabsen ✅");

Output akan muncul di sini…

Slide 14 · Perulangan + Animasi

⏳ While Loop

While loop mengulang selama kondisi masih benar — dipakai saat jumlah ulangan belum pasti.

💊 Analogi: Minum Obat Sampai Sembuh

"SELAMA masih sakit → minum obat." Kamu tidak tahu pasti berapa hari, yang penting diulang sampai kondisinya berubah jadi sembuh.

🤒

sakit = true

→

😊

sembuh!

let hari = 1;
let sembuh = false;
while (sembuh === false) {
  console.log("Hari " + hari + ": minum obat 💊");
  if (hari >= 3) sembuh = true;  // kondisi berubah
  hari++;
}
console.log("Alhamdulillah, sembuh! 😊");

Output akan muncul di sini…

🚨 Wajib ada hal yang mengubah kondisi (di sini hari++ & sembuh). Tanpa itu loop berputar selamanya (infinite loop)!

Slide 15 · Function + Animasi Mesin + Flowchart

⚙️ Function

Function = mesin pengolah yang bisa dipakai berulang: beri input (parameter), proses, lalu keluarkan hasil (return).

☕ Analogi: Mesin Kopi Pabrik

Masukkan biji kopi (input) → mesin memproses → keluar secangkir kopi (output). Mesin yang sama bisa dipakai berkali-kali untuk biji yang berbeda.

🫘 →

FUNCTION

→ ☕

// deklarasi: bikin "mesin" bernama luasPersegi
function luasPersegi(sisi) {     // sisi = parameter (input)
  let hasil = sisi * sisi;
  return hasil;             // keluarkan output
}

// pemanggilan: pakai mesinnya
console.log("Luas sisi 4:", luasPersegi(4));
console.log("Luas sisi 7:", luasPersegi(7));

Output akan muncul di sini…

Slide 16 · Mini Project

🏆 Mini Project: Aplikasi Nilai Siswa

Gabungkan semua yang sudah dipelajari: variabel, array, operator, perulangan, if-else, dan function!

Alur Program

1️⃣ Input beberapa nilai (Array)

2️⃣ Jumlahkan semua nilai (For Loop)

3️⃣ Hitung rata-rata (Operator)

4️⃣ Tentukan grade (If-Else)

5️⃣ Tampilkan hasil (Function + console)

Aturan Grade

≥ 90 → A (Sangat Baik)

≥ 80 → B (Baik)

≥ 75 → C (Cukup / Lulus KKM)

< 75 → D (Remedial)

Coba Langsung — masukkan nilaimu

Nilai (pisah koma)

Contoh: 85, 90, 78, 95 → klik Proses Nilai…

Slide 17 · Mini Project · Pembedahan Kode

🔍 Kode Lengkap Langkah-per-Langkah

Inilah otak dari aplikasi di slide sebelumnya. Baca komentarnya — lalu jalankan!

// 1) Data nilai disimpan dalam Array
let nilai = [85, 90, 78, 95];

// 2) Function menghitung rata-rata pakai For Loop
function hitungRata(data) {
  let total = 0;
  for (let i = 0; i < data.length; i++) {
    total = total + data[i];   // jumlahkan tiap loker
  }
  return total / data.length;  // kembalikan rata-rata
}

// 3) Function menentukan grade pakai If-Else
function tentukanGrade(rata) {
  if (rata >= 90) return "A (Sangat Baik)";
  else if (rata >= 80) return "B (Baik)";
  else if (rata >= 75) return "C (Cukup)";
  else return "D (Remedial)";
}

// 4) Jalankan & tampilkan hasil
let rata = hitungRata(nilai);
console.log("Nilai:", nilai);
console.log("Rata-rata:", rata.toFixed(2));
console.log("Grade:", tentukanGrade(rata));

Output akan muncul di sini…

🎓 Perhatikan: program besar = gabungan dari konsep-konsep kecil yang sudah kamu kuasai. Itulah inti pemrograman!

Slide 18 · Latihan

📝 Latihan 1 — Variabel & Operator

Tingkat⭐ Mudah TopikVariabel, Number, String Waktu± 15 menit

Soal

Buat program yang menyimpan nama, panjang, dan lebar sebuah taman dalam variabel. Lalu hitung dan tampilkan luas (panjang × lebar) dan keliling (2 × (panjang + lebar)) taman tersebut dengan kalimat yang rapi.

Contoh output yang diharapkan

Taman Melati → Luas: 50 m², Keliling: 30 m

Tulis & uji jawabanmu

Output jawabanmu muncul di sini…

Slide 19 · Latihan

📝 Latihan 2 — Logika & Perulangan

Tingkat⭐⭐ Sedang TopikFor Loop + If-Else Waktu± 20 menit

Soal

Gunakan for loop untuk menampilkan angka 1 sampai 20. Untuk setiap angka:

• Jika angka genap → tampilkan "... GENAP"

• Jika angka ganjil → tampilkan "... GANJIL"

💡 Petunjuk: gunakan operator sisa bagi %. Angka genap → angka % 2 === 0.

Tulis & uji jawabanmu

Output jawabanmu muncul di sini…

Slide 20 · Tugas Akhir

🎓 Tugas Akhir Bab 9

Tingkat⭐⭐⭐ Menantang TopikFunction + Array + Loop + If Deadline1 minggu (15 Juni 2026) PengumpulanFile .js / screenshot

Soal — Aplikasi Konversi Nilai Kelas

Buat sebuah function bernama olahKelas(daftarNilai) yang menerima sebuah array nilai satu kelas, lalu:

1. Menghitung rata-rata kelas (pakai loop).

2. Mencari nilai tertinggi dan terendah.

3. Menghitung berapa siswa yang LULUS (nilai ≥ 75).

4. Menampilkan ringkasan rapi memakai console.log.

Kriteria Penilaian

Program berjalan tanpa error (25%)
Penggunaan function dengan parameter & return yang benar (25%)
Logika perhitungan tepat: rata-rata, max, min, jumlah lulus (30%)
Kode rapi, ada komentar, output jelas & mudah dibaca (20%)

Eksperimen di sini sebelum dikumpulkan

Output jawabanmu muncul di sini…

🌟 Selamat! Kamu telah menyelesaikan Bab 9 — fondasi JavaScript. Teruslah berlatih, karena programmer hebat lahir dari ribuan baris kode percobaan. Semangat! 🚀

BAB 9 — JavaScript Dasar

🎯 Tujuan Pembelajaran

Memahami peran JavaScript

Menyimpan data dengan variabel & tipe data

Mengolah data dengan operator

Membuat keputusan & perulangan

Membungkus logika dalam Function

Membangun Mini Project

Apa itu JavaScript?

🚗 Analogi: Membangun Mobil

HTML

CSS

JavaScript

✍️ Syntax Dasar

📦 Variable (let)

🏷️ Analogi: Kotak Berlabel

let

const

var

🔤 Tipe Data: String

✉️ Analogi: Kalimat di dalam Surat

🔢 Tipe Data: Number

🧮 Analogi: Angka di Kalkulator / Rapor

💡 Tipe Data: Boolean

🔌 Analogi: Saklar Lampu Kamar

🗄️ Tipe Data: Array

🔢 Analogi: Rak Loker Bernomor

➗ Operator

Aritmatika

Perbandingan

Logika

🧮 Analogi: Mesin Hitung

🔀 If–Else

🛣️ Analogi: Persimpangan Jalan

🍽️ Switch–Case

📋 Analogi: Memesan Menu di Kantin

🔁 For Loop

🙋 Analogi: Guru Mengabsen Siswa 1–10

⏳ While Loop

💊 Analogi: Minum Obat Sampai Sembuh

⚙️ Function

☕ Analogi: Mesin Kopi Pabrik

🏆 Mini Project: Aplikasi Nilai Siswa

🔍 Kode Lengkap Langkah-per-Langkah

📝 Latihan 1 — Variabel & Operator

📝 Latihan 2 — Logika & Perulangan

🎓 Tugas Akhir Bab 9