Deskripsi singkat Modul ini dirancang untuk pemula yang ingin menguasai JavaScript murni (client-side, tanpa Node.js) dan langsung menerapkannya lewat studi kasus praktis berbasis browser. Setiap bab berisi tujuan pembelajaran, konsep teori ringkas, contoh kode, latihan, serta proyek mini.
Cara pakai
- Gunakan browser (Chrome/Edge/Firefox) untuk menjalankan kode.
- Gunakan editor seperti VS Code, Notepad++, atau Sublime Text.
- Simpan file dengan ekstensi
.htmldan jalankan di browser.
Daftar Isi
- Pengantar JavaScript
- Menjalankan JavaScript di Browser
- Sintaks Dasar & Variabel
- Tipe Data
- Operator & Ekspresi
- Struktur Kontrol (Percabangan & Perulangan)
- Fungsi
- Array
- Objek
- Manipulasi DOM
- Event Handling
- Form Validation
- Local Storage
- Studi Kasus: To-Do List App
Bab 1 — Pengantar JavaScript
Tujuan: Memahami fungsi dan posisi JavaScript di web.
Materi:
- JavaScript adalah bahasa pemrograman yang berjalan di sisi client (browser).
- Fungsinya untuk membuat halaman web menjadi interaktif.
- HTML untuk struktur, CSS untuk tampilan, dan JS untuk logika.
Contoh:
<!DOCTYPE html>
<htmllang=”id”>
<head>
<metacharset=”UTF-8″>
<title>Belajar JavaScript</title>
</head>
<body>
<h2>Halo Dunia!</h2>
<script>
alert(‘Selamat datang di JavaScript!’);
</script>
</body>
</html>
Bab 2 — Menjalankan JavaScript di Browser
Tujuan: Menjalankan JS dengan berbagai cara.
Cara:
- Inline script: langsung di dalam tag HTML.
- Internal script: di dalam tag
<script>di file HTML. - External script: disimpan di file
.jsdan dipanggil dengan<script src="script.js"></script>.
Contoh:
<!– File index.html –>
<scriptsrc=”app.js”></script>
// File app.js
console.log(‘Halo dari file eksternal!’);
Bab 3 — Sintaks Dasar & Variabel
Tujuan: Mengenal aturan penulisan dasar dan variabel.
Materi:
- Penulisan case-sensitive (besar kecil huruf berpengaruh).
- Komentar:
//dan/* ... */ - Variabel:
let,const, danvar(hindarivar).
Contoh:
let nama = ‘Andi’;
const usia = 25;
console.log(‘Halo ‘ + nama + ‘, umur kamu ‘ + usia);
Bab 4 — Tipe Data
Tujuan: Memahami tipe data primitif.
Tipe data utama:
- String — teks (
"Halo") - Number — angka (
25,3.14) - Boolean — logika (
true,false) - Undefined — belum ada nilai
- Null — kosong sengaja
Contoh:
let teks = “Belajar JS”;
let angka = 100;
let benar = true;
console.log(typeof teks, typeof angka, typeof benar);
Bab 5 — Operator & Ekspresi
Tujuan: Melakukan perhitungan dan logika dasar.
Operator aritmatika: + - * / % Operator perbandingan: == === != !== > < >= <= Operator logika: && || !
Contoh:
let a = 10, b = 5;
console.log(a + b); // 15
console.log(a > b); // true
Latihan: Buat program yang menerima 2 angka dari prompt() lalu menampilkan hasil penjumlahannya.
Bab 6 — Struktur Kontrol
Tujuan: Mengatur alur program dengan if dan perulangan.
Percabangan:
let nilai = 80;
if (nilai >= 90) console.log(‘A’);
else if (nilai >= 70) console.log(‘B’);
else console.log(‘C’);
Perulangan:
for (let i = 1; i <= 5; i++) {
console.log(‘Iterasi ke-‘ + i);
}
Bab 7 — Fungsi
Tujuan: Membuat kode yang bisa dipakai ulang.
Contoh:
function sapa(nama) {
return ‘Halo ‘ + nama;
}
console.log(sapa(‘Budi’));
Arrow function:
const kali = (a, b) => a * b;
Bab 8 — Array
Tujuan: Menyimpan banyak data dalam satu variabel.
Contoh:
let buah = [‘apel’, ‘pisang’, ‘mangga’];
console.log(buah[1]); // pisang
buah.push(‘jeruk’);
Metode penting: .push(), .pop(), .map(), .filter(), .forEach().
Bab 9 — Objek
Tujuan: Menyimpan data dalam pasangan key-value.
Contoh:
let siswa = {
nama: ‘Andi’,
umur: 16,
jurusan: ‘RPL’
};
console.log(siswa.nama);
Bab 10 — Manipulasi DOM
Tujuan: Mengubah isi halaman HTML lewat JavaScript.
Contoh:
<h3id=”judul”>Halo!</h3>
<buttononclick=”ubahTeks()”>Ubah</button>
<script>
functionubahTeks() {
document.getElementById(‘judul’).textContent = ‘Teks sudah berubah!’;
}
</script>
Bab 11 — Event Handling
Tujuan: Menangani interaksi pengguna.
Contoh:
<buttonid=”klikSaya”>Klik!</button>
<script>
constbtn = document.getElementById(‘klikSaya’);
btn.addEventListener(‘click’, function() {
alert(‘Tombol diklik!’);
});
</script>
Bab 12 — Form Validation
Tujuan: Memvalidasi input pengguna.
Contoh:
<formonsubmit=”return validasi()”>
<inputid=”nama”placeholder=”Masukkan nama”>
<buttontype=”submit”>Kirim</button>
</form>
<script>
functionvalidasi() {
letnama = document.getElementById(‘nama’).value;
if (nama === ”) {
alert(‘Nama tidak boleh kosong!’);
returnfalse;
}
alert(‘Data berhasil dikirim!’);
returntrue;
}
</script>
Bab 13 — Local Storage
Tujuan: Menyimpan data sederhana di browser.
Contoh:
localStorage.setItem(‘nama’, ‘Andi’);
let nama = localStorage.getItem(‘nama’);
console.log(nama);
Bab 14 — Studi Kasus: To-Do List
Tujuan: Membuat aplikasi daftar tugas sederhana.
Langkah:
- Buat form input dan tombol tambah.
- Tambahkan item ke list.
- Simpan data di localStorage.
- Bisa hapus dan tandai selesai.
Contoh struktur HTML:
<inputid=”tugas”placeholder=”Tulis tugas”>
<buttononclick=”tambahTugas()”>Tambah</button>
<ulid=”daftar”></ul>
<script>
lettodos = JSON.parse(localStorage.getItem(‘todos’)) || [];
functionrender() {
constul = document.getElementById(‘daftar’);
ul.innerHTML = ”;
todos.forEach((t, i) => {
ul.innerHTML += `<li>${t} <button onclick=”hapus(${i})”>x</button></li>`;
});
}
functiontambahTugas() {
letinput = document.getElementById(‘tugas’);
if (input.value !== ”) {
todos.push(input.value);
localStorage.setItem(‘todos’, JSON.stringify(todos));
input.value = ”;
render();
}
}
functionhapus(i) {
todos.splice(i, 1);
localStorage.setItem(‘todos’, JSON.stringify(todos));
render();
}
render();
</script>
