Persiapan Lingkungan Pengembangan

Kenapa ini penting

Tukang kayu butuh meja kerja dan perkakas yang rapi sebelum mulai membuat lemari. Programmer juga begitu. Lingkungan kerja yang benar membuatmu bisa fokus ke logika, bukan berkutat dengan masalah teknis seperti "kenapa file saya tidak mau jalan". Di modul ini kamu menyiapkan tiga alat utama yang akan dipakai sepanjang bootcamp: VS Code (editor kode), Node.js (menjalankan JavaScript di luar browser), dan DevTools browser (konsol untuk mencoba kode dan mencari bug di halaman web).

Konsep inti

Versi alat yang dipakai di materi ini

Versi di bawah dicek dari sumber resmi pada 23 Oktober 2026. Saat kamu membaca ini, angkanya mungkin sudah naik. Itu normal, ikuti saja versi terbaru dari situs resminya.

LTS (Long Term Support) adalah versi yang didukung lama dan stabil, cocok untuk belajar dan untuk produksi. Current berisi fitur terbaru tapi masa dukungannya lebih pendek. Pemula sebaiknya memakai LTS. Node.js merilis versi mayor baru setiap enam bulan. Versi bernomor genap akan naik status menjadi LTS, jadi cek tanda "LTS" di nodejs.org saat kamu mengunduh.

Visual Studio Code (VS Code)

VS Code adalah editor kode gratis buatan Microsoft yang paling banyak dipakai developer web. Fitur yang langsung berguna:

• Syntax highlighting: kode diberi warna sesuai jenisnya, jadi lebih mudah dibaca.
• IntelliSense: saran otomatis saat mengetik, misalnya mengetik console. langsung memunculkan log.
• Terminal terintegrasi: buka dengan menu Terminal → New Terminal atau shortcut Ctrl+`.
• Explorer: panel file di kiri untuk mengelola folder proyek.

Ekstensi yang disarankan (cari di panel Extensions, ikon kotak-kotak di kiri, atau Ctrl+Shift+X):

Setelah Prettier terpasang, aktifkan Format On Save: buka Settings (Ctrl+,), cari "format on save", lalu centang.

Pengguna macOS: ganti Ctrl dengan Cmd di semua shortcut.

Node.js

Node.js adalah runtime yang memungkinkan JavaScript berjalan di komputermu tanpa browser, memakai mesin V8 yang sama dengan Chrome.

Cara instal:

1. Buka https://nodejs.org, unduh installer bertanda LTS sesuai sistem operasi (Windows, macOS, atau Linux).
2. Jalankan installer, klik Next sampai selesai. Biarkan opsi bawaan, termasuk "Add to PATH".
3. Tutup lalu buka ulang terminal supaya perintah node dikenali.
4. Cek dengan perintah node -v dan npm -v.

Bersama Node.js ikut terpasang npm (Node Package Manager), alat untuk memasang library buatan orang lain. npm akan banyak dipakai di fase berikutnya.

Alternatif untuk yang sering berganti versi: nvm (macOS/Linux) atau nvm-windows. Tool ini memungkinkan beberapa versi Node.js terpasang sekaligus.

Terminal: perintah dasar

Terminal adalah tempat kamu mengetik perintah teks. Beberapa perintah wajib:

Browser DevTools Console

Setiap browser modern punya DevTools. Buka dengan F12 atau Ctrl+Shift+J (Chrome/Edge, langsung ke tab Console). Di macOS gunakan Cmd+Option+J. Di tab Console kamu bisa:

• Mengetik kode JavaScript dan langsung melihat hasilnya (disebut REPL: Read-Eval-Print Loop).
• Melihat pesan console.log dan error dari halaman web.
• Menekan panah atas untuk memanggil perintah sebelumnya.

Node.js juga punya REPL. Ketik node saja di terminal, lalu tekan Ctrl+C dua kali untuk keluar.

Tiga cara menjalankan JavaScript

1. Console DevTools: cocok untuk mencoba potongan kode singkat.
2. File .js dengan Node.js: node app.js. Ini cara utama di Fase 1.
3. File .js yang dihubungkan ke HTML: dibuka di browser, cocok untuk kode yang berinteraksi dengan halaman.

Contoh kode

Langkah membuat folder kerja dan memeriksa instalasi:

# Cek versi (angka kamu boleh lebih baru)
node -v
# → v24.22.1
npm -v
# → 11.19.1

# Buat folder kerja dan masuk ke dalamnya
mkdir belajar-js
cd belajar-js

# Buka folder ini di VS Code (perintah 'code' tersedia setelah VS Code terpasang)
code .

Buat file halo.js di folder tersebut:

// halo.js, program pertama
console.log("Halo, dunia!");
console.log("Node.js versi:", process.version);
console.log("2 + 3 =", 2 + 3);

Jalankan dari terminal VS Code:

node halo.js
# → Halo, dunia!
# → Node.js versi: v24.22.1
# → 2 + 3 = 5

# Mode watch (stabil sejak Node.js 22): file dijalankan ulang otomatis setiap disimpan
node --watch halo.js

Menjalankan JavaScript di browser lewat file HTML. Buat index.html dan script.js di folder yang sama:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belajar JS</title>
</head>
<body>
  <h1>Buka Console (F12) untuk melihat hasil</h1>
  <!-- defer: script dijalankan setelah HTML selesai dibaca -->
  <script src="script.js" defer></script>
</body>
</html>

// script.js
console.log("Halo dari browser!");
document.querySelector("h1").textContent = "JavaScript sudah jalan!";

Klik kanan index.html di VS Code, pilih Open with Live Server, lalu buka Console untuk melihat pesannya.

Kesalahan umum

1. "node is not recognized" / "command not found". Terminal dibuka sebelum instalasi selesai. Tutup dan buka ulang terminal, atau restart komputer. Pastikan opsi "Add to PATH" tercentang saat instalasi.
2. Menjalankan node halo.js dari folder yang salah. Muncul error Cannot find module. Cek folder aktif dengan pwd atau dir, lalu cd ke folder yang berisi file.
3. Lupa menyimpan file. VS Code menandai file yang belum disimpan dengan titik putih di tab. Simpan dengan Ctrl+S sebelum menjalankan, atau aktifkan Auto Save di menu File.
4. Menjalankan kode browser di Node.js. document dan alert tidak ada di Node.js. Kode DOM harus dijalankan lewat HTML di browser.
5. Mengunduh versi Current padahal masih belajar. Pilih yang bertanda LTS supaya stabil dan sesuai dengan tutorial.

Latihan

1. Mudah, Pasang Node.js LTS dan VS Code, lalu catat hasil node -v dan npm -v di komputermu.
2. Sedang, Buat file profil.js yang mencetak nama, kota asal, dan alasan belajar JavaScript di tiga baris terpisah. Jalankan dengan node.
3. Menantang, Buat index.html + script.js yang mengubah judul halaman (document.title) menjadi namamu dan mencetak "Halaman siap" ke Console. Lalu jalankan script.js yang sama dengan node script.js dan jelaskan kenapa muncul error.

// profil.js
console.log("Nama: Sari");
console.log("Kota: Medan");
console.log("Alasan: ingin membuat aplikasi sendiri");

node profil.js
# → Nama: Sari
# → Kota: Medan
# → Alasan: ingin membuat aplikasi sendiri

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belum diubah</title>
</head>
<body>
  <script src="script.js" defer></script>
</body>
</html>

// script.js
document.title = "Sari";
console.log("Halaman siap");

Ringkasan

• VS Code adalah editor utama. Pasang ekstensi ESLint, Prettier, Live Server, dan Error Lens.
• Pasang Node.js versi LTS (saat materi ditulis: v24.22.1) dari nodejs.org, lalu cek dengan node -v.
• Jalankan file dengan node namafile.js, atau node --watch namafile.js supaya otomatis jalan ulang.
• DevTools Console (F12) dipakai untuk mencoba kode dan membaca error di browser.
• Kode yang memakai document atau alert hanya jalan di browser.