› › ›

Tutorial JavaScript untuk Pemula: Panduan Lengkap dari Nol Hingga Mahir

weruh.id - Pernah nggak sih kamu membayangkan bagaimana sebuah website bisa bergerak, merespons klik, atau menampilkan notifikasi tanpa harus me-refresh halaman? Semua keajaiban itu terjadi berkat satu bahasa pemrograman yang menjadi nyawa dari setiap website modern. "JavaScript adalah bahasa pemrograman wajib bagi siapa pun yang ingin membangun website interaktif dan dinamis di era digital saat ini". Bahasa ini memungkinkan kamu mengubah tampilan website secara real-time, memvalidasi formulir sebelum dikirim, hingga menciptakan animasi yang memukau. Menurut laporan Stack Overflow 2024, JavaScript telah menjadi bahasa paling populer selama 11 tahun berturut-turut, digunakan oleh lebih dari 65% developer di seluruh dunia. Bahkan, perusahaan-perusahaan raksasa seperti Google, Facebook, dan Netflix mengandalkan JavaScript untuk menghadirkan pengalaman pengguna yang mulus dan responsif. Bayangkan betapa powerful-nya bahasa ini, dari sekadar menampilkan pesan "Hello World" hingga menggerakkan aplikasi kompleks yang digunakan jutaan orang setiap hari.

Nah, bahasa pemrograman yang menjadi fondasi interaktivitas website ini ternyata memiliki keistimewaan lain yang jarang diketahui banyak orang. Tahukah kamu bahwa JavaScript bukan hanya untuk frontend, tapi juga bisa berjalan di sisi server berkat Node.js? Inilah yang membuatnya sangat fleksibel dan layak dikuasai. Artikel ini akan membimbing kamu dari pengenalan dasar hingga membuat proyek kecil menggunakan JavaScript modern. Dari sekadar menulis kode sederhana hingga membangun aplikasi to-do list yang bisa menyimpan data di browser-mu sendiri, semua akan kamu pelajari secara bertahap. Lebih menariknya, kamu nggak perlu menginstal software berat atau membayar biaya langganan—cukup modal browser dan text editor, kamu sudah siap memulai petualangan koding yang seru ini. Siap-siap, karena setelah membaca panduan ini, kemampuanmu dalam memahami dunia pemrograman web akan naik level!

Tutorial JavaScript untuk Pemula Panduan Lengkap dari Nol Hingga Mahir

Mengapa Harus Belajar JavaScript?

JavaScript sebagai Bahasa Pemrograman Paling Populer di Dunia

Tutorial JavaScript bukanlah sekadar tren sesaat, melainkan kebutuhan fundamental di era digital ini. Bayangkan saja, hampir 98% dari seluruh website di dunia menggunakan JavaScript untuk menghadirkan interaktivitas. Mulai dari tombol yang berubah warna saat di-hover, hingga aplikasi peta interaktif seperti Google Maps—semuanya bergerak berkat JavaScript. Keistimewaan utama bahasa ini adalah kemampuannya berjalan langsung di browser pengguna tanpa perlu kompilasi, sehingga proses pengembangan menjadi lebih cepat dan efisien. Menurut data dari W3Techs, JavaScript mendominasi pasar dengan pangsa lebih dari 95% di antara semua website yang menggunakan bahasa pemrograman sisi klien. Ini berarti, hampir bisa dipastikan setiap website yang kamu kunjungi setiap hari menggunakan JavaScript di balik layar.

Peran JavaScript dalam Pengembangan Website Modern (Frontend & Backend)

Salah satu hal yang membuat Belajar JavaScript untuk pemula menjadi sangat menarik adalah fleksibilitasnya yang luar biasa. Di sisi frontend, JavaScript bekerja sama dengan HTML dan CSS untuk menciptakan antarmuka yang hidup dan responsif. Namun, tahukah kamu bahwa JavaScript juga bisa berperan di sisi backend? Dengan hadirnya Node.js, JavaScript kini mampu mengelola server, database, dan logika bisnis aplikasi. Inilah alasan mengapa banyak perusahaan start-up memilih JavaScript sebagai tulang punggung teknologi mereka—karena dengan satu bahasa, mereka bisa mengembangkan seluruh stack aplikasi. Bahkan raksasa teknologi seperti PayPal dan LinkedIn telah beralih ke Node.js untuk meningkatkan performa dan efisiensi pengembangan mereka.

Apa yang Akan Kamu Pelajari dalam Tutorial Ini?

Dalam tutorial JavaScript step by step ini, kamu nggak akan dibombardir dengan teori-teori berat yang membingungkan. Sebaliknya, kita akan belajar sambil praktik langsung dengan contoh kode JavaScript yang mudah dipahami. Mulai dari pengenalan dasar-dasar JavaScript seperti variabel, tipe data, dan operator, hingga konsep yang lebih advanced seperti DOM manipulation dan event handling. Yang lebih seru lagi, di akhir tutorial kamu akan diajak membangun proyek nyata berupa aplikasi To-Do List interaktif yang bisa kamu banggakan sebagai portfolio pertamamu!

Persiapan Sebelum Memulai Tutorial JavaScript

Peralatan yang Dibutuhkan (Browser, Text Editor, dan Console)

Sebelum menyelami fungsi dan variabel JavaScript, mari siapkan dulu alat tempurnya. Kabar baiknya, kamu nggak perlu menginstal software mahal atau berat! Cukup siapkan:

  • Browser modern seperti Google Chrome, Mozilla Firefox, atau Microsoft Edge (semua gratis!)
  • Text editor seperti Visual Studio Code, Sublime Text, atau Notepad++ (VS Code paling direkomendasikan karena banyak ekstensi pendukung)
  • Console browser yang bisa diakses dengan menekan F12 atau Ctrl+Shift+I (ini akan menjadi sahabat terbaikmu saat belajar)

Dengan tiga alat sederhana ini, kamu sudah memiliki laboratorium koding pribadi yang siap digunakan kapan saja. Nggak percaya? Coba buka console di browser-mu sekarang, ketik console.log("Halo Dunia!"), dan lihat keajaibannya—kamu baru saja menulis kode JavaScript pertama tanpa ribet!

Cara Menjalankan Kode JavaScript Pertama Kamu (Hello World!)

Setelah alat siap, saatnya mencoba JavaScript modern ES6 dengan cara paling klasik: menampilkan "Hello World!". Ada tiga cara menjalankan kode JavaScript:

  1. Melalui Console Browser - langsung ketik di console dan tekan Enter
  2. Menyisipkan di HTML - menggunakan tag <script> di dalam file HTML
  3. File terpisah - membuat file dengan ekstensi .js dan menghubungkannya ke HTML

Untuk pemula, metode console adalah yang paling cepat dan mudah. Coba sekarang: buka console di browser, tulis console.log("Halo, ini kode JavaScript pertamaku!") dan lihat hasilnya. Rasakan sensasi ketika kode yang kamu tulis langsung dieksekusi—ini adalah momen pertama dari perjalanan panjangmu menjadi seorang web developer!

Mengenal Developer Tools di Browser untuk Debugging

Salah satu kunci sukses dalam proyek JavaScript pemula adalah menguasai alat debugging. Developer Tools di browser bukan hanya untuk melihat error, tapi juga untuk:

  • Memeriksa nilai variabel secara real-time
  • Melihat struktur DOM dan CSS
  • Menganalisis performa dan network request
  • Men-debug kode dengan breakpoint

Fitur paling kerennya adalah kemampuan untuk mengubah kode secara langsung di browser dan melihat efeknya seketika. Ini seperti memiliki mesin waktu yang memungkinkan kamu mencoba-coba tanpa takut merusak kode asli. Fitur ini sangat membantu ketika kamu menemui error dan bingung mencari penyebabnya.

Dasar-Dasar JavaScript yang Wajib Dikuasai

Variabel dan Tipe Data (String, Number, Boolean, Array, Object)

Memahami dasar-dasar JavaScript berarti kamu harus akrab dengan variabel—tempat menyimpan data. Di JavaScript modern, kita mengenal tiga cara mendeklarasikan variabel:

  • let - untuk variabel yang nilainya bisa berubah
  • const - untuk variabel yang nilainya tetap (konstan)
  • var - cara lama (sebaiknya dihindari)

Untuk tipe data, JavaScript memiliki beberapa jenis utama:

  • String - teks (contoh: "Halo")
  • Number - angka (contoh: 25)
  • Boolean - nilai benar/salah (true/false)
  • Array - kumpulan data (contoh: [1, 2, 3])
  • Object - struktur data kompleks (contoh: {nama: "Budi", umur: 20})

Konsep ini mungkin terdengar sederhana, tapi percayalah, 80% dari kode yang kamu tulis sehari-hari adalah tentang memanipulasi variabel-variabel ini. Jadi, pahami betul fondasinya agar langkahmu selanjutnya semakin mulus!

Operator Aritmatika, Perbandingan, dan Logika

Contoh kode JavaScript tidak akan lengkap tanpa operator. Operator adalah simbol yang digunakan untuk melakukan operasi pada nilai. Ada tiga jenis operator utama yang wajib kamu kuasai:

  • Operator Aritmatika: +, -, *, /, % (modulus/sisa bagi), ** (pangkat)
  • Operator Perbandingan: ==, === (strict equality), !=, !==, >, <, >=, <=
  • Operator Logika: && (AND), || (OR), ! (NOT)

Trik penting: Selalu gunakan === dan !== untuk perbandingan karena mereka membandingkan nilai dan tipe data secara ketat. Ini akan menyelamatkanmu dari bug-bug aneh yang sering menjebak pemula.

Struktur Kontrol: If-Else dan Switch Case

Setelah menguasai operator, langkah berikutnya dalam belajar JavaScript untuk pemula adalah memahami struktur kontrol. Ini adalah logika yang membuat kode bisa mengambil keputusan:

// If-else sederhana
let umur = 18;
if (umur >= 18) {
    console.log("Kamu dewasa!");
} else {
    console.log("Kamu masih anak-anak");
}

// Switch case untuk banyak kondisi
let hari = "Senin";
switch(hari) {
    case "Senin":
        console.log("Awal minggu, semangat!");
        break;
    case "Jumat":
        console.log("Hampir akhir pekan!");
        break;
    default:
        console.log("Hari biasa");
}

Logika inilah yang membuat website bisa "berpikir" dan merespons pengguna secara berbeda tergantung situasi. Tanpa ini, website hanya akan menjadi halaman statis yang membosankan.

Perulangan (Looping): For, While, dan Do-While

Perulangan memungkinkan kita menjalankan kode berulang kali tanpa menulis ulang. Ini sangat berguna untuk memproses data dalam jumlah besar:

// For loop - paling sering digunakan
for (let i = 0; i < 5; i++) {
    console.log("Perulangan ke-" + i);
}

// While loop
let counter = 0;
while (counter < 5) {
    console.log(counter);
    counter++;
}

// Do-while (setidaknya dijalankan sekali)
let angka = 0;
do {
    console.log(angka);
    angka++;
} while (angka < 3);

Bayangkan jika kamu harus menulis 1000 baris kode secara manual—looping akan menghemat waktu dan tenagamu secara signifikan!

Memahami Fungsi dan Scope di JavaScript

Cara Mendeklarasikan Fungsi (Function Declaration vs Expression)

Fungsi dan variabel JavaScript adalah dua konsep yang berjalan beriringan. Fungsi adalah blok kode yang bisa dipanggil berulang kali. Ada beberapa cara mendeklarasikan fungsi:

// Function Declaration (bisa dipanggil sebelum deklarasi)
function salam(nama) {
    return "Halo " + nama;
}

// Function Expression (harus dideklarasikan sebelum dipanggil)
const salam2 = function(nama) {
    return "Halo " + nama;
};

// Arrow Function (cara modern dan ringkas)
const salam3 = (nama) => "Halo " + nama;

Keuntungan fungsi adalah kamu bisa menulis kode sekali dan menggunakannya berkali-kali—ini prinsip DRY (Don't Repeat Yourself) dalam pemrograman.

Parameter, Argumen, dan Return Value

Parameter adalah variabel yang diterima oleh fungsi, sementara argumen adalah nilai yang kita berikan saat memanggil fungsi. Return value adalah hasil yang dikembalikan fungsi:

function tambah(a, b) {  // a dan b adalah parameter
    return a + b;        // mengembalikan hasil
}

let hasil = tambah(5, 3); // 5 dan 3 adalah argumen
console.log(hasil); // Output: 8

Fungsi dengan return value sangat powerful karena hasilnya bisa digunakan untuk operasi lain, menciptakan rantai logika yang kompleks namun terstruktur.

Arrow Function (Fungsi Panah) di ES6

JavaScript modern ES6 memperkenalkan arrow function yang lebih ringkas dan memiliki perilaku berbeda dalam hal this:

// Arrow function satu baris (tanpa return eksplisit)
const kaliDua = (x) => x * 2;

// Arrow function multi-baris (pakai return)
const kaliDuaLengkap = (x) => {
    let hasil = x * 2;
    return hasil;
};

// Tanpa parameter
const halo = () => console.log("Halo!");

// Satu parameter bisa tanpa kurung
const kuadrat = x => x * x;

Arrow function bukan hanya tentang penulisan yang lebih pendek, tapi juga tentang perilaku yang lebih prediktabel—terutama dalam konteks event handling dan asynchronous programming.

Global Scope vs Local Scope

Scope adalah konteks di mana variabel bisa diakses. Ini konsep krusial dalam tutorial JavaScript:

let globalVar = "Akses di mana saja"; // Global scope

function contohScope() {
    let localVar = "Hanya di dalam fungsi"; // Local scope
    console.log(globalVar); // Bisa
    console.log(localVar); // Bisa
}

console.log(globalVar); // Bisa
console.log(localVar); // ERROR! (tidak terdefinisi di sini)

Memahami scope akan mencegahmu dari bug yang membingungkan, seperti variabel yang nilainya berubah-ubah tanpa sebab yang jelas.

JavaScript dan DOM (Document Object Model)

Apa itu DOM dan Mengapa Penting?

DOM (Document Object Model) adalah representasi struktural dari halaman HTML. Bayangkan DOM sebagai pohon keluarga di mana setiap elemen HTML adalah anggota keluarga yang memiliki hubungan orang tua-anak. Dengan JavaScript, kita bisa memanipulasi pohon ini—menambah, menghapus, atau mengubah anggota keluarga sesuka hati. Inilah yang membuat website interaktif menjadi kenyataan!

// Melihat struktur DOM di console
console.log(document.documentElement);

Setiap kali kamu melihat website yang berubah tanpa reload, itu adalah DOM yang sedang dimanipulasi oleh JavaScript. Ini adalah inti dari pengembangan frontend modern.

Cara Mengakses Elemen HTML dengan getElementById, querySelector

Ada berbagai cara untuk mengakses elemen DOM dalam dasar-dasar JavaScript:

// Cara klasik (spesifik)
const judul = document.getElementById('judul');
const paragraf = document.getElementsByClassName('teks');

// Cara modern (lebih fleksibel) - ini yang paling sering dipakai
const element = document.querySelector('#judul'); // CSS selector
const semuaParagraf = document.querySelectorAll('.teks');

querySelector dan querySelectorAll adalah metode paling powerful karena menggunakan sintaks CSS selector yang sudah kamu kenal—ini membuat kode lebih mudah dibaca dan dipelihara.

Mengubah Konten dan Gaya Elemen Secara Dinamis

Setelah mengakses elemen, kita bisa mengubahnya:

// Mengubah teks
const judul = document.querySelector('#judul');
judul.textContent = "Judul Baru!";
judul.innerHTML = "<span>Judul dengan HTML</span>";

// Mengubah gaya CSS
judul.style.color = "blue";
judul.style.fontSize = "24px";

// Menambah/menghapus class
judul.classList.add('highlight');
judul.classList.remove('old-class');

Bayangkan kekuatan ini: Dengan beberapa baris kode, kamu bisa mengubah seluruh tampilan halaman website secara instan!

Menambahkan atau Menghapus Elemen HTML

Manipulasi DOM memungkinkan kita untuk menciptakan elemen baru secara dinamis:

// Membuat elemen baru
const newDiv = document.createElement('div');
newDiv.textContent = "Ini div baru!";
newDiv.style.backgroundColor = "yellow";

// Menambahkannya ke body
document.body.appendChild(newDiv);

// Menghapus elemen
const oldElement = document.querySelector('#to-remove');
oldElement.remove(); // Cara modern

// Atau cara lama
oldElement.parentNode.removeChild(oldElement);

Kemampuan ini sangat berguna untuk membuat aplikasi yang menampilkan data dinamis, seperti daftar pesan, komentar, atau produk yang berubah-ubah.

Event Handling – Membuat Website Interaktif

Pengertian Event dan Jenis-Jenisnya (Click, Mouseover, Keyup)

Event adalah aksi atau kejadian yang terjadi di halaman web—klik, gerakan mouse, penekanan keyboard, dan masih banyak lagi. Event handling adalah cara kita merespons event-event tersebut dengan JavaScript:

// Event klik
button.addEventListener('click', function() {
    console.log("Tombol diklik!");
});

// Event mouseover (ketika kursor di atas elemen)
element.addEventListener('mouseover', function() {
    element.style.backgroundColor = "red";
});

// Event keyup (saat tombol keyboard dilepaskan)
input.addEventListener('keyup', function(e) {
    console.log("Kamu mengetik: " + e.target.value);
});

Bayangkan jika website hanya bisa menampilkan informasi tanpa bisa berinteraksi—membosankan, bukan? Event handling adalah yang membuat website "hidup" dan "berbicara" dengan penggunanya.

Cara Menambahkan Event Listener dengan addEventListener

Contoh kode JavaScript untuk event handling paling baik menggunakan addEventListener karena:

  1. Bisa menambahkan multiple event pada elemen yang sama
  2. Lebih mudah dikelola dan dihapus
  3. Mendukung event capturing dan bubbling
const tombol = document.querySelector('#myButton');

// Menambahkan event
tombol.addEventListener('click', function(e) {
    e.preventDefault(); // Mencegah perilaku default (misal: form submit)
    alert("Tombol diklik!");
});

// Menghapus event (perlu referensi ke fungsi yang sama)
function handleClick() {
    console.log("Clicked!");
}
tombol.addEventListener('click', handleClick);
tombol.removeEventListener('click', handleClick);

Salah satu keunggulan addEventListener adalah kamu bisa menambahkan efek yang berbeda pada event yang sama—misalnya, tombol yang bisa melakukan dua aksi berbeda saat diklik.

Contoh Praktis: Tombol Klik, Form Validasi, dan Counter Sederhana

Mari kita praktikkan proyek JavaScript pemula dengan tiga contoh sederhana:

1. Counter Klik:

let count = 0;
const counterDisplay = document.querySelector('#counter');
const tombolTambah = document.querySelector('#tambah');

tombolTambah.addEventListener('click', function() {
    count++;
    counterDisplay.textContent = count;
});

2. Form Validasi:

const form = document.querySelector('#myForm');
form.addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.querySelector('#email').value;
    if (email.includes('@')) {
        alert("Email valid!");
    } else {
        alert("Email tidak valid!");
    }
});

Dengan tiga contoh sederhana ini, kamu sudah bisa membuat website yang interaktif dan responsif terhadap pengguna. Bayangkan potensinya ketika kamu menggabungkan semua konsep ini dalam satu proyek besar!

JavaScript Modern (ES6+) yang Sering Dipakai

Template Literal untuk String yang Lebih Rapi

JavaScript modern ES6 menghadirkan template literal yang memudahkan pembuatan string dengan variabel:

// Cara lama (ribet)
const nama = "Budi";
const umur = 25;
console.log("Nama saya " + nama + " dan umur saya " + umur + " tahun.");

// Cara modern (rapi dan bersih)
console.log(`Nama saya ${nama} dan umur saya ${umur} tahun.`);

// Bisa untuk multi-baris
const pesan = `
    Halo ${nama}!
    Selamat belajar JavaScript.
    Kamu sudah berumur ${umur} tahun.
`;

Template literal tidak hanya membuat kode lebih bersih, tapi juga mengurangi risiko error akibat salah menggabungkan string dan variabel.

Destructuring Array dan Object

Destructuring adalah cara elegan untuk mengekstrak nilai dari array atau object:

// Array destructuring
const warna = ["merah", "kuning", "hijau"];
const [pertama, kedua, ketiga] = warna;
console.log(pertama); // "merah"

// Object destructuring
const user = {
    namaDepan: "Budi",
    namaBelakang: "Santoso",
    usia: 30
};
const { namaDepan, namaBelakang } = user;
console.log(namaDepan, namaBelakang); // "Budi Santoso"

// Bisa dengan alias
const { namaDepan: first, namaBelakang: last } = user;
console.log(first, last); // "Budi Santoso"

Destructuring membuat kode lebih ringkas dan mengurangi penulisan kode yang berulang-ulang untuk mengakses property.

Spread Operator dan Rest Parameter

Spread operator (...) sangat berguna untuk menggabungkan array atau object:

// Spread untuk array
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const gabungan = [...arr1, ...arr2];
console.log(gabungan); // [1, 2, 3, 4, 5, 6]

// Spread untuk object
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }

// Rest parameter
function jumlahkan(...angka) {
    return angka.reduce((total, num) => total + num, 0);
}
console.log(jumlahkan(1, 2, 3, 4, 5)); // 15

Spread dan rest operator membuat kode lebih ekspresif dan mengurangi kebutuhan akan fungsi-fungsi utilitas tambahan.

Pengenalan Async/Await untuk Menangani Data dari Server

Async/await adalah cara modern untuk menangani operasi asynchronous (seperti memanggil API):

// Contoh dengan fetch API
async function ambilDataUser() {
    try {
        const response = await fetch('https://api.example.com/users');
        const data = await response.json();
        console.log(data);
        return data;
    } catch (error) {
        console.error("Error:", error);
    }
}

// Memanggil fungsi
ambilDataUser();

Async/await membuat kode asynchronous terlihat seperti synchronous, sehingga lebih mudah dibaca dan dipahami—ini sangat membantu ketika kamu mulai bekerja dengan data dari server.

Proyek Akhir: Buat Aplikasi Sederhana dengan JavaScript

Rancang Aplikasi To-Do List Interaktif

Sekarang saatnya menerapkan semua dasar-dasar JavaScript yang sudah kamu pelajari ke dalam proyek JavaScript pemula yang nyata. Kita akan membuat aplikasi To-Do List yang bisa:

  • Menambahkan tugas baru
  • Menampilkan daftar tugas
  • Menandai tugas selesai
  • Menghapus tugas
  • Menyimpan data di browser (localStorage)

Proyek ini akan menggabungkan semua konsep: variabel, fungsi, DOM manipulation, event handling, dan masih banyak lagi!

Menambahkan Tugas Baru dan Menampilkannya

Struktur HTML dasar untuk aplikasi To-Do List:

<div id="app">
    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Tambah tugas...">
    <button id="addBtn">Tambah</button>
    <ul id="taskList"></ul>
</div>

JavaScript untuk menambah dan menampilkan tugas:

const taskInput = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');

function tambahTugas() {
    const tugas = taskInput.value.trim();
    if (tugas === '') {
        alert('Tugas tidak boleh kosong!');
        return;
    }
    
    const li = document.createElement('li');
    li.textContent = tugas;
    taskList.appendChild(li);
    taskInput.value = '';
    taskInput.focus();
}

addBtn.addEventListener('click', tambahTugas);
taskInput.addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
        tambahTugas();
    }
});

Dengan kode di atas, kamu sudah memiliki aplikasi To-Do List yang berfungsi! Tapi tunggu, masih ada fitur yang bisa ditambahkan.

Menandai Tugas Selesai dan Menghapus Tugas

Mari tambahkan fitur untuk menandai tugas selesai (dengan klik) dan menghapus tugas (dengan double-klik):

function buatItemTugas(tugas) {
    const li = document.createElement('li');
    li.textContent = tugas;
    
    // Tandai selesai dengan klik
    li.addEventListener('click', function() {
        this.classList.toggle('selesai');
    });
    
    // Hapus dengan double-klik
    li.addEventListener('dblclick', function() {
        if (confirm('Hapus tugas ini?')) {
            this.remove();
        }
    });
    
    return li;
}

function tambahTugas() {
    const tugas = taskInput.value.trim();
    if (tugas === '') {
        alert('Tugas tidak boleh kosong!');
        return;
    }
    
    const li = buatItemTugas(tugas);
    taskList.appendChild(li);
    taskInput.value = '';
    taskInput.focus();
}

Sekarang aplikasi To-Do List-mu sudah memiliki interaktivitas yang lebih baik—tugas bisa ditandai selesai dan dihapus dengan mudah!

Menyimpan Data dengan LocalStorage Agar Tidak Hilang Saat Refresh

Fitur terakhir yang akan membuat aplikasi ini benar-benar berguna adalah penyimpanan data permanen menggunakan localStorage:

// Fungsi untuk menyimpan data
function simpanData() {
    const tugas = [];
    document.querySelectorAll('#taskList li').forEach(li => {
        tugas.push({
            teks: li.textContent,
            selesai: li.classList.contains('selesai')
        });
    });
    localStorage.setItem('todos', JSON.stringify(tugas));
}

// Fungsi untuk memuat data
function muatData() {
    const data = localStorage.getItem('todos');
    if (!data) return;
    
    const tugas = JSON.parse(data);
    tugas.forEach(t => {
        const li = buatItemTugas(t.teks);
        if (t.selesai) {
            li.classList.add('selesai');
        }
        taskList.appendChild(li);
    });
}

// Panggil fungsi simpan setiap kali ada perubahan
document.addEventListener('DOMContentLoaded', muatData);
// Simpan otomatis saat ada perubahan
taskList.addEventListener('click', simpanData);
taskList.addEventListener('dblclick', simpanData);

Dengan localStorage, tugas-tugasmu akan tetap tersimpan meskipun kamu menutup atau me-refresh browser. *Selamat! Kamu baru saja membangun aplikasi web yang lengkap dengan JavaScript murni!

Kesalahan Umum Pemula dan Cara Mengatasinya

Salah Menulis Nama Variabel (Case Sensitive)

JavaScript bersifat case sensitive—artinya nama berbeda dengan Nama atau NAMA. Kesalahan ini sering membuat pemula bingung karena kode tidak berjalan meskipun sudah "benar" di mata mereka.

Solusi: Gunakan konsistensi dalam penamaan, misalnya camelCase untuk variabel (namaPengguna, jumlahData), dan selalu periksa ejaan saat ada error "variable is not defined".

Lupa Menggunakan let atau const

Tanpa let atau const, variabel akan menjadi global dan bisa menyebabkan konflik di bagian lain kode:

// SALAH - membuat variabel global
x = 10; 

// BENAR
let x = 10; // atau const x = 10;

Solusi: Biasakan selalu menggunakan const sebagai default, dan ganti ke let hanya jika nilai variabel memang perlu diubah.

Kesalahan dalam Memahami Async vs Sync

Banyak pemula bingung mengapa kode yang memanggil API atau menggunakan setTimeout tidak berjalan sesuai urutan:

console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3");
// Output: 1, 3, 2 (bukan 1, 2, 3!)

Solusi: Pahami bahwa JavaScript adalah single-threaded namun asynchronous. Gunakan callback, Promise, atau async/await untuk mengelola operasi yang membutuhkan waktu.