Apa yang Akan Kamu Pelajari di Kursus JavaScript Ini

Kursus ini adalah materi gratis supaya kamu bisa menulis JavaScript untuk browser sampai tingkat yang dipakai di dunia kerja. Kamu mulai dari dasarnya — variable dan array — lalu masuk ke conditional, loop, function, dan object-oriented programming dengan class, dan berakhir di DOM (mekanisme browser untuk membaca dan menulis element HTML dari JavaScript) serta fetch untuk network request. Diagram dan latihan praktik akan menuntunmu selangkah demi selangkah.

Artikel ini membahas di mana sebenarnya JavaScript dijalankan, serta apa saja yang dibahas kursus ini dan dalam urutan seperti apa.

Kenapa Belajar JavaScript — Browser Menjalankannya Langsung

Tampilan berubah saat tombol ditekan. Isian langsung divalidasi saat kamu mengetik. Data produk diambil dari server lalu ditampilkan sebagai daftar. Semua gerakan di halaman web seperti ini diwujudkan JavaScript.

JavaScript adalah satu-satunya bahasa yang bisa langsung dijalankan browser dari kode sumbernya, jadi kalau kamu membuat apa pun yang bergerak di layar, kamu pasti menulis JavaScript.

Node.js (software untuk menjalankan JavaScript di luar browser) juga sudah dipakai di mana-mana sekarang, jadi logic sisi server dan build tool bisa ditulis dalam bahasa yang sama. Sekali kamu menguasai JavaScript, front end maupun back end bisa kamu kerjakan.

Di Mana JavaScript Berjalan — Browser, Node.js, dan Console Situs Ini

JavaScript yang sama bisa punya kemampuan berbeda tergantung tempat kamu menjalankannya. Bahasanya sendiri — variable, array, object, function, class — sama saja, di mana pun dijalankan.

Yang berbeda adalah fitur tambahan yang disediakan tiap environment. Browser menyediakan layar (DOM) dan cara menyimpan data di dalam browser; Node.js menyediakan kemampuan membaca dan menulis file serta menjalankan server. Kalau kamu paham perbedaan ini, mencari tahu penyebab kode tidak berjalan jadi jauh lebih gampang.

Contoh kode di bawah belum perlu kamu pahami sepenuhnya — cukup perhatikan apa yang berbeda di antara ketiga tempat itu.

// Sama di mana saja ― bahasanya sendiri
const cart = [
  { name: "Mug", price: 1200 },
  { name: "Coaster", price: 400 },
];
console.log(cart.length);   // 2

// Hanya di browser ― menulis ulang layar
document.querySelector("#total").textContent = "$16.00";

// Hanya di Node.js ― membaca file
const fs = require("node:fs");
console.log(fs.readFileSync("orders.csv", "utf-8"));

Console Situs Ini Tidak Punya Layar

Console latihan menjalankan kodemu di environment browser yang tidak punya layar. Element yang kamu buat tidak akan muncul di mana pun, jadi hasilnya kamu cek dengan membaca teks yang kamu tampilkan lewat console.log. Dialog seperti alert juga tidak bisa ditampilkan. Di bab tentang browser API pun, kamu memastikan hasilnya dengan menampilkan isi element yang kamu buat dalam bentuk teks.

Apa yang Dicakup Kursus Ini — 4 Kategori

Kursus ini disusun dalam 4 kategori. Kamu mulai dari dasar value dan struktur data, lalu masuk ke control flow dan function, berlanjut ke object-oriented programming dengan class, dan berakhir di browser API (manipulasi DOM, event, networking, penyimpanan data) untuk mengolah layar dan data.

Kalau kamu mengerjakannya berurutan dari atas ke bawah, maka materi artikel sebelumnya langsung jadi pijakan artikel berikutnya. Ada satu pengecualian, yaitu if untuk mengecek kondisi — bentuk paling sederhananya sudah muncul di artikel basics yang membahas cara membandingkan value.

Tiap artikel mengikuti alur yang sama: penjelasan → diagram → latihan → quiz. Latihannya bisa langsung dijalankan di console pada halaman, jadi kamu tidak perlu menginstal editor dan tidak perlu menyiapkan environment apa pun.

Kursus ini tidak berhenti di membaca — di tiap artikel kamu menulis dan menjalankan kodenya sendiri sambil belajar.

Kenapa Fundamental Masih Penting di Era AI — Membaca dan Memperbaiki Error

Sekarang makin banyak kode yang ditulis AI. Tapi membaca kode yang keluar, menjalankannya, dan memperbaikinya saat berhenti karena error tetap jadi tugas manusia.

Di JavaScript, value bisa dioper tanpa mendeklarasikan type-nya, jadi value yang bentuknya tidak sesuai tidak langsung menghentikan eksekusi di tempat — kodenya baru gagal belakangan, di baris yang sama sekali berbeda. Kemampuan melacak kembali dari titik mana value itu mulai salah inilah yang langsung menentukan cepat atau lambatnya kamu bekerja.

Saat kode berhenti karena error, yang pertama harus kamu baca adalah error message-nya. Sebagian besar error message JavaScript memuat type, situasi, dan target dalam satu baris. Kalau ketiganya kamu baca terpisah, maka perbaikannya bisa dipersempit sampai ke "value satu langkah sebelum baris yang gagal".

Property (pasangan nama dan value yang dipegang object) dan undefined (value yang menandakan belum ada yang di-assign) yang muncul di contoh berikutnya dibahas lebih detail di artikel 8 dan 9.

const user = { name: "Alice", age: 34 };

// user tidak punya property bernama profile
console.log(user.profile.age);
// TypeError: Cannot read properties of undefined (reading 'age')

Kursus ini sengaja menyiapkan latihan yang memunculkan error, supaya kamu terbiasa membaca message-nya dan memperbaiki kodenya sendiri. Kalau kamu mengerjakan 4 kategorinya berurutan dari atas, maka kamu akan sampai ke tahap bisa menulis JavaScript yang benar-benar dipakai di dunia kerja, sekaligus memperbaikinya sendiri saat kodenya berhenti karena error.

Di artikel berikutnya kamu mempelajari let dan const, dua cara mendeklarasikan variable, sambil langsung menulis kodenya.