Contents
Table of contents 01 Memulai dengan JavaScript 02 Variabel dan Tipe Data 03 Operator dan Percabangan 04 Perulangan 05 Fungsi dan Scope 06 Array dan Method Penting 07 Object dan Destructuring 08 DOM dan Event 09 Asynchronous JavaScript dan Fetch 10 Proyek Akhir: Aplikasi Daftar Tugas Chapter 1 of 10
Memulai dengan JavaScript JavaScript adalah bahasa pemrograman yang membuat halaman web dapat merespons tindakan pengguna. JavaScript juga dapat digunakan di server melalui Node.js, tetapi tutorial ini berfokus pada fondasi bahasa yang berlaku di mana pun.
Yang akan dipelajari
Setelah menyelesaikan tutorial ini, kamu dapat:
menyimpan dan mengolah data;
membuat keputusan dan perulangan;
menulis fungsi yang dapat digunakan kembali;
bekerja dengan array dan object;
memanipulasi halaman melalui DOM;
menangani interaksi pengguna;
membuat proyek kecil tanpa framework.
Menyiapkan alat
Kamu hanya memerlukan browser modern dan editor teks. Buka Developer Tools dengan menekan F12 , lalu pilih tab Console .
Coba kode pertama berikut:
Code
console .log ("Halo, JavaScript!" );
Console cocok untuk eksperimen cepat. Untuk kode yang lebih panjang, buat dua file:
Chapter 2 of 10
Variabel dan Tipe Data Program bekerja dengan data. Variabel memberi nama pada data agar dapat dibaca dan digunakan kembali.
const dan let
Gunakan const ketika referensi variabel tidak akan diganti dan let ketika nilainya memang perlu berubah.
Code
const nama = "Alya" ;
let umur = 17 ;
umur = 18 ;
console .log (nama, umur);
Hindari var pada kode modern karena cakupannya lebih sulit diprediksi.
Tipe data primitif
Chapter 3 of 10
Operator dan Percabangan Operator menggabungkan atau membandingkan nilai. Percabangan menentukan kode mana yang dijalankan berdasarkan kondisi.
Operator aritmetika
Chapter 4 of 10
Perulangan Perulangan menjalankan blok kode beberapa kali. Pilih bentuk perulangan berdasarkan sumber datanya.
for
Gunakan for ketika jumlah pengulangan diketahui.
Code
for (let i = 1 ; i <= 5 ; i += 1 ) {
console .log (`Putaran ke-${i} ` );
}
Bagian-bagiannya adalah nilai awal, kondisi, dan perubahan nilai.
while
Gunakan while ketika pengulangan bergantung pada kondisi.
Chapter 5 of 10
Fungsi dan Scope Fungsi membungkus pekerjaan tertentu agar dapat dipanggil berulang kali. Fungsi yang baik memiliki satu tanggung jawab yang jelas.
Function declaration
Code
function hitungLuasPersegiPanjang (panjang, lebar ) {
return panjang * lebar;
}
const luas = hitungLuasPersegiPanjang (8 , 4 );
console .log (luas);
panjang dan
Chapter 6 of 10
Array dan Method Penting Array menyimpan kumpulan nilai secara berurutan. Indeks array dimulai dari nol.
Code
const buah = ["apel" , "mangga" , "jeruk" ];
console .log (buah[0 ]);
console .log (buah.length );
Menambah dan menghapus
Chapter 7 of 10
Object dan Destructuring Object menyimpan data sebagai pasangan properti dan nilai. Object cocok untuk menggambarkan satu entitas.
Code
const pengguna = {
nama : "Raka" ,
umur : 21 ,
aktif : true ,
};
console .log (pengguna.nama );
console .Chapter 8 of 10
DOM dan Event DOM adalah representasi halaman HTML dalam bentuk object. JavaScript dapat memilih, mengubah, membuat, dan menghapus elemen melalui DOM.
Memilih elemen
Chapter 9 of 10
Asynchronous JavaScript dan Fetch Operasi jaringan membutuhkan waktu. JavaScript tidak harus menghentikan seluruh halaman sambil menunggu hasilnya.
Promise
Promise memiliki kondisi pending, fulfilled, atau rejected.
Code
const tunggu = new Promise (resolve =>setTimeout (Chapter 10 of 10
Proyek Akhir: Aplikasi Daftar Tugas Pada proyek akhir, kita menggabungkan variabel, fungsi, array, object, DOM, event, dan penyimpanan browser menjadi aplikasi daftar tugas.
Fitur
menambah tugas;
menandai tugas selesai;
menghapus tugas;
memfilter semua, aktif, atau selesai;
menyimpan data di localStorage;
menampilkan jumlah tugas aktif.
Struktur HTML
Sampai jumpa di pelajaran berikutnya
Terima kasih telah belajar. Anda telah menyelesaikan 10 bab dalam Basic JavaScript: Dari Nol sampai Proyek Pertama. Gunakan fondasi ini untuk berlatih, bereksperimen, dan membagikan kembali apa yang Anda pelajari.
Tirta Afandi (Kikuk Afandi)
© 2026 Tirta Afandi (Kikuk Afandi), licensed CC BY-SA 4.0.
https://creativecommons.org/licenses/by-sa/4.0/ Basic JavaScript: Dari Nol sampai Proyek Pertama · Ebook preview
<!doctype html >
<html lang ="id" >
<head >
<meta charset ="UTF-8" />
<meta name ="viewport" content ="width=device-width, initial-scale=1" />
<title > Belajar JavaScript</title >
</head >
<body >
<h1 > Belajar JavaScript</h1 >
<script src ="script.js" > </script >
</body >
</html >
Code
console .log ("script.js berhasil dimuat" );
Atribut src menghubungkan HTML dengan JavaScript. Letakkan script menjelang akhir body agar elemen halaman sudah tersedia saat kode dijalankan.
Komentar dan statement Code
console .log ("Satu statement" );
Titik koma bersifat opsional pada banyak kondisi, tetapi gunakan gaya yang konsisten.
Latihan
Buat folder basic-js.
Tambahkan index.html dan script.js.
Tampilkan nama dan alasanmu belajar JavaScript melalui console.log.
Pastikan tidak ada error merah di Console.
Biasakan membaca pesan error dari baris pertama. Pesan tersebut biasanya menunjukkan jenis masalah dan lokasi kode.
const judul = "Dasar JavaScript" ;
const harga = 75000 ;
const tersedia = true ;
const catatan = null ;
let hasil;
Periksa tipe dengan typeof:
Code
console .log (typeof judul);
console .log (typeof harga);
console .log (typeof tersedia);
String dan template literal Template literal memakai backtick dan dapat menyisipkan ekspresi.
Code
const nama = "Bima" ;
const skor = 92 ;
const pesan = `Halo ${nama} , skormu ${skor} .` ;
console .log (pesan);
Konversi tipe Nilai dari input HTML biasanya berupa string.
Code
const inputUmur = "20" ;
const umur = Number (inputUmur);
console .log (umur + 1 );
console .log (String (100 ));
console .log (Boolean (1 ));
Periksa angka yang tidak valid dengan Number.isNaN.
Code
const nilai = Number ("abc" );
console .log (Number .isNaN (nilai));
Aturan penamaan Gunakan nama yang menjelaskan isi:
Code
const totalBelanja = 150000 ;
const namaPengguna = "Nadia" ;
Hindari nama seperti x, data1, atau singkatan yang tidak jelas.
Latihan Buat variabel untuk nama produk, harga, jumlah, dan status ketersediaan. Hitung total lalu tampilkan kalimat berikut dengan template literal:
Produk Keyboard sebanyak 2 memiliki total harga Rp500000.
const a = 10 ;
const b = 3 ;
console .log (a + b);
console .log (a - b);
console .log (a * b);
console .log (a / b);
console .log (a % b);
console .log (a ** b);
Operator modulo % berguna untuk memeriksa bilangan genap.
Code
const angka = 8 ;
console .log (angka % 2 === 0 );
Perbandingan yang ketat Gunakan === dan !== agar tipe ikut dibandingkan.
Code
console .log (5 === 5 );
console .log (5 === "5" );
console .log (10 > 7 );
Operator logika
&&: semua kondisi harus benar;||: minimal satu kondisi benar;!: membalik boolean. Code
const sudahLogin = true ;
const adalahAdmin = false ;
console .log (sudahLogin && adalahAdmin);
console .log (sudahLogin || adalahAdmin);
console .log (!sudahLogin);
if, else if, dan else Code
const nilai = 82 ;
if (nilai >= 90 ) {
console .log ("A" );
} else if (nilai >= 80 ) {
console .log ("B" );
} else if (nilai >= 70 ) {
console .log ("C" );
} else {
console .log ("Perlu belajar lagi" );
}
Urutkan kondisi dari yang paling spesifik atau paling tinggi.
Ternary Untuk dua pilihan sederhana:
Code
const umur = 19 ;
const status = umur >= 17 ? "Dewasa" : "Anak" ;
Jangan memakai ternary bertingkat untuk logika panjang karena sulit dibaca.
Latihan: ongkos kirim Buat perhitungan dengan aturan:
belanja minimal Rp200.000 mendapat gratis ongkir;
member dengan belanja minimal Rp100.000 mendapat gratis ongkir;
selain itu ongkir Rp20.000.
Uji minimal tiga kombinasi nilai berbeda.
let saldo = 50000 ;
while (saldo >= 10000 ) {
saldo -= 10000 ;
console .log (`Sisa saldo: ${saldo} ` );
}
Pastikan kondisi akhirnya menjadi salah agar tidak terjadi infinite loop.
for...of Untuk membaca setiap nilai array:
Code
const bahasa = ["JavaScript" , "Go" , "Python" ];
for (const item of bahasa) {
console .log (item);
}
break dan continue break menghentikan loop, sedangkan continue melewati satu putaran.
Code
for (let angka = 1 ; angka <= 10 ; angka += 1 ) {
if (angka === 3 ) continue ;
if (angka === 8 ) break ;
console .log (angka);
}
Latihan: FizzBuzz Tampilkan angka 1 sampai 30 dengan aturan:
kelipatan 3 menjadi Fizz;
kelipatan 5 menjadi Buzz;
kelipatan 3 dan 5 menjadi FizzBuzz;
selain itu tampilkan angkanya.
Petunjuk: periksa kondisi kelipatan 3 dan 5 terlebih dahulu.
lebar
8
4
return
Arrow function Code
const formatRupiah = nilai => {
return `Rp${nilai.toLocaleString("id-ID" )} ` ;
};
console .log (formatRupiah (125000 ));
Untuk satu ekspresi, bentuknya dapat dipersingkat:
Code
const kuadrat = angka => angka * angka;
Default parameter Code
function sapa (nama = "Teman" ) {
return `Halo, ${nama} !` ;
}
Scope Variabel yang dibuat di dalam blok hanya tersedia di blok tersebut.
Code
const aplikasi = "Kasir" ;
function cetakInfo (const versi = "1.0" ;
console .log (aplikasi, versi);
}
cetakInfo ();
Hindari terlalu banyak variabel global karena dapat saling bertabrakan.
Fungsi murni Fungsi murni menghasilkan output yang sama untuk input yang sama dan tidak mengubah data di luar dirinya.
Code
function hitungDiskon (harga, persen ) {
return harga - harga * (persen / 100 );
}
Latihan Buat fungsi hitungNilaiAkhir(tugas, uts, uas) dengan bobot 30%, 30%, dan 40%. Buat fungsi kedua untuk mengubah hasilnya menjadi predikat A sampai D.
const tugas = ["Belajar variabel" ];
tugas.push ("Belajar fungsi" );
tugas.unshift ("Siapkan editor" );
tugas.pop ();
tugas.shift ();
map map membuat array baru dari setiap elemen.
Code
const harga = [10000 , 25000 , 50000 ];
const hargaDenganPajak = harga.map (item =>1.11 );
filter Code
const nilai = [45 , 78 , 90 , 62 , 88 ];
const lulus = nilai.filter (item =>75 );
console .log (lulus);
find Code
const pengguna = [
{ id : 1 , nama : "Ari" },
{ id : 2 , nama : "Dina" },
];
const hasil = pengguna.find (item =>id === 2 );
reduce reduce menggabungkan seluruh elemen menjadi satu nilai.
Code
const keranjang = [25000 , 40000 , 15000 ];
const total = keranjang.reduce ((jumlah, harga ) => jumlah + harga, 0 );
console .log (total);
Jangan mengubah array tanpa alasan Method seperti map dan filter menghasilkan array baru. Ini biasanya lebih mudah dipahami daripada mengubah array asli.
Code
const angka = [1 , 2 , 3 ];
const ganda = angka.map (item =>2 );
Latihan: daftar belanja Gunakan array object produk yang memiliki nama, harga, dan stok. Lakukan:
filter produk yang masih tersedia;
buat daftar nama dengan map;
hitung total harga seluruh produk tersedia dengan reduce;
cari satu produk berdasarkan nama.
log
"umur"
Mengubah properti Code
pengguna.umur = 22 ;
pengguna.kota = "Semarang" ;
delete pengguna.aktif ;
Object yang disimpan dengan const masih dapat mengubah propertinya. Yang tidak boleh adalah mengganti referensi object tersebut.
Method dalam object Code
const rekening = {
pemilik : "Sari" ,
saldo : 100000 ,
setor (jumlah ) {
this .saldo += jumlah;
},
};
rekening.setor (50000 );
console .log (rekening.saldo );
Destructuring Code
const produk = {
nama : "Mouse" ,
harga : 150000 ,
stok : 12 ,
};
const { nama, harga, stok = 0 } = produk;
console .log (nama, harga, stok);
Destructuring juga berlaku pada array:
Code
const warna = ["merah" , "hijau" , "biru" ];
const [utama, kedua] = warna;
Spread operator Buat object baru tanpa mengubah object asli.
Code
const profil = { nama : "Nina" , kota : "Solo" };
const profilBaru = { ...profil, kota : "Bandung" , aktif : true };
Optional chaining Code
const pelanggan = { nama : "Dito" };
console .log (pelanggan.alamat ?.kota );
Optional chaining mencegah error ketika properti di tengah tidak tersedia.
Latihan Buat object perpustakaan berisi nama, alamat, dan array buku. Setiap buku memiliki judul, penulis, dan status dipinjam. Buat fungsi untuk menampilkan hanya buku yang tersedia.
<h1 id ="judul" > Daftar Tugas</h1 >
<input id ="input-tugas" />
<button id ="tambah" > Tambah</button >
<ul id ="daftar" > </ul >
Code
const judul = document .querySelector ("#judul" );
const input = document .querySelector ("#input-tugas" );
const tombol = document .querySelector ("#tambah" );
const daftar = document .querySelector ("#daftar" );
Mengubah konten dan class Code
judul.textContent = "Tugas Hari Ini" ;
judul.classList .add ("aktif" );
judul.classList .toggle ("besar" );
Gunakan textContent untuk teks dari pengguna. Hindari memasukkan input pengguna melalui innerHTML karena dapat membuka celah XSS.
Membuat elemen Code
function tambahTugas (teks ) {
const item = document .createElement ("li" );
item.textContent = teks;
daftar.append (item);
}
Event listener Code
tombol.addEventListener ("click" , () => {
const teks = input.value .trim ();
if (!teks) return ;
tambahTugas (teks);
input.value = "" ;
input.focus ();
});
Code
input.addEventListener ("keydown" , event =>if (event.key === "Enter" ) tombol.click ();
});
Event delegation Untuk banyak item, pasang satu listener pada parent.
Code
daftar.addEventListener ("click" , event =>if (event.target .matches ("li" )) {
event.target .classList .toggle ("selesai" );
}
});
Latihan Kembangkan daftar tugas agar:
item dapat ditandai selesai;
ada tombol hapus pada setiap item;
input kosong menampilkan pesan validasi;
jumlah tugas aktif ditampilkan di halaman.
() =>
resolve
"Selesai"
1000
then
hasil =>
console
log
async dan await await membuat kode asynchronous lebih mudah dibaca.
Code
async function ambilPengguna (const response = await fetch ("https://jsonplaceholder.typicode.com/users" );
if (!response.ok ) {
throw new Error (`HTTP ${response.status} ` );
}
return response.json ();
}
Menangani error Code
async function tampilkanPengguna (try {
const pengguna = await ambilPengguna ();
console .log (pengguna);
} catch (error) {
console .error ("Gagal mengambil data:" , error.message );
}
}
tampilkanPengguna ();
Selalu periksa response.ok; fetch tidak otomatis melempar error untuk respons HTTP 404 atau 500.
Loading state Code
const status = document .querySelector ("#status" );
async function muatData (textContent = "Memuat..." ;
try {
const data = await ambilPengguna ();
status.textContent = `Berhasil memuat ${data.length} pengguna` ;
} catch {
status.textContent = "Data gagal dimuat" ;
}
}
JSON Code
const profil = { nama : "Ayu" , aktif : true };
const teks = JSON .stringify (profil);
const objectKembali = JSON .parse (teks);
Latihan Ambil daftar pengguna dari JSONPlaceholder, lalu tampilkan nama dan email ke dalam elemen ul. Tambahkan tampilan loading, pesan error, dan tombol untuk mencoba lagi.
<main class ="app" >
<h1 > Daftar Tugas</h1 >
<form id ="form-tugas" >
<label for ="input-tugas" > Tugas baru</label >
<div >
<input id ="input-tugas" autocomplete ="off" required />
<button > Tambah</button >
</div >
</form >
<div id ="filter" >
<button data-filter ="semua" > Semua</button >
<button data-filter ="aktif" > Aktif</button >
<button data-filter ="selesai" > Selesai</button >
</div >
<p id ="ringkasan" > </p >
<ul id ="daftar-tugas" > </ul >
</main >
<script src ="script.js" > </script >
Model data dan penyimpanan Code
const STORAGE_KEY = "basic-js-tasks" ;
let tasks = JSON .parse (localStorage .getItem (STORAGE_KEY ) || "[]" );
let filterAktif = "semua" ;
function simpan (localStorage .setItem (STORAGE_KEY , JSON .stringify (tasks));
}
Code
{
id : crypto.randomUUID (),
text : "Belajar JavaScript" ,
completed : false
}
Render tampilan Code
const daftar = document .querySelector ("#daftar-tugas" );
const ringkasan = document .querySelector ("#ringkasan" );
function tugasTerfilter (if (filterAktif === "aktif" ) return tasks.filter (task =>completed );
if (filterAktif === "selesai" ) return tasks.filter (task =>completed );
return tasks;
}
function render (replaceChildren ();
for (const task of tugasTerfilter ()) {
const item = document .createElement ("li" );
const label = document .createElement ("span" );
const toggle = document .createElement ("button" );
const hapus = document .createElement ("button" );
label.textContent = task.
Menambah tugas Code
const form = document .querySelector ("#form-tugas" );
const input = document .querySelector ("#input-tugas" );
form.addEventListener ("submit" , event =>preventDefault ();
const text = input.value .trim ();
if (!text) return ;
tasks.push ({
id : crypto.randomUUID (),
text,
completed : false ,
});
simpan ();
render ();
form.reset ();
input.focus ();
});
Toggle dan hapus Code
daftar.addEventListener ("click" , event =>const action = event.target .dataset .action ;
const item = event.target .closest ("li" );
if (!action || !item) return ;
const index = tasks.findIndex (task =>id === item.dataset .id );
if (index === -1 ) return ;
if (action === "toggle" ) {
tasks[index] = { ...tasks[index], completed : !tasks[index].completed };
}
if (action === "delete" ) {
tasks.splice (index, 1 );
}
simpan ();
render ();
});
Filter Code
document .querySelector ("#filter" ).addEventListener ("click" , event =>const filter = event.target .dataset .filter ;
if (!filter) return ;
filterAktif = filter;
render ();
});
render ();
Pengembangan lanjutan Setelah versi dasar bekerja, tambahkan:
edit teks tugas;
tombol hapus semua tugas selesai;
validasi panjang maksimum;
pengurutan berdasarkan waktu;
styling responsif dan fokus keyboard yang terlihat.
Checklist kelulusan
Semua fitur utama berjalan tanpa error Console.
Data tetap ada setelah halaman dimuat ulang.
Input kosong tidak membuat tugas baru.
Nama variabel dan fungsi menjelaskan tugasnya.
Tampilan dapat digunakan dengan keyboard.
Kamu kini sudah menggunakan fondasi JavaScript dalam satu aplikasi nyata. Langkah berikutnya adalah memperdalam module, error handling, testing, dan kemudian memilih framework jika kebutuhan proyek memang memerlukannya.
text
textContent
completed
"Batalkan"
"Selesai"
textContent
"Hapus"
dataset
action
"toggle"
dataset
action
"delete"
dataset
id
id
append
append
const
filter
task =>
completed
length
textContent
`${aktif} tugas aktif`
