MATERI: 1 - 5
LES PRIVATE ONLINE
PROGRAMMING
JAVASCRIPT LEVEL BASIC
1
BAB 1 - PENGENALAN JAVASCRIPT & SETUP
👨💻 Langkah pertama menjadi Web Developer
📍 Fokus: Pengenalan JavaScript, sejarah, fungsi dasar, dan alat yang dibutuhkan
1.1. Apa Itu JavaScript?
● JavaScript (JS) adalah bahasa pemrograman utama di web
● Digunakan untuk membuat halaman web interaktif
● Bisa dijalankan di browser dan di luar browser (menggunakan [Link])
● Contoh: tombol yang bisa diklik, popup, perhitungan otomatis,
aplikasi online
1.2. Sejarah Singkat JavaScript
● 1995: Diciptakan oleh Brendan Eich (Netscape) dalam 10 hari
● Nama awal: Mocha → LiveScript → JavaScript
● Awalnya hanya untuk validasi form, kini berkembang jadi bahasa
fullstack
● 2009: Muncul [Link] → JavaScript bisa digunakan di server
● Sekarang: Dipakai di frontend, backend, mobile, desktop
1.3. JavaScript dalam Web Modern
Perbandingan peran teknologi di web:
Teknologi Fungsi
HTML Struktur konten
CSS Tampilan visual
JavaScript Interaksi & logika dinamis
● JavaScript menyambungkan aksi pengguna dengan respons yang
terjadi di halaman
● Hampir semua website besar (Google, YouTube, Facebook) memakai
JavaScript
2
1.4. Mengapa Belajar JavaScript?
● Bisa dijalankan langsung di browser
● Tidak butuh setup rumit
● Cocok untuk pemula
● Bahasa populer dengan komunitas besar
● Bisa dipakai untuk web, mobile, desktop, bahkan IoT
Satu bahasa — banyak kemungkinan!
1.5. Tools yang Dibutuhkan
Tool Fungsi
VS Code Editor untuk menulis kode
[Link] Menjalankan JavaScript di luar browser
Live Server Menampilkan HTML langsung di browser
Semuanya gratis & tersedia lintas platform (Windows, Mac, Linux)
1.6. Instalasi VS Code (Step-by-Step)
● Buka: [Link]
● Download sesuai OS (Windows/Mac/Linux)
● Jalankan installer
● Centang semua opsi (termasuk “Add to PATH”)
● Klik Finish dan buka VS Code
1.7. Instalasi Ekstensi Wajib di VS Code
● Live Server → Menjalankan HTML + JS langsung di browser
● Prettier → Format otomatis kode kamu
● JavaScript (ES6) code snippets → Potongan kode cepat
● Bracket Pair Colorizer 2 → Warnai tanda kurung untuk kejelasan
3
1.8. Instalasi [Link] (Step-by-Step)
● Buka: [Link]
● Pilih versi LTS (Long-Term Support)
● Download & jalankan installer
● Cek di terminal:
node -v
npm -v
● ✅ Kalau versi muncul, instalasi sukses!
1.9. Menulis JavaScript di Browser
Langkah Praktis:
1. Buka VS Code
2. Buat folder bab1-html
3. Buat file [Link], isi dengan:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar JavaScript</title>
5 </head>
6 <body>
7 <h1>Halo Dunia!</h1>
8
9 <p>Coba lihat jendela pop-up dan console log dari
JavaScript!</p>
10
11 <script>
12 alert("Selamat datang di dunia JavaScript!");
13 [Link]("Ini adalah kode JavaScript pertamaku.");
14 </script>
15 </body>
16 </html>
4. Jalankan dengan Live Server
● Klik kanan file [Link]
● Pilih "Open with Live Server"
4
● Halaman akan terbuka di browser
● Kamu akan melihat:
○ 🔔 Pop-up "Selamat datang..."
○ 🧾 Teks di tab Console (tekan F12 → Console)
Penjelasan:
Kode Fungsi
alert(...) Menampilkan jendela pop-up
[Link](...) Menampilkan teks di tab Console
browser
1.10.Menulis JavaScript di [Link]
Langkah Praktis:
1. Buat folder bab1-cli
2. Buat file [Link], isi:
1 [Link]("Halo dari terminal!");
2 [Link]("Saya baru saja menjalankan JavaScript
di luar browser.");
3. Buka terminal di folder tersebut lalu ketik:
node [Link]
4. Hasil akan muncul langsung di terminal
5
1.11. Browser vs Terminal
Browser (HTML) Terminal ([Link])
Output di halaman & console Output di layar terminal
Cocok untuk web & UI Cocok untuk logika, CLI tools, backend
Butuh file HTML Hanya file .js saja
1.12.Eksperimen Mini (Langsung Coba)
● Tambahkan alert("Terima kasih sudah mampir!")
● Tambahkan [Link]("Saya semangat belajar!") di terminal
● Jalankan dua-duanya!
1.13.Kuis Singkat
Pilih jawaban yang benar!
1. JavaScript digunakan untuk:
a. Membuat struktur halaman
b. Mengatur tampilan halaman
c. Menambahkan logika/interaksi ke halaman
2. Tool utama untuk menulis kode JavaScript adalah:
a. Microsoft Word
b. Visual Studio Code
c. Adobe XD
3. Di mana hasil [Link]() bisa dilihat?
a. Di layar utama browser
b. Di tab “Console” Developer Tools
c. Di pengaturan browser
6
1.14.Tantangan Praktik Mandiri
Buat halaman [Link] yang:
● Menampilkan alert sapaan ke pengguna
● Menampilkan nama tersebut lewat [Link]
Contoh output di browser:
“Halo, selamat datang di halaman JavaScript saya!”
1.15.Penutup
✅ Kamu sudah:
● Tahu apa itu JavaScript & sejarah singkatnya
● Menyiapkan VS Code & [Link]
● Menulis & menjalankan kode pertamamu
● Membedakan browser vs terminal
🎯 Siap lanjut ke Bab 2: Variabel & Tipe Data
7
BAB 2- VARIABLE & TYPE DATA
2.1. Tujuan Pembelajaran
Setelah mempelajari bab ini, kamu akan mampu:
● Menyimpan data menggunakan variabel
● Mengetahui aturan penamaan variabel
● Mengenali tipe data primitif
● Menampilkan dan memeriksa tipe data
2.2. Apa Itu Variabel?
Variabel adalah wadah untuk menyimpan data
Contoh:
1 let nama = "Rina";
2 let usia = 17;
Gunakan let atau const untuk membuat variabel
2.3. Menulis Variabel dengan Benar
Kata Kunci Bisa Diubah? Disarankan?
let ✅ Ya ✅ Ya
const ❌ Tidak ✅ Ya
var ✅ Ya ❌ Tidak
❌ Hindari var karena:
● Hoisting (bisa diakses sebelum dideklarasikan)
● Tidak memiliki block scope
8
2.4. Aturan Penamaan Variabel
● Tidak boleh menggunakan spasi
● Tidak boleh diawali angka
● Boleh menggunakan huruf, angka, dan _
● Gunakan gaya camelCase
● Hindari nama aneh seperti x1, abc123 (tidak jelas maknanya)
Contoh yang benar:
1 let namaDepan = "Rina";
Contoh yang salah:
1 let 2nama = "Salah"; // Tidak boleh angka di depan
2 let nama depan = "Salah"; // Tidak boleh pakai spasi
2.5. Tipe Data Dasar
Tipe Contoh Keterangan
String "Nita" Teks
Number 7, 4.5 Angka
Boolean true, false Benar/Salah
Undefined let x; Belum diberi nilai
Null null Nilai kosong disengaja
2.6. Khusus Number: Desimal
1 let tinggi = 5.2;
2 [Link](typeof tinggi); // "number"
✅ JavaScript menganggap angka desimal sebagai tipe number
9
2.7. Mengenal Object & Array
Object → Menyimpan pasangan kunci: nilai
Array → Menyimpan daftar berurutant
1 let siswa = { nama: "Asep", usia: 18 };
2 let nilai = [80, 90, 100];
⚠️ typeof untuk keduanya akan hasilkan "object"
2.8. Menampilkan Nilai & Tipe
1 [Link](nama); // Menampilkan nilai
2 [Link](typeof nama); // Menampilkan tipe
2.9. Dynamic Typing
JavaScript = Bahasa yang fleksibel
Satu variabel bisa berubah tipe
1 let data = "Eni";
2 data = 25;
3 data = false;
2.10. Eksperimen Mini
1 let nama = "Dudi";
2 let usia = 20;
3 let aktif = true;
4
5 [Link](nama);
6 [Link](typeof usia);
7 [Link](typeof aktif);
10
2.11. Kuis Mini
1. Variabel yang nilainya tidak bisa diubah:
a. let
b. const
c. var
2. Nilai 5.7 di JavaScript dianggap:
a. float
b. number
c. decimal
3. Cara melihat tipe data suatu variabel:
a. [Link]()
b. typeof
c. typeOf()
4. [] termasuk tipe:
a. string
b. array
c. object (khusus array)
2.12. Tantangan Mandiri
Buat program biodata singkat yang mencantukan nama, usia, tinggi dan
status aktif
2.13. Ringkasan Materi
Kamu sudah belajar:
● Menyimpan data ke dalam variabel
● Aturan penulisan variabel
● Tipe data primitif (string, number, boolean, null, undefined)
● Melihat tipe data dengan typeof
● Perkenalan object & array
11
BAB 3- OPERATOR & EKSPRESI DALAM
JAVASCRIPT
Melakukan perhitungan dan logika dasar
3.1. Tujuan Pembelajaran
Setelah belajar bab ini, kamu akan bisa:
● Memahami konsep ekspresi
● Menggunakan operator aritmatika
● Menggunakan operator perbandingan dan logika
● Menyusun ekspresi logis dan gabungan
● Memahami urutan eksekusi operator
3.2. Apa Itu Ekspresi?
Ekspresi = kombinasi nilai, variabel, dan operator yang menghasilkan nilai
baru.
Contoh:
1 3 + 2 // Ekspresi yang menghasilkan angka 5
2 "Hello" + " Rina" // Ekspresi string → "Hello Rina"
3 a * 3 // Jika a = 2 → hasilnya 6
Semua ekspresi ini bisa disimpan ke variabel:
1 let hasil = 5 + 2; // hasil = 7
3.3. Operator Aritmatika
Digunakan untuk hitung-hitungan:
Simbol Arti Contoh
+ Penjumlahan 3+2=5
- Pengurangan 5-2=3
12
Simbol Arti Contoh
* Perkalian 4*2=8
/ Pembagian 8/2=4
% Modulo 10 % 3 = 1
3.4. Eksperimen Mini: Aritmatika
1 let a = 9;
2 let b = 4;
3
4 [Link]("a + b =", a + b);
5 [Link]("a - b =", a - b);
6 [Link]("a * b =", a * b);
7 [Link]("a / b =", a / b);
8 [Link]("a % b =", a % b);
3.5. Urutan Eksekusi Operator
JavaScript punya urutan eksekusi (precedence)
Urutan Operator Eksekusi lebih dulu
1 ( ) Kurung
2 * / % Kali, bagi, modulo
3 + - Tambah, kurang
4 Perbandingan ==, >, dll
5 Logika &&, `
3.6. Contoh Precedence
1 let hasil = 3 + 4 * 2;
2 [Link](hasil); // hasil = 11, bukan 14
Gunakan ( ) untuk mengatur urutan!
13
3.7. Operator Perbandingan
Membandingkan dua nilai → hasil true atau false
Simbol Contoh Hasil
== 5 == '5' true
=== 5 === '5' false
!= 5 != 3 true
!== 5 !== '5' true
> 7 > 3 true
Operator ini menghasilkan true atau false.
1 [Link](5 == "5"); // true
2 [Link](5 === "5"); // false
3 [Link](7 > 3); // true
4 [Link](5 <= 5); // true
5 [Link](5 != 3); // true
3.8. Operator Logika
Gabungkan beberapa kondisi:
Simbol Nama Contoh Hasil
&& AND true && false false
|| OR II OR
! NOT !true false
Contoh:
1 let usia = 19;
2 let izin = true;
3
4 let bolehMasuk = usia >= 18 && izin;
5 [Link](bolehMasuk); // true
14
3.9. Eksperimen Mini: Logika
1 let nilai = 85;
2
3 [Link](nilai >= 75); // true
4 [Link](nilai < 60 || nilai > 80); // true
5 [Link](!(nilai == 85)); // false
6
3.10. Kuis Mini
1. Hasil dari 3 + 2 * 4 adalah:
a. 20
b. 11
c. 16
2. 5 === "5" hasilnya:
a. true
b. false
c. error
3. !(false || true) hasilnya:
a. true
b. false
c. error
4. 10 % 3 hasilnya:
a. 0
b. 1
c. 3
3.11.Tantangan Praktik Mandiri
Tulislah program untuk menentukan kelulusan, dinyatakan lulus jika nilai
lebih besar atau sama dengan 75.
15
3.12.Penutup
Hari ini kita sudah belajar:
● Ekspresi dan operator
● Perhitungan dengan operator aritmatika
● Urutan operator
● Operator perbandingan dan logika
16
BAB 4- PERCABANGAN (KONDISI)
Buat program yang bisa ambil keputusan
4.1. Tujuan Pembelajaran
Setelah belajar ini, kamu bisa:
● Menjelaskan konsep percabangan
● Menggunakan if, else, dan else if
● Menyusun logika kondisi bertingkat
● Membuat keputusan berdasarkan nilai
4.2. Apa Itu Percabangan?
Program bisa memilih jalur berbeda tergantung kondisi
Contoh:
1 if (hujan) {
2 // bawa payung
3 } else {
4 // jalan biasa
5 }
4.3. Struktur Dasar if
1 let usia = 17;
2
3 if (usia >= 17) {
4 [Link]("Boleh membuat KTP.");
5 }
6
Jika kondisi usia >= 17 terpenuhi → kode di dalam blok akan dijalankan
17
4.4. if dan else
1 let nama = "Dudi";
2 let nilai = 65;
3
4 if (nilai >= 75) {
5 [Link](nama + " dinyatakan lulus.");
6 } else {
7 [Link](nama + " dinyatakan tidak lulus.");
8 }
9
4.5. else if: Banyak Pilihan
1 let nilai = 85;
2
3 if (nilai >= 90) {
4 [Link]("Nilai A");
5 } else if (nilai >= 80) {
6 [Link]("Nilai B");
7 } else if (nilai >= 70) {
8 [Link]("Nilai C");
9 } else {
10 [Link]("Nilai D");
11}
12
4.6. Eksperimen Mini
1 let nama = "Yesi";
2 let nilai = 78;
3
4 if (nilai >= 90) {
5 [Link](nama + " predikat A");
6 } else if (nilai >= 80) {
7 [Link](nama + " predikat B");
8 } else if (nilai >= 70) {
9 [Link](nama + " predikat C");
10} else {
11 [Link](nama + " predikat D");
12}
18
4.7. Kombinasi dengan Logika
1 let usia = 18;
2 let izinOrtu = true;
3
4 if (usia >= 18 && izinOrtu) {
5 [Link]("Boleh daftar kerja.");
6 }
7
Gunakan &&, ||, ! untuk logika kompleks.
4.8. Kuis Mini
1. Apa yang akan dicetak oleh kode berikut?
1 let nilai = 60;
2
3 if (nilai >= 75) {
4 [Link]("Lulus");
5 } else {
6 [Link]("Tidak Lulus");
7 }
2. Jika usia = 20, izin = false, maka:
1 if (usia >= 18 && izin) {
2 [Link]("Boleh ikut lomba");
3 } else {
4 [Link]("Tidak boleh ikut");
5 }
4.9. Tantangan Praktik Mandiri
Buat program sederhana untuk menilai kelulusan dan predikat:
1 let nama = "Asep";
2 let nilai = 88;
3
4 if (nilai >= 90) {
5 [Link](nama + " mendapat nilai A dan lulus.");
6 } else if (nilai >= 80) {
7 [Link](nama + " mendapat nilai B dan lulus.");
8 } else if (nilai >= 70) {
9 [Link](nama + " mendapat nilai C dan lulus.");
10} else {
11 [Link](nama + " tidak lulus.");
12}
19
Ubah nilai menjadi 95, 73, dan 65 untuk melihat hasilnya berubah.
4.10.Penutup
Kita sudah belajar:
● if, else, else if
● Logika bercabang
● Contoh dan praktik langsung
20
BAB 5- PERULANGAN (LOOPING)
Buat program yang bisa mengulang tugas secara otomatis
5.1. Tujuan Pembelajaran
Setelah belajar ini kamu akan bisa:
✅ Memahami konsep perulangan
✅ Menggunakan for, while, dan do...while
✅ Mengontrol perulangan dengan break dan continue
✅ Menyusun solusi dengan perulangan
5.2. Apa Itu Perulangan?
Perulangan adalah proses menjalankan kode berulang kali selama kondisi
masih terpenuhi
Contoh dunia nyata:
“Cetak ‘Belajar JavaScript itu seru’ 5 kali”
Tanpa loop: 5 baris kode
Dengan loop: 1 baris perulangan
5.3. Struktur Dasar for
1 for (let i = 1; i <= 3; i++) {
2 [Link]("Halo Rina! Ini perulangan ke-" + i);
3 }
Artinya:
● Mulai dari i = 1
● Selama i ≤ 3 → ulang
● Setelah setiap putaran, i++
21
5.4. Struktur while
1 let i = 1;
2 while (i <= 3) {
3 [Link]("Iterasi ke-" + i);
4 i++;
5 }
Cocok untuk kondisi dinamis
Selama kondisi benar → ulang
5.5. Struktur do...while
1 let i = 5;
2 do {
3 [Link]("Nilai i: " + i);
4 i++;
5 } while (i <= 3);
Jalankan dulu → baru cek kondisi
Pasti dijalankan setidaknya 1x
5.6. break dan continue
break: hentikan perulangan
1 for (let i = 1; i <= 5; i++) {
2 if (i === 3) break;
3 [Link](i);
4 }
5 // Output: 1, 2
continue: lewati 1 putaran
1 for (let i = 1; i <= 5; i++) {
2 if (i === 3) continue;
3 [Link](i);
4 }
5 // Output: 1, 2, 4, 5
22
5.7. Eksperimen Mini
1 for (let i = 1; i <= 5; i++) {
2 [Link]("Angka: " + i);
3 }
Coba ganti batas i <= 5 menjadi i <= 10
5.8. Kuis Mini
1. Output dari:
for (let i = 1; i <= 4; i++) {
[Link](i);
}
a. 1, 2, 3, 4
b. 1, 2, 3
c. 1, 2, 3, 4,5
2. Mana yang selalu jalan minimal 1x?
a. for
b. while
c. do...while
3. Apa hasil dari:
let i = 3;
while (i < 3) {
[Link](i);
i++;
}
a. 1,2,3
b. Tidak mencetak apapun
c. error
23
5.9. Tantangan Mandiri
Coba kerjakan di rumah:
1. Cetak “Saya semangat belajar JavaScript!” sebanyak 10x
2. Cetak angka kelipatan 5 dari 5–50
3. Cetak angka 1–10 kecuali angka 7
5.10. Slide 11 – Penutup
✅ Hari ini kita sudah belajar:
● for, while, do...while
● Cara menghentikan/percepat loop (break, continue)
● Latihan dan eksperimen
