Basic JavaScript: Dari Nol sampai Proyek Pertama

Contents

01Memulai dengan JavaScript
02Variabel dan Tipe Data
03Operator dan Percabangan
04Perulangan
05Fungsi dan Scope
06Array dan Method Penting
07Object dan Destructuring
08DOM dan Event
09Asynchronous JavaScript dan Fetch
10Proyek 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:

Code

<!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

// Komentar satu baris

/*
  Komentar
  beberapa baris
*/

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.

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

Code

const judul = "Dasar JavaScript"; // string
const harga = 75000;              // number
const tersedia = true;            // boolean
const catatan = null;              // null
let hasil;                         // undefined

Periksa tipe dengan typeof:

Code

console.log(typeof judul);    // string
console.log(typeof harga);    // number
console.log(typeof tersedia); // boolean

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); // 21
console.log(String(100));
console.log(Boolean(1)); // true

Periksa angka yang tidak valid dengan Number.isNaN.

Code

const nilai = Number("abc");
console.log(Number.isNaN(nilai)); // true

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.

Chapter 3 of 10

Operator dan Percabangan

Operator menggabungkan atau membandingkan nilai. Percabangan menentukan kode mana yang dijalankan berdasarkan kondisi.

Operator aritmetika

Code

const a = 10;
const b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1
console.log(a ** b); // 1000

Operator modulo % berguna untuk memeriksa bilangan genap.

Code

const angka = 8;
console.log(angka % 2 === 0); // true

Perbandingan yang ketat

Gunakan === dan !== agar tipe ikut dibandingkan.

Code

console.log(5 === 5);   // true
console.log(5 === "5"); // false
console.log(10 > 7);    // true

Operator logika

&&: semua kondisi harus benar;
||: minimal satu kondisi benar;
!: membalik boolean.

Code

const sudahLogin = true;
const adalahAdmin = false;

console.log(sudahLogin && adalahAdmin); // false
console.log(sudahLogin || adalahAdmin); // true
console.log(!sudahLogin);               // false

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.

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.

Code

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.

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); // 32

panjang dan lebar adalah parameter. Nilai 8 dan 4 adalah argumen. return mengirim hasil keluar dari fungsi.

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();
// console.log(versi); // ReferenceError

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.

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]); // apel
console.log(buah.length); // 3

Menambah dan menghapus

Code

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 => item * 1.11);

filter

Code

const nilai = [45, 78, 90, 62, 88];
const lulus = nilai.filter(item => item >= 75);
console.log(lulus); // [78, 90, 88]

find

Code

const pengguna = [
  { id: 1, nama: "Ari" },
  { id: 2, nama: "Dina" },
];

const hasil = pengguna.find(item => 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); // 80000

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 => 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.

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.log(pengguna["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); // undefined

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.

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

Code

<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();
});

Tangani tombol Enter:

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.

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(() => resolve("Selesai"), 1000);
});

tunggu.then(hasil => console.log(hasil));

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() {
  status.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.

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

Code

<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));
}

Setiap tugas berbentuk:

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 => !task.completed);
  if (filterAktif === "selesai") return tasks.filter(task => task.completed);
  return tasks;
}

function render() {
  daftar.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.text;
    toggle.textContent = task.completed ? "Batalkan" : "Selesai";
    hapus.textContent = "Hapus";
    toggle.dataset.action = "toggle";
    hapus.dataset.action = "delete";
    item.dataset.id = task.id;

    item.append(label, toggle, hapus);
    daftar.append(item);
  }

  const aktif = tasks.filter(task => !task.completed).length;
  ringkasan.textContent = `${aktif} tugas aktif`;
}

Menambah tugas

Code

const form = document.querySelector("#form-tugas");
const input = document.querySelector("#input-tugas");

form.addEventListener("submit", event => {
  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 => 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.

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.

Lihat versi web terbaru Dukung penulis di Buy Me a Coffee

Tirta Afandi (Kikuk Afandi)

GitHub LinkedIn

https://creativecommons.org/licenses/by-sa/4.0/

Table of contents

Yang akan dipelajari

Menyiapkan alat

Komentar dan statement

Latihan

const dan let

Tipe data primitif

String dan template literal

Konversi tipe

Aturan penamaan

Latihan

Operator aritmetika

Perbandingan yang ketat

Operator logika

if, else if, dan else

Ternary

Latihan: ongkos kirim

for

while

for...of

break dan continue

Latihan: FizzBuzz

Function declaration

Arrow function

Default parameter

Scope

Fungsi murni

Latihan

Menambah dan menghapus

map

filter

find

reduce

Jangan mengubah array tanpa alasan

Latihan: daftar belanja

Mengubah properti

Method dalam object

Destructuring

Spread operator

Optional chaining

Latihan

Memilih elemen

Mengubah konten dan class

Membuat elemen

Event listener

Event delegation

Latihan

Promise

async dan await

Menangani error

Loading state

JSON

Latihan

Fitur

Struktur HTML

Model data dan penyimpanan

Render tampilan

Menambah tugas

Toggle dan hapus

Filter

Pengembangan lanjutan

Checklist kelulusan

Terima kasih telah belajar.