Belajar JavaScript dari Nol: Panduan Pemula untuk Web Developer

Pendahuluan

Selamat datang di langkah pertama perjalanan kamu menjadi seorang Web Developer profesional! Jika kamu sudah memahami dasar-dasar HTML untuk struktur web dan CSS untuk mempercantik tampilan, maka sekarang adalah saatnya memberikan “nyawa” pada website kamu. Di sinilah JavaScript (JS) berperan.

JavaScript adalah bahasa pemrograman paling populer di dunia yang memungkinkan kita membuat website menjadi interaktif. Bayangkan sebuah website Tokopedia; HTML menyusun daftar produknya, CSS membuat tampilannya rapi dan menarik, namun JavaScript-lah yang menangani proses saat kamu klik tombol “Tambah ke Keranjang” atau saat muncul notifikasi promo secara otomatis. Tanpa JavaScript, website akan terasa statis dan membosankan seperti koran digital.

Dalam seri tutorial ini, kita tidak hanya akan belajar teori yang membosankan. Kita akan belajar secara praktis dengan membangun sebuah Aplikasi Kuis Interaktif. Di artikel pertama ini, kita akan fokus pada fondasi paling dasar dari JavaScript: bagaimana menyimpan data, mengenali jenis data, dan membuat instruksi sederhana. Di akhir artikel ini, kamu sudah akan memiliki struktur data awal untuk kuis yang akan kita buat.

Variabel: Wadah Penyimpanan Data

Bayangkan kamu sedang belanja di Alfamart atau Indomaret. Saat kasir memindai barang, setiap item memiliki tempat atau “wadah” di dalam sistem mereka agar harganya tidak tertukar. Dalam pemrograman, kita menyebut wadah ini sebagai Variable.

Variabel digunakan untuk menyimpan informasi yang dapat kita gunakan kembali di bagian lain dalam kode kita. Di JavaScript modern (ES6+), kita memiliki dua cara utama untuk mendeklarasikan variabel yang paling sering digunakan: let dan const.

1. `let` (Variabel yang Bisa Berubah)

Gunakan let jika nilai di dalam variabel tersebut nantinya akan berubah selama program berjalan. Misalnya, saldo GoPay kamu atau skor dalam permainan.

// Deklarasi variabel menggunakan let
let saldoGojek = 50000; // Nilai awal Rp 50.000
console.log("Saldo awal Budi: Rp" + saldoGojek);

// Mengubah nilai variabel
saldoGojek = 45000; // Budi baru saja membayar bakso
console.log("Saldo Budi setelah makan: Rp" + saldoGojek);

2. `const` (Variabel Tetap/Konstanta)

Gunakan const (singkatan dari constant) jika nilai tersebut tidak akan pernah berubah sejak pertama kali ditentukan. Contohnya adalah Nama KTP atau tanggal lahir.

// Deklarasi variabel menggunakan const
const namaUser = "Andi Permana";
const tglLahir = "17-08-1945";

console.log("User: " + namaUser);
// Jika kamu mencoba mengubah namaUser, JavaScript akan memberikan error.
// namaUser = "Budi"; // Ini akan menyebabkan error!

Tips Senior: Selalu gunakan const secara default. Hanya gunakan let jika kamu benar-benar tahu bahwa nilai tersebut akan berubah. Ini adalah praktik terbaik (best practice) untuk menghindari bug yang tidak disengaja di aplikasi skala besar.

Tipe Data: Mengenal Jenis Informasi

Dalam JavaScript, setiap data yang kita simpan dalam variabel memiliki “tipe” atau jenis tertentu. Memahami tipe data sangat krusial agar kita tidak melakukan operasi yang salah, seperti mencoba mengalikan teks dengan angka.

Berikut adalah tipe data dasar yang wajib kamu kuasai:

1. String (Teks)

String adalah kumpulan karakter (huruf, angka, atau simbol) yang dibungkus dengan tanda kutip (" atau ').

const pesanSelamatDatang = "Halo, selamat datang di Kuis JavaScript!";
const namaProduk = 'Sepatu Sneakers Lokal';

berikut adalah tipe data lainnya:

2. Number (Angka)

Berbeda dengan string, tipe data number tidak menggunakan tanda kutip. Ini memungkinkan kita melakukan operasi matematika.

let hargaBuku = 75000; // Angka bulat
let diskon = 0.1;      // Angka desimal (10%)
let totalHarga = hargaBuku - (hargaBuku * diskon);

console.log("Total bayar: Rp" + totalHarga); // Hasil: Rp67500

3. Boolean (Logika Benar/Salah)

Boolean hanya memiliki dua nilai: true (benar) atau false (salah). Ini sangat penting untuk logika pengambilan keputusan (seperti: “Apakah user sudah login?“).

let isQuizFinished = false;
let isPremiumMember = true;

if (isPremiumMember) {
    console.log("Selamat! Kamu bisa akses soal sulit.");
}

4. Array (Daftar Terurut)

Array adalah struktur data yang memungkinkan kita menyimpan banyak nilai dalam satu variabel. Bayangkan seperti daftar belanjaan kamu.

const daftarPertanyaan = [
    "Apa ibukota Indonesia?",
    "Siapa penemu JavaScript?",
    "Berapa hasil dari 5 + 5?"
];

console.log(daftarPertanyaan[0]); // Mengakses item pertama (indeks dimulai dari 0)
// Output: "Apa ibukota Indonesia?"

Function: Mesin Pemroses Instruksi

Jika variabel adalah “wadah”, maka Function (Fungsi) adalah “mesin”. Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu. Kita bisa membuat sebuah mesin, lalu memanggilnya berkali-kali dengan input yang berbeda-beda.

Fungsi membantu kita agar tidak menulis kode yang sama berulang-ulang (prinsip DRY: Don’t Repeat Yourself).

// Membuat fungsi untuk menghitung total harga setelah pajak
// 'harga' adalah parameter (input untuk mesin)
function hitungTotalPajak(harga) {
    const pajak = 0.11; // Pajak 11% (PPN)
    const total = harga + (harga * pajak);
    return total; // Mengembalikan hasil akhir
}

// Memanggil fungsi dengan input berbeda
let belanjaanSiti = 100000;
let belanjaanDewi = 50000;

console.log("Total bayar Siti: Rp" + hitungTotalPajak(belanjaanSiti));
console.log("Total bayar Dewi: Rp" + hitungTotalPajak(belanjaanDewi));

Dalam contoh di atas, harga adalah parameter. Saat kita memanggil hitungTotalPajak(100000), angka 100000 masuk ke dalam mesin dan diproses.

Implementasi dalam Proyek: Struktur Data Kuis

Sekarang, mari kita hubungkan semua konsep di atas ke dalam proyek utama kita: Aplikasi Kuis Interaktif. Pada langkah pertama ini, kita belum membuat tampilan HTML, namun kita akan menyiapkan “otak” atau data dari kuis tersebut menggunakan kombinasi Array dan Object.

Di sini, kita akan menggunakan Array yang berisi Object. Setiap Object akan menyimpan satu pertanyaan, pilihan jawaban, dan kunci jawabannya.

// Langkah 1: Menyiapkan data kuis
// Kita menggunakan const karena daftar pertanyaan ini tidak akan kita ubah-ubah di tengah jalan.
const quizData = [
    {
        question: "Apa ibukota dari negara Indonesia?",
        options: ["Jakarta", "Bandung", "Surabaya", "Medan"],
        correctAnswer: "Jakarta"
    },
    {
        question: "Siapa penemu teknologi World Wide Web (WWW)?",
        options: ["Bill Gates", "Tim Berners-Lee", "Steve Jobs", "Mark Zuckerberg"],
        correctAnswer: "Tim Berners-Lee"
    },
    {
        question: "Manakah dari berikut ini yang merupakan bahasa pemrograman?",
        options: ["HTML", "CSS", "JavaScript", "JSON"],
        correctAnswer: "JavaScript"
    }
];

// Menampilkan pertanyaan pertama ke konsol untuk testing
console.log("Pertanyaan 1: " + quizData[0].question);
console.log("Pilihan: " + quizData[0].options.join(", "));

Dengan struktur data seperti ini, nantinya kita bisa dengan mudah melakukan looping (perulangan) untuk menampilkan semua pertanyaan secara otomatis di halaman web.

Kesimpulan

Hari ini kita telah belajar:

Perbedaan penggunaan let dan const.
Tipe data dasar seperti String, Number, dan Boolean.
Cara menggunakan Array untuk menyimpan daftar data.
Cara membuat Function untuk memproses logika.
Struktur data objek untuk menyimpan informasi kompleks dalam sebuah aplikasi.

Pada materi berikutnya, kita akan mulai belajar cara menghubungkan JavaScript ini dengan HTML agar pertanyaan-pertanyaan tersebut muncul secara visual di browser!

Tips Error Handling untuk Pemula

Saat belajar JavaScript, jangan takut jika melihat pesan error berwarna merah di konsol browser. Berikut adalah beberapa error yang paling sering ditemui:

ReferenceError: x is not defined
- Penyebab: Kamu mencoba menggunakan variabel yang belum pernah dibuat atau salah tulis nama variabel (typo).
- Solusi: Cek kembali apakah kamu sudah melakukan let x = ... sebelum menggunakannya.
TypeError: Cannot read property ’…’ of undefined
- Penyebab: Kamu mencoba mengakses sesuatu (seperti properti objek) dari variabel yang isinya kosong (undefined atau null).
- Solusi: Pastikan data yang kamu akses benar-benar ada. Gunakan console.log() untuk memeriksa isi variabel sebelum diakses.
SyntaxError: Unexpected token ’…’
- Penyebab: Ada kesalahan penulisan simbol, seperti lupa menutup kurung ), lupa titik koma ;, atau salah meletakkan kurung kurawal {.
- Solusi: Periksa kembali struktur penulisan kodemu, terutama tanda baca.

Langkah berikutnya: Memahami Perbedaan var, let, dan const di JavaScript — pelajari cara mendeklarasikan variabel dengan benar agar kode lebih aman dan bebas bug.