MATERI: 11 - 15

LES PRIVATE ONLINE

PROGRAMMING
JAVASCRIPT LEVEL BASIC
 1

BAB 11 - INPUT & OUTPUT (CLI + PROMPT)

Mengambil dan menampilkan data di JavaScript (Browser & CLI)

11.1.​ Tujuan Pembelajaran

●​ Memahami konsep input dan output.
●​ Menampilkan data dengan console.log() dan alert().

●​ Mengambil data dengan prompt() (Browser) dan readline (CLI).

●​ Menggabungkan input–output dengan array, object, percabangan,
dan looping.

11.2.​ Konsep Dasar

●​ Output: Menyampaikan informasi ke user.
●​ Input: Menerima data dari user.
●​ Analogi:
○​ Kita bicara → Output
○​ Kita mendengar jawaban → Input

11.3.​ Output di JavaScript

●​ Console
console.log("Halo, dunia!");
●​ Alert (Browser)
alert("Selamat datang!");

11.4.​ Input di Browser

let nama = prompt("Masukkan nama Anda:");
alert(`Halo, ${nama}!`);

prompt() → meminta user mengetik sesuatu.

${nama} → menyisipkan variabel di dalam string (template literal).
 2

11.5.​ Input di CLI (Node.js)

const readline = require('readline');
const rl = readline.createInterface({input: process.stdin,
output: process.stdout});

rl.question("Masukkan nama Anda: ", function(nama) {

console.log(`Halo, ${nama}!`);
rl.close();
});

readline → modul bawaan Node.js.

rl.question() → ajukan pertanyaan dan tangkap jawaban.

11.6.​ Contoh: Menambah ke Array

let daftarNama = ["Engkos", "Ajat"];
let namaBaru = prompt("Masukkan nama baru:");
daftarNama.push(namaBaru);

for (let i = 0; i < daftarNama.length; i++) {

console.log(`${i + 1}. ${daftarNama[i]}`);
}
Review: Array, .push(), looping for.

11.7.​ Contoh: Update Object

let siswa = { nama: "Cecep", usia: 17, minat: "Coding" };
let minatBaru = prompt("Masukkan minat baru:");
siswa.minat = minatBaru;

for (let key in siswa) {

console.log(`${key}: ${siswa[key]}`);
}

Review: Object, update properti, looping for...in.

 3

11.8.​ Contoh: Percabangan

let skor = Number(prompt("Masukkan skor ujian:"));
if (skor >= 75) {
alert("Lulus!");
} else {
alert("Tidak Lulus!");
}

Review: Casting, if–else.

11.9.​ Eksperimen Mini

Pendaftaran Kelas Coding
1.​ let peserta = [];
2.​ let nama = prompt("Masukkan nama:");
3.​ let usia = Number(prompt("Masukkan usia:"));
4.​ let minat = prompt("Masukkan minat:");
5.​
6.​ peserta.push({ nama: nama, usia: usia, minat: minat });
7.​
8.​ for (let i = 0; i < peserta.length; i++) {
9.​ console.log(`${peserta[i].nama} (${peserta[i].usia}) - Minat:
${peserta[i].minat}`);
10.​}

11.10.​ Tantangan Praktik Mandiri

Tema
Toko kelontong milik Pak Solihin ingin membuat sistem pencatatan belanja
sederhana berbasis CLI. Saat ada pembeli, kasir akan memasukkan nama barang,
harga satuan, dan jumlah barang, lalu sistem menghitung total harga dan
menampilkannya.

Instruksi
1.​ Buat array kosong bernama belanjaan.
 4

2.​ Minta user memasukkan nama barang, harga, dan jumlah.

3.​ Simpan data sebagai object di dalam array.
4.​ Gunakan looping untuk menampilkan semua daftar belanja.
5.​ Hitung total harga semua barang.
6.​ Gunakan materi sebelumnya:
●​ Array & Object
●​ Percabangan jika harga total di atas Rp 100.000 beri pesan "Belanja
besar!"
●​ Looping untuk menampilkan data
🎯 Output di Console Browser:
📋 Daftar Belanja:
Beras - 2 x Rp50000 = Rp100000
Gula - 1 x Rp20000 = Rp20000
Total Belanja: Rp120000
💡 Belanja besar!

🎯 Output di CLI:
Masukkan nama barang: Beras
Masukkan harga barang: 50000
Masukkan jumlah barang: 2
Tambah barang lagi? (y/n): y
Masukkan nama barang: Gula
Masukkan harga barang: 20000
Masukkan jumlah barang: 1
Tambah barang lagi? (y/n): n
📋 Daftar Belanja:
Beras - 2 x Rp50000 = Rp100000
Gula - 1 x Rp20000 = Rp20000
Total Belanja: Rp120000
💡 Belanja besar!
 5

📊 Kuis Mini
Pilih jawaban yang benar!

1.​ Fungsi console.log() digunakan untuk:​

a. Mengambil input user​
b. Menampilkan data di console​
c. Menghentikan program​

2.​ Fungsi prompt() hanya dapat digunakan di:​

a. Node.js​
b. Browser​
c. Semua platform​

3.​ Pada readline, method untuk menutup input adalah:​

a. stop()​

b. end()​

c. close()​

4.​ Output adalah:​

a. Data yang dimasukkan user​
b. Data yang ditampilkan ke user​
c. Data dihapus​

5.​ Input di CLI menggunakan modul:​

a. http​

b. readline​

c. console​

6.​ Dalam program belanja, belanjaan.push() berfungsi untuk:​

a. Menghapus data​
b. Menambah data ke array​
 6

c. Mengurutkan array​

7.​ Number(prompt("...")) digunakan untuk:​

a. Mengubah input string menjadi angka​
b. Menghapus input​
c. Mengulang input​

8.​ Perulangan yang digunakan untuk mengakses array dengan indeks adalah:​
a. for​

b. if​

c. while​

9.​ Kondisi if (totalAkhir > 100000) artinya:​

a. Total belanja sama dengan 100000​
b. Total belanja lebih dari 100000​
c. Total belanja kurang dari 100000​

10.​Output " 💡 Belanja besar!" muncul jika:​

a. Total belanja <= 100000​
b. Total belanja > 100000​
c. Tidak ada barang dibeli
 7

BAB 12- FUNGSI DI JAVASCRIPT

Memahami konsep fungsi, parameter, return value, berbagai bentuk fungsi, dan
scope.

12.1.​ Tujuan Pembelajaran

●​ Memahami konsep fungsi di JavaScript.
●​ Menggunakan parameter & return value.
●​ Menulis fungsi: declaration, expression, arrow function.
●​ Memahami scope variabel.
●​ Membuat mini project sederhana berbasis fungsi.

12.2.​ Konsep Fungsi

●​ Fungsi = blok kode untuk tugas tertentu.
●​ Analogi: Mesin kopi – input (air, biji kopi) → proses → output (kopi).
●​ Kelebihan fungsi:
■​ Hindari pengulangan kode.
■​ Rapi & terstruktur.
📌 Contoh:
function sapa() {
console.log("Halo, selamat datang!");
}
sapa();

12.3.​ Parameter & Return Value

●​ Parameter: nilai yang dikirim ke fungsi.
●​ Return Value: nilai yang dikembalikan fungsi.
📌 Contoh:
function hitungLuasPersegi(sisi) {
return sisi * sisi;
}
console.log(hitungLuasPersegi(5)); // 25
 8

12.4.​ Function Expression

●​ Fungsi bisa disimpan di variabel.
📌 Contoh:
const kali = function(a, b) {
return a * b;
};
console.log(kali(3, 4)); // 12

12.5.​ Arrow Function

●​ Penulisan fungsi lebih singkat.
📌 Contoh:
const tambah = (a, b) => a + b;
console.log(tambah(5, 7)); // 12

12.6.​ Scope
●​ Global Scope: bisa diakses dari mana saja.
●​ Local Scope: hanya di dalam fungsi.
📌 Contoh:
let globalVar = "Ini global";

function contohScope() {
let localVar = "Ini lokal";
console.log(globalVar);
console.log(localVar);
}

12.7.​ Eksperimen Mini

Hitung Total Belanja
function hitungTotal(belanjaan) {
let total = 0;
for (let item of belanjaan) {
total += item.harga * item.jumlah;
}
return total;
}
 9

let daftarBelanja = [
{ nama: "Beras", harga: 50000, jumlah: 2 },
{ nama: "Gula", harga: 20000, jumlah: 1 }
];

console.log("Total belanja:", hitungTotal(daftarBelanja));

📌 Review: Array, Object, Looping.

12.8.​ Tantangan Mandiri
Tema: To-Do List Sederhana
Instruksi:
1.​ Buat array tugas kosong.

2.​ Fungsi tambahTugas(namaTugas).

3.​ Fungsi lihatTugas() menampilkan semua tugas.

4.​ Fungsi hapusTugas(index) menghapus tugas.

5.​ Gunakan prompt & console.log.

Output yang Diharapkan:

📋 Daftar Tugas:
1. Belajar JavaScript
2. Mengerjakan PR

12.9.​ Kuis Mini

Pilih jawaban yang benar!
1.​ Fungsi digunakan untuk:​
a. Menyimpan data saja​
b. Mengulang kode​
c. Menjalankan logika yang dapat digunakan kembali​

2.​ Parameter dalam fungsi adalah:​

a. Nilai yang dikembalikan fungsi​
b. Nilai yang dikirim ke fungsi​
c. Nilai default​
 10

3.​ Return value adalah:​

a. Nilai yang dikirim ke fungsi​
b. Nilai yang dikembalikan oleh fungsi​
c. Nilai sementara​

4.​ function expression disimpan dalam:​

a. Variabel​
b. Array​
c. Object​

5.​ Arrow function adalah:​

a. Penulisan fungsi versi singkat​
b. Fungsi tanpa parameter​
c. Fungsi untuk perhitungan saja​

6.​ Scope menentukan:​

a. Dimana variabel bisa diakses​
b. Tipe data variabel​
c. Jumlah parameter fungsi​

7.​ Dalam return sisi * sisi;, sisi adalah:​

a. Nilai tetap​
b. Parameter​
c. Variabel global​

8.​ Fungsi yang tidak memiliki return value akan mengembalikan:​

a. null​

b. undefined​

c. 0​

9.​ const tambah = (a, b) => a + b; adalah contoh:​

a. Function declaration​
b. Function expression​
 11

c. Arrow function​

10.​Variabel di dalam fungsi hanya dapat diakses:​

a. Di seluruh program​
b. Di dalam fungsi tersebut​
c. Di dalam file
 12

BAB 13- MODULARISASI KODE DENGAN

FUNGSI

Tujuan Pembelajaran
●​ Memahami pentingnya modularisasi kode
●​ Mengurangi pengulangan (DRY – Don’t Repeat Yourself)
●​ Menggunakan parameter & return antar fungsi
●​ Membuat kode lebih rapi, reusable, dan mudah dikelola

13.1.​ Apa Itu Modularisasi?

●​ Tanpa modularisasi → kode panjang, sulit dipahami
●​ Dengan modularisasi → kode dibagi jadi fungsi kecil
🔑 Analogi:​
Restoran → ada kasir, koki, pelayan → pekerjaan lebih cepat & jelas

13.2.​ Kenapa Modularisasi Itu Penting?

●​ Kurangi duplikasi kode
●​ Tingkatkan keterbacaan
●​ Debugging lebih mudah
●​ Gampang menambah fitur baru
●​ Contoh sederhana (tanpa modularisasi)
let harga1 = 5000, jumlah1 = 2;
let harga2 = 10000, jumlah2 = 1;
let total = (harga1 * jumlah1) + (harga2 * jumlah2);
console.log("Total belanja:", total);
Kode → langsung hitung (cepat, tapi tidak efisien kalau data banyak).

●​ Contoh dengan modularisasi

function hitungTotal(harga, jumlah) {
return harga * jumlah;
}
let total1 = hitungTotal(5000, 2);
 13

let total2 = hitungTotal(10000, 1);

console.log("Total belanja:", total1 + total2);
Kode → gunakan fungsi (lebih rapi, reusable, dan scalable).

13.3.​ Modularisasi dengan Parameter & Return

●​ Parameter → data yang masuk ke fungsi.
●​ Return → hasil yang keluar dari fungsi.
function sapa(nama) {
return `Halo, ${nama}! Selamat datang di kelas
coding.`;
}

console.log(sapa("Engkos"));
console.log(sapa("Cecep"));

13.4.​ Studi Kasus: Program Kasir Modular

function inputBarang(nama, harga, jumlah) {
return { nama: nama, harga: harga, jumlah: jumlah };
}

function hitungTotal(barang) {
return barang.harga * barang.jumlah;
}

function tampilkanStruk(belanjaan) {
let totalAkhir = 0;
console.log(" 📋 Daftar Belanja:");
for (let item of belanjaan) {
let subtotal = hitungTotal(item);
console.log(`${item.nama} - ${item.jumlah} x
Rp${item.harga} = Rp${subtotal}`);
totalAkhir += subtotal;
}
console.log("Total Belanja:", totalAkhir);
}

// Implementasi
let belanjaan = [];
belanjaan.push(inputBarang("Beras", 50000, 2));
 14

belanjaan.push(inputBarang("Gula", 20000, 1));

tampilkanStruk(belanjaan);

13.5.​ Eksperimen Mini: Pendaftaran Kelas Coding

dengan Modularisasi
Buat sistem pendaftaran sederhana:
1​ function tambahPeserta(nama, usia, minat) {
2​ return { nama, usia, minat };
3​ }
4​
5​ function tampilkanPeserta(peserta) {
6​ console.log(" 📋 Daftar Peserta:");
7​ for (let s of peserta) {
8​ console.log(`${s.nama} (${s.usia} th) - Minat:
${s.minat}`);
9​ }
10​}
11​
12​let peserta = [];
13​peserta.push(tambahPeserta("Ajat", 17, "Frontend"));
14​peserta.push(tambahPeserta("Cecep", 18, "Backend"));
15​peserta.push(tambahPeserta("Yana", 19, "UI/UX"));
16​
17​tampilkanPeserta(peserta);
18​

Output:
📋 Daftar Peserta:
Ajat (17 th) - Minat: Frontend
Cecep (18 th) - Minat: Backend
Yana (19 th) - Minat: UI/UX
 15

13.6.​ Tantangan Praktik Mandiri

Tema: Sistem Perpustakaan Mini
📌 Instruksi:
●​ Buat fungsi tambahBuku(judul, penulis, tahun)

●​ Buat fungsi tampilkanBuku(daftarBuku)

●​ Buat fungsi cariBuku(daftarBuku, judul)

●​ Jika ditemukan → tampilkan detail​
Jika tidak → tampilkan "Buku tidak ditemukan"

13.7.​ Kuis Mini

1.​ Modularisasi kode berarti:​
a. Membuat program jadi lebih besar​
b. Membagi program jadi bagian kecil​
c. Menghapus bagian kode​

2.​ Fungsi return digunakan untuk:​

a. Menyimpan data sementara​
b. Mengembalikan hasil dari fungsi​
c. Menghentikan looping​

3.​ Parameter dalam fungsi adalah:​

a. Hasil output​
b. Data yang dimasukkan ke fungsi​
c. Nama variabel global​

4.​ Prinsip DRY berarti:​

a. Don’t Repeat Yourself​
b. Do Repeat Yourself​
c. Don’t Run Yet​
 16

5.​ Dalam contoh kasir, fungsi hitungTotal() berguna untuk:​

a. Menambah barang baru​
b. Menghitung harga × jumlah​
c. Menghapus barang

13.8.​ Penutup
Hari ini kita sudah belajar:
●​ Apa itu modularisasi kode
●​ Manfaat membagi kode ke dalam fungsi kecil
 17

BAB 14- VALIDASI INPUT

14.1.​ Tujuan Pembelajaran

●​ Memahami apa itu validasi input dan kenapa penting.
●​ Mengecek input kosong dan tipe data.
●​ Menggunakan regex sederhana.
●​ Membuat form pendaftaran sederhana dengan validasi.

14.2.​ Konsep Dasar Validasi Input

●​ User bisa memasukkan data salah: kosong, huruf untuk angka, email
tidak valid.
●​ Tanpa validasi → program error atau data rusak.

Analogi:​
Validasi seperti petugas tiket di bioskop → hanya penonton dengan tiket
valid yang boleh masuk.

14.3.​ Validasi Input Dasar di JavaScript

1. Mengecek Input Kosong
let nama = prompt("Masukkan nama Anda:");

if (nama === "" || nama === null) {

alert("Nama tidak boleh kosong!");
} else {
alert(`Halo, ${nama}!`);
}​

2. Mengecek Tipe Data Angka

let usia = prompt("Masukkan usia Anda:");
usia = Number(usia);

if (isNaN(usia) || usia <= 0) {

alert("Usia harus berupa angka positif!");
 18

} else {
alert(`Usia Anda adalah ${usia} tahun`);
}

3. Validasi dengan Regex Sederhana

Contoh: Validasi alamat email.
let email = prompt("Masukkan email Anda:");
let polaEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!polaEmail.test(email)) {
alert("Email tidak valid!");
} else {
alert("Email valid 👍");
}

14.4.​ Studi Kasus: Form Pendaftaran Sederhana

Form Pendaftaran Sederhana
●​ Nama wajib diisi.
●​ Usia angka positif.
●​ Email valid.​

👉 Output: Pendaftaran berhasil! atau pesan error sesuai kesalahan.

14.5.​ Eksperimen Mini: Validasi Peserta Lomba Coding
Program meminta data peserta: nama, usia, dan bahasa pemrograman
yang dikuasai.​
Validasi:
●​ Nama tidak boleh kosong.
●​ Usia harus angka dan ≥ 15.
●​ Bahasa pemrograman tidak boleh kosong.
 19

Kode Program:
1.​ let peserta = {};
2.​
3.​ peserta.nama = prompt("Masukkan nama:");
4.​ peserta.usia = Number(prompt("Masukkan usia:"));
5.​ peserta.bahasa = prompt("Bahasa pemrograman yang
dikuasai:");
6.​
7.​ if (!peserta.nama) {
8.​ alert("Nama tidak boleh kosong!");
9.​ } else if (isNaN(peserta.usia) || peserta.usia < 15) {
10.​ alert("Usia minimal 15 tahun!");
11.​ } else if (!peserta.bahasa) {
12.​ alert("Bahasa pemrograman harus diisi!");
13.​ } else {
14.​ alert(`Data peserta valid:\nNama:
${peserta.nama}\nUsia: ${peserta.usia}\nBahasa:
${peserta.bahasa}`);
15.​ }

Output:
Data peserta valid:
Nama: Agus
Usia: 21
Bahasa: JavaScript
 20

14.6.​ Tantangan Praktik Mandiri

Tema: Validasi Registrasi Anggota Perpustakaan
Instruksi:
1.​ Buat form input dengan data: nama, usia, email, dan nomor HP.
2.​ Validasi:
○​ Nama wajib diisi.
○​ Usia harus angka ≥ 10.
○​ Email valid (regex).
○​ Nomor HP hanya angka dan panjang minimal 10 digit.
3.​ Jika semua valid → tampilkan data anggota. Jika ada yang salah →
tampilkan pesan error.
Output:​
Jika semua valid → tampilkan data anggota.​
Jika salah → tampilkan error sesuai kesalahan.
Solusi Browser:​
Input dengan prompt() output dengan alert()
Solusi CLI (Node.js):​
(Dengan readline, sama logikanya, hanya beda metode input–output.)

14.7.​ Kuis Mini

1.​ Validasi input bertujuan untuk:​
a. Mempercepat program​
b. Menjamin data benar sebelum diproses ​
c. Mengurangi ukuran file​

2.​ Operator isNaN() digunakan untuk:​

a. Mengecek string kosong​
b. Mengecek apakah nilai bukan angka ​
c. Mengecek panjang string​

3.​ Apa arti "" pada kondisi if (nama === ""):​

a. Null​
 21

b. String kosong ​
c. Undefined​

4.​ Regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/ digunakan untuk validasi:​

a. Nomor telepon​
b. Email ​
c. Password​

5.​ Jika user menekan Cancel pada prompt(), hasilnya adalah:​

a. null ​

b. undefined​

c. ""​

6.​ Validasi usia dengan if (usia <= 0) berarti:​

a. Usia boleh kosong​
b. Usia harus lebih besar dari 0 ​
c. Usia harus huruf​

7.​ Simbol ^ dan $ pada regex artinya:​

a. Menandai spasi​
b. Awal & akhir string​
c. Huruf vokal​

8.​ Untuk memastikan nomor HP hanya angka, bisa digunakan:​

a. isNaN() ​

b. typeof​

c. length​

9.​ Jika kondisi validasi tidak terpenuhi, biasanya program melakukan:​

a. Tampil pesan error ​
b. Tetap lanjut​
c. Berhenti total​
 22

10.​Validasi input penting karena:​

a. Membuat kode lebih cepat​
b. Mencegah error & data tidak valid ​
c. Menghemat memori

14.8.​ Penutup
Kita sudah belajar:
●​ Apa itu nested object
●​ Apa itu array of object
●​ Cara akses dan manipulasi data kompleks
●​ Eksperimen nyata menyimpan data produk toko
 23

BAB 15- DEBUGGING DASAR &

PENANGANAN ERROR + MINI PROJECT
FASE 3
Tujuan Pembelajaran
●​ Memahami apa itu debugging.
●​ Menggunakan console.log(), error message, dan breakpoint.
●​ Mengenal try…catch untuk penanganan error.
●​ Mampu menggabungkan input–output, fungsi, modularisasi, validasi,
debugging.
●​ Membuat Mini Project Fase 3: Sistem Pencatatan Kehadiran.

15.1.​ Apa Itu Debugging?

●​ Debugging adalah proses mencari dan memperbaiki kesalahan (bug)
dalam program.
●​ Bug bisa berupa: salah logika, salah ketik, atau input user yang tidak
valid.
●​ Tanpa debugging, kita sulit mengetahui kenapa program tidak
berjalan sesuai harapan.

15.2.​ Teknik Debugging Sederhana

●​ console.log() → cek isi variabel.
●​ Error Message → baca pesan error dari console.
●​ Breakpoint (DevTools / VS Code) → hentikan program di titik
tertentu.

15.3.​ Penanganan Error dengan try…catch

try {
let angka = Number(prompt("Masukkan angka:"));
if (isNaN(angka)) {
 24

throw "Input bukan angka!";

}
alert(`Angka valid: ${angka}`);
} catch (error) {
alert("Terjadi error: " + error);
}

●​ try → tempat kode utama dijalankan.

●​ throw → memunculkan error buatan.

●​ catch → menangkap error dan menanganinya tanpa menghentikan

program.

15.4.​ Studi Kasus: Validasi Usia dengan Error

Handling
function inputUsia() {
try {
let usia = Number(prompt("Masukkan usia:"));
if (isNaN(usia) || usia <= 0) {
throw "Usia tidak valid!";
}
alert(`Usia Anda: ${usia}`);
} catch (error) {
alert("Error: " + error);
}
}

inputUsia();

15.5.​ Eksperimen Mini

Registrasi Lomba Coding dengan Debugging
let peserta = [];

function daftarPeserta() {
try {
let nama = prompt("Masukkan nama:");
let usia = Number(prompt("Masukkan usia:"));
 25

let email = prompt("Masukkan email:");

let polaEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!nama) throw "Nama wajib diisi!";

if (isNaN(usia) || usia < 15) throw "Usia minimal 15
tahun!";
if (!polaEmail.test(email)) throw "Email tidak valid!";

peserta.push({ nama, usia, email });

alert("Pendaftaran berhasil!");
} catch (error) {
alert("Terjadi error: " + error);
}
}

daftarPeserta();
console.log(peserta);

15.6.​ Mini Project Fase 3

Tema: Sistem Pencatatan Kehadiran Kelas

📌 Kebutuhan:
1.​ User bisa menambahkan nama siswa yang hadir.
2.​ Nama tidak boleh kosong.
3.​ Jika nama duplikat → tampilkan error.
4.​ Bisa menampilkan daftar kehadiran.
5.​ Jika tidak ada siswa hadir → tampilkan pesan.
6.​ Program berjalan di Browser dan CLI.​
 26

💻 Implementasi (Browser)
let daftarHadir = [];

function tambahHadir() {
try {
let nama = prompt("Masukkan nama siswa:");
if (!nama) throw "Nama tidak boleh kosong!";
if (daftarHadir.includes(nama)) throw "Nama sudah ada dalam
daftar!";

daftarHadir.push(nama);
alert("Siswa ditambahkan!");
} catch (error) {
alert("Error: " + error);
}
}

function tampilkanHadir() {
if (daftarHadir.length === 0) {
alert("Belum ada siswa yang hadir.");
} else {
alert("Daftar Hadir:\n" + daftarHadir.join("\n"));
}
}

tambahHadir();
tampilkanHadir();
 27

💻 Implementasi (CLI – Node.js)

const readline = require("readline");
const rl = readline.createInterface({ input: process.stdin, output:
process.stdout });

let daftarHadir = [];

function tambahHadir() {
rl.question("Masukkan nama siswa: ", (nama) => {
try {
if (!nama) throw "Nama tidak boleh kosong!";
if (daftarHadir.includes(nama)) throw "Nama sudah ada!";

daftarHadir.push(nama);
✅ Siswa ditambahkan!");
console.log("
} catch (error) {
console.log("⚠️ Error:", error);
}
tampilkanHadir();
});
}

function tampilkanHadir() {
if (daftarHadir.length === 0) {
console.log("Belum ada siswa yang hadir.");
} else {
console.log(" 📋 Daftar Hadir:");
daftarHadir.forEach((siswa, i) => console.log(`${i + 1}.
${siswa}`));
}
rl.close();
}

tambahHadir();
 28

15.7.​ Tantangan Praktik Mandiri

Tema: Sistem Belanja Aman
📌 Instruksi:
1.​ User masukkan nama barang, harga, jumlah.
2.​ Validasi: nama tidak boleh kosong, harga & jumlah angka valid.
3.​ Gunakan try…catch untuk error.
4.​ Hitung total belanja.
5.​ Jika total > Rp100.000 → tampilkan pesan “Belanja besar!”.
🎯 Output: tampilkan daftar barang + total (Browser & CLI).

15.8.​ Kuis Mini

1.​ Debugging adalah:​
a. Menjalankan program cepat​
b. Mencari & memperbaiki bug ​
c. Membuat program error​

2.​ console.log() digunakan untuk:​

a. Menghapus variabel​
b. Menampilkan data ​
c. Menghentikan program​

3.​ try…catch digunakan untuk:​

a. Menangani error ​
b. Menghapus error​
c. Mengabaikan error​

4.​ throw digunakan untuk:​

a. Menampilkan pesan biasa​
b. Memunculkan error buatan ​
c. Menutup program​
 29

5.​ isNaN() berguna untuk:​

a. Mengubah angka​
b. Mengecek apakah bukan angka ​
c. Membuat angka acak​

6.​ Apa fungsi dari catch(error)?​

a. Menyembunyikan error​
b. Menangkap & menampilkan error ​
c. Menghapus semua error​

7.​ Jika input kosong lalu throw, apa yang terjadi?​

a. Program berhenti total​
b. Program masuk ke blok catch ​
c. Program jalan terus tanpa pesan​

8.​ Validasi email biasanya menggunakan:​

a. Regex ​
b. if–else​
c. Looping​

9.​ Jika daftar hadir kosong, outputnya adalah:​

a. Error program​
b. “Belum ada siswa hadir.” ​
c. “Siswa tidak valid”​

10.​Jika total belanja > Rp100.000 → muncul pesan:​

a. “Belanja kecil”​
b. “Belanja gagal”​
💡 Belanja besar!” ​
c. “
 30

15.9.​ Slide 11 – Penutup

●​ Hari ini kita belajar Debugging & Error Handling.
●​ Dengan ini, kita tidak takut lagi kalau program error. Kita tahu cara
membacanya, mencari bug, bahkan membuat validasi supaya
program lebih aman.
●​ Kita juga sudah membuat Mini Project: Sistem Kehadiran, dan
Tantangan Praktik Mandiri Sistem Belanja Aman.