Pendahuluan

Belajar JavaScript sering terasa seperti masuk ke ruangan yang penuh tombol: ada let, const, function, document.querySelector, fetch, async, class, dan banyak istilah lain. Pada awalnya wajar jika semua terlihat ramai. Buku ini ditulis untuk membantu Anda menyalakan lampu satu per satu, bukan memaksa Anda memahami semuanya sekaligus.

Kita akan mulai dari dasar banget: apa itu program, bagaimana komputer menjalankan instruksi, bagaimana data disimpan, bagaimana membuat keputusan dengan kode, lalu pelan-pelan bergerak ke halaman web interaktif, pengambilan data dari internet, penyimpanan data di browser, dan mini proyek nyata.

Tujuan buku ini sederhana: setelah selesai, Anda tidak hanya pernah melihat JavaScript, tetapi bisa memakainya untuk membuat aplikasi web kecil yang benar-benar berjalan.

Mengapa JavaScript layak dipelajari?

JavaScript adalah bahasa pemrograman yang sangat dekat dengan web modern. Ketika Anda membuka situs yang tombolnya bisa diklik, formulirnya bisa divalidasi sebelum dikirim, daftar produknya bisa difilter, atau datanya muncul tanpa memuat ulang seluruh halaman, sering kali JavaScript ikut bekerja di belakangnya. Secara standar bahasa, JavaScript didefinisikan melalui spesifikasi ECMAScript, yaitu spesifikasi resmi yang menjelaskan bentuk bahasa seperti nilai, ekspresi, fungsi, objek, dan aturan eksekusinya (ECMA International, 2024).

Agar lebih mudah dibayangkan, pikirkan halaman web seperti sebuah warung digital:

• HTML adalah struktur warungnya: meja, rak, papan menu, pintu.
• CSS adalah tampilannya: warna cat, ukuran tulisan, jarak antar rak, gaya papan menu.
• JavaScript adalah perilakunya: saat pelanggan menekan tombol pesan, jumlah pesanan bertambah; saat stok habis, muncul peringatan; saat pengguna mengetik, daftar menu bisa langsung dicari.

Contoh kecilnya begini. HTML dapat membuat tombol:

<button>Klik saya</button>

CSS dapat membuat tombol itu terlihat lebih menarik:

button {
  background-color: royalblue;
  color: white;
}

JavaScript dapat membuat tombol itu bereaksi:

document.querySelector("button").addEventListener("click", function () {
  alert("Tombol diklik!");
});

Untuk sekarang, Anda belum perlu memahami semua bagian kode tersebut. Yang penting adalah gambaran besarnya: JavaScript membuat halaman web bisa merespons tindakan pengguna. Dokumentasi MDN Web Docs juga memperkenalkan JavaScript sebagai bahasa scripting yang memungkinkan pembuatan konten web yang dinamis dan interaktif (MDN Web Docs, n.d.-a).

Apa itu pemrograman?

Sebelum masuk ke JavaScript, kita perlu memahami kata yang lebih dasar: pemrograman.

Pemrograman adalah kegiatan menulis instruksi untuk komputer. Instruksi itu ditulis dalam bahasa pemrograman, misalnya JavaScript. Kumpulan instruksi yang disusun untuk melakukan tugas tertentu disebut program.

Contoh program dalam kehidupan sehari-hari:

Jika hujan, bawa payung.
Jika tidak hujan, tidak perlu membawa payung.

Dalam JavaScript, gagasan itu dapat ditulis seperti ini:

const sedangHujan = true;

if (sedangHujan) {
  console.log("Bawa payung.");
} else {
  console.log("Tidak perlu membawa payung.");
}

Mari kita pecah secara sederhana:

• const sedangHujan = true; menyimpan informasi bahwa kondisi hujan bernilai benar.
• if berarti “jika”.
• else berarti “selain itu” atau “kalau kondisi sebelumnya tidak terpenuhi”.
• console.log(...) menampilkan pesan ke console, yaitu tempat kita melihat keluaran program saat belajar.

Dari contoh ini, terlihat bahwa pemrograman bukan tentang menghafal simbol aneh. Pemrograman adalah cara menyusun pikiran secara jelas agar komputer dapat mengikuti langkah-langkahnya.

Komputer sangat patuh, tetapi tidak bisa menebak

Manusia sering memahami maksud walaupun instruksi tidak lengkap. Jika seseorang berkata, “Tolong ambilkan gelas,” kita bisa menebak gelas mana yang dimaksud dari situasi sekitar.

Komputer berbeda. Komputer menjalankan instruksi sesuai aturan bahasa dan lingkungan tempat kode berjalan. Jika instruksi salah tulis, kurang lengkap, atau tidak sesuai aturan, program dapat berhenti dan menampilkan error.

Misalnya:

console.log("Halo dunia";

Kode di atas salah karena tanda kurung tutup ) belum ditulis. Versi yang benar:

console.log("Halo dunia");

Kesalahan seperti ini bukan tanda bahwa Anda “tidak cocok belajar coding”. Ini bagian normal dari belajar. Bahkan programmer berpengalaman pun setiap hari membaca error, memperbaiki kode, dan mencoba lagi.

Dalam buku ini, kita akan memperlakukan error sebagai petunjuk, bukan sebagai hukuman. Nanti di Bab 2 dan Bab 16, kita akan belajar membaca pesan error dan melakukan debugging. Debugging adalah proses mencari, memahami, dan memperbaiki kesalahan dalam program.

Cara berpikir yang akan kita bangun

Buku ini tidak hanya mengajarkan “kode apa yang harus diketik”. Kita akan membangun cara berpikir.

Salah satu pola dasar dalam pemrograman adalah:

input → proses → output

Input adalah data yang masuk ke program.
Proses adalah langkah yang dilakukan program terhadap data itu.
Output adalah hasil yang keluar.

Contoh sederhana:

• Input: angka 5 dan 3
• Proses: dijumlahkan
• Output: 8

Dalam JavaScript:

const angkaPertama = 5;
const angkaKedua = 3;

const hasil = angkaPertama + angkaKedua;

console.log(hasil);

Output-nya:

8

Contoh yang lebih dekat dengan web:

• Input: pengguna mengetik nama.
• Proses: program menyusun kalimat sapaan.
• Output: halaman menampilkan “Halo, Rina!”

Nanti, ketika kita membuat todo list, pola ini tetap sama:

• Input: pengguna menulis tugas baru.
• Proses: JavaScript menyimpan tugas ke array atau localStorage.
• Output: daftar tugas di halaman diperbarui.

Jika Anda memahami pola input-proses-output, banyak topik yang awalnya terlihat sulit akan menjadi lebih masuk akal.

JavaScript berjalan di mana?

Pada tahap awal, kita akan menjalankan JavaScript di browser, seperti Chrome, Firefox, Edge, atau Safari. Browser adalah aplikasi untuk membuka halaman web. Browser modern menyediakan mesin JavaScript, yaitu bagian yang membaca dan menjalankan kode JavaScript.

Namun JavaScript tidak hanya hidup di browser. Dengan lingkungan seperti Node.js, JavaScript juga dapat dijalankan di luar browser, misalnya untuk membuat server, alat otomatisasi, atau aplikasi command-line. Buku ini berfokus pada JavaScript untuk web terlebih dahulu, karena itu jalur yang paling langsung terlihat hasilnya bagi pemula.

Ada dua hal yang perlu dibedakan:

1. Bahasa JavaScript itu sendiri
   Ini mencakup konsep seperti variabel, tipe data, fungsi, array, object, class, dan Promise. Bagian ini dijelaskan oleh spesifikasi ECMAScript (ECMA International, 2024).

2. Fitur yang disediakan lingkungan web
   Ini mencakup hal seperti document.querySelector, event klik, DOM, fetch, dan penyimpanan di browser. Fitur-fitur ini bukan inti bahasa JavaScript, tetapi disediakan oleh browser melalui Web APIs. MDN Web Docs banyak digunakan sebagai dokumentasi praktis untuk mempelajari JavaScript dan Web APIs (MDN Web Docs, n.d.-b).

Contohnya:

const nama = "Ayu";
console.log(nama);

Kode di atas memakai kemampuan dasar JavaScript.

Sementara kode berikut memakai JavaScript bersama fitur browser:

document.querySelector("h1").textContent = "Halo dari JavaScript";

Bagian document.querySelector berhubungan dengan DOM, yaitu representasi struktur halaman HTML yang dapat dibaca dan diubah oleh JavaScript. DOM distandardisasi secara terpisah sebagai model untuk dokumen web (WHATWG, n.d.).

Anda tidak perlu menghafal perbedaan ini sekarang. Cukup simpan gagasan awalnya: JavaScript adalah bahasanya, browser menyediakan banyak alat tambahan agar JavaScript bisa mengendalikan halaman web.

Belajar dari kecil, bukan langsung besar

Banyak pemula ingin segera membuat aplikasi besar. Keinginan itu bagus, tetapi cara belajarnya perlu bertahap.

Bayangkan belajar memasak. Sebelum membuat restoran, seseorang perlu memahami bahan, rasa, alat, dan teknik dasar. Dalam pemrograman juga begitu. Sebelum membuat aplikasi lengkap, kita perlu memahami:

• cara menyimpan nilai dengan variabel,
• cara memilih tindakan dengan percabangan,
• cara mengulang pekerjaan dengan perulangan,
• cara merapikan kode dengan fungsi,
• cara menyimpan banyak data dengan array dan object,
• cara menghubungkan JavaScript dengan halaman web melalui DOM dan event.

Karena itu, buku ini disusun dari konsep paling dasar menuju proyek kecil. Setiap konsep akan terasa lebih berguna ketika bertemu bab-bab berikutnya.

Misalnya, pada awalnya array mungkin terlihat hanya seperti “daftar nilai”:

const buah = ["apel", "jeruk", "mangga"];

Tetapi nanti array akan menjadi dasar untuk menyimpan daftar tugas di aplikasi todo list:

const daftarTugas = [
  { teks: "Belajar JavaScript", selesai: false },
  { teks: "Membuat todo list", selesai: false }
];

Lalu object akan membantu menyimpan data yang lebih terstruktur:

const pengguna = {
  nama: "Dina",
  usia: 17,
  sudahLogin: true
};

Kemudian DOM dan event akan membuat data itu tampil dan berubah di halaman web.

Jadi, jangan remehkan contoh kecil. Contoh kecil adalah batu bata. Aplikasi besar hanyalah susunan batu bata yang diletakkan dengan rapi.

Tidak harus jago matematika untuk mulai

Ada anggapan bahwa belajar pemrograman harus sangat jago matematika. Untuk bidang tertentu seperti grafika komputer, kriptografi, machine learning, atau simulasi ilmiah, matematika memang bisa menjadi sangat penting. Namun untuk memulai JavaScript dan membuat aplikasi web interaktif, yang paling dibutuhkan adalah kemampuan berpikir runtut, teliti, dan mau mencoba.

Anda akan memakai matematika dasar seperti penjumlahan, pengurangan, perbandingan, dan logika benar-salah. Contohnya:

const harga = 50000;
const diskon = 10000;

const totalBayar = harga - diskon;

console.log(totalBayar);

Atau:

const umur = 18;
const bolehDaftar = umur >= 17;

console.log(bolehDaftar);

Hasilnya:

true

Di sini true berarti benar. Program menyatakan bahwa seseorang berumur 18 memenuhi syarat jika batasnya 17 tahun.

Yang lebih penting daripada rumus sulit adalah kebiasaan bertanya:

• Data apa yang saya punya?
• Hasil apa yang saya inginkan?
• Langkah apa yang mengubah data menjadi hasil?
• Bagian mana yang belum berjalan?
• Pesan error-nya mengatakan apa?

Pertanyaan-pertanyaan ini akan menemani Anda sepanjang buku.

Anda akan sering salah, dan itu normal

Saat belajar JavaScript, Anda mungkin akan mengalami hal-hal seperti ini:

• lupa menutup tanda kurung,
• salah menulis nama variabel,
• bingung mengapa undefined muncul,
• membuat perulangan yang tidak berhenti,
• event klik tidak berjalan,
• data dari API tidak muncul,
• tampilan halaman tidak berubah padahal kode sudah ditulis.

Semua itu normal. Pemrograman adalah keterampilan praktik. Sama seperti belajar memainkan alat musik, membaca teori saja tidak cukup. Anda perlu mengetik kode, menjalankannya, melihat hasilnya, memperbaiki kesalahan, lalu mencoba lagi.

Contoh kesalahan umum:

const nama = "Sari";

console.log(namaa);

Kode ini akan error karena kita menyimpan nilai di variabel nama, tetapi mencoba membaca namaa. Bagi manusia, itu mungkin terlihat seperti salah ketik kecil. Bagi komputer, nama dan namaa adalah dua nama yang berbeda.

Versi benar:

const nama = "Sari";

console.log(nama);

Pelajaran pentingnya: ketelitian kecil sangat berarti. Namun ketelitian bukan bakat bawaan semata; ia dibangun lewat kebiasaan.

Cara memakai buku ini dengan efektif

Buku ini akan lebih bermanfaat jika Anda membacanya sambil praktik. Jangan hanya membaca kode. Ketik ulang, jalankan, ubah sedikit, lalu amati hasilnya.

Misalnya, jika ada contoh:

const nama = "Budi";
console.log("Halo, " + nama);

Coba ubah menjadi:

const nama = "Maya";
console.log("Selamat datang, " + nama);

Lalu perhatikan perbedaannya.

Setiap kali menemukan contoh, lakukan tiga langkah:

1. Jalankan kode aslinya.
   Pastikan Anda melihat hasil yang sama dengan penjelasan.

2. Ubah satu hal kecil.
   Ganti teks, angka, nama variabel, atau kondisi.

3. Amati akibatnya.
   Jika hasil berubah, tanyakan mengapa. Jika error, baca pesannya.

Dengan cara ini, Anda tidak hanya mengingat sintaks. Anda mulai membangun intuisi.

Sintaks adalah aturan penulisan dalam bahasa pemrograman. Misalnya, JavaScript memakai tanda kutip untuk teks:

"Ini adalah teks"

JavaScript juga memakai kurung kurawal untuk menandai blok kode tertentu:

if (true) {
  console.log("Kode ini berada di dalam blok.");
}

Sintaks mirip tata bahasa dalam bahasa manusia. Jika tata bahasanya sangat berantakan, makna kalimat bisa sulit dipahami. Jika sintaks kode salah, komputer bisa gagal menjalankannya.

Apa yang akan Anda kuasai secara bertahap?

Di awal buku, Anda akan mengenal JavaScript dan cara menjalankannya. Kita akan memakai browser console dan editor kode. Browser console adalah tempat untuk mengetik dan menjalankan JavaScript secara cepat saat belajar.

Lalu Anda akan belajar nilai, tipe data, dan variabel. Nilai adalah data yang dipakai program, misalnya angka 10, teks "halo", atau boolean true. Tipe data adalah kategori nilai, misalnya number, string, dan boolean. Variabel adalah nama untuk menyimpan nilai agar dapat digunakan lagi.

Setelah itu, kita masuk ke operator, percabangan, perulangan, dan fungsi. Ini adalah alat dasar untuk membuat program yang melakukan pekerjaan nyata.

Kemudian kita belajar array dan object. Dua konsep ini sangat penting karena aplikasi biasanya bekerja dengan banyak data, bukan hanya satu nilai. Daftar belanja, daftar pengguna, daftar posting, dan daftar tugas semuanya dapat direpresentasikan dengan array dan object.

Setelah fondasi bahasa cukup kuat, kita masuk ke DOM dan event. Di sinilah JavaScript mulai terasa hidup di halaman web. Anda akan belajar memilih elemen HTML, mengubah teks, menambah class, merespons klik, mengambil nilai dari form, dan memberi umpan balik kepada pengguna.

Pada bagian berikutnya, kita akan belajar error handling, asynchronous JavaScript, dan fetch. Ini penting karena aplikasi web modern sering berhubungan dengan server dan data dari internet. Fetch API sendiri adalah bagian dari standar web untuk mengambil sumber daya jaringan, seperti data JSON dari server (WHATWG, n.d.-b).

Di bagian akhir, kita akan menyusun kode lebih rapi dengan modul, mengenal dasar object-oriented programming dan functional programming, memakai penyimpanan di browser, lalu membuat dua mini proyek: todo list interaktif dan aplikasi data dari API.

Ukuran keberhasilan Anda

Keberhasilan dalam buku ini bukan berarti Anda langsung hafal semua method JavaScript. Programmer profesional pun sering membuka dokumentasi. Keberhasilan yang lebih penting adalah:

• Anda mengerti cara membaca kode sederhana.
• Anda bisa menulis program kecil dari nol.
• Anda bisa mencari letak kesalahan dengan tenang.
• Anda memahami hubungan antara HTML, CSS, dan JavaScript.
• Anda bisa membuat interaksi di halaman web.
• Anda tahu langkah belajar berikutnya.

Jika pada akhir buku Anda bisa membuat todo list, mengambil data dari API, menampilkan loading dan error state, serta menyimpan data sederhana di browser, Anda sudah melewati fondasi penting.

Sikap belajar yang disarankan

Bawalah tiga sikap saat membaca buku ini.

Pertama, sabar. Beberapa konsep perlu waktu. Jika belum paham saat pertama membaca, itu bukan kegagalan. Ulangi dengan contoh yang lebih kecil.

Kedua, aktif. Menonton atau membaca saja mudah terasa paham, tetapi pemahaman sebenarnya diuji saat Anda menulis kode sendiri. Selalu praktikkan contoh.

Ketiga, jujur terhadap kebingungan. Jika Anda bingung, tulis bagian yang membingungkan. Misalnya: “Saya belum paham bedanya parameter dan argumen,” atau “Saya belum paham mengapa map menghasilkan array baru.” Kebingungan yang diberi nama lebih mudah diselesaikan.

Perjalanan belajar JavaScript bukan garis lurus. Kadang Anda maju cepat, kadang perlu kembali ke bab sebelumnya. Itu normal. Yang penting adalah terus membangun pemahaman dari dasar yang benar.

Mari mulai dari pertanyaan pertama: apa sebenarnya JavaScript, dan bagaimana cara menjalankannya?

References

ECMA International. (2024). ECMAScript® 2024 Language Specification (ECMA-262, 15th edition). https://tc39.es/ecma262/

MDN Web Docs. (n.d.-a). What is JavaScript? https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

MDN Web Docs. (n.d.-b). JavaScript Guide. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

WHATWG. (n.d.-a). DOM Standard. https://dom.spec.whatwg.org/

WHATWG. (n.d.-b). Fetch Standard. https://fetch.spec.whatwg.org/