Kenapa Harus Setup Environment Dulu?

Sebelum nulis satu baris kode pun, kamu butuh "bengkel kerja" yang pas. Environment adalah kumpulan software (browser, editor code, dll) yang kamu pakai untuk menulis dan menjalankan kode. Kabar baiknya, buat belajar JavaScript dasar, kamu nggak perlu install macam-macam software rumit — cukup 2 hal utama: browser dan text editor.

1. Browser: Tempat JavaScript "Hidup"

Browser adalah software yang kamu pakai untuk membuka website (Chrome, Firefox, Edge, dll), dan ternyata browser juga punya "mesin" bawaan untuk menjalankan JavaScript. Kalau kamu sudah punya Chrome atau Firefox, kamu sudah punya modal utama untuk belajar JavaScript — nggak perlu install apa-apa lagi di bagian ini.

Rekomendasi: pakai Google Chrome, karena tools untuk cek dan debug kode-nya (namanya DevTools) paling lengkap dan banyak dipakai developer. Kalau belum punya, download di google.com/chrome.

2. Text Editor: Tempat Kamu Menulis Kode

Text editor adalah aplikasi khusus untuk menulis kode, beda dengan Word atau Notepad biasa karena punya fitur seperti pewarnaan syntax dan auto-complete yang memudahkan nulis kode. Untuk kelas ini, kita pakai Visual Studio Code (VS Code) — gratis, ringan, dan paling populer di kalangan pemula maupun profesional.

Cara Install VS Code

• Buka code.visualstudio.com
• Klik tombol download sesuai sistem operasimu (Windows/Mac/Linux)
• Install seperti install aplikasi biasa (next-next-finish)
• Buka VS Code untuk pastikan sudah terinstall dengan benar

Extension yang Berguna (Opsional tapi Direkomendasikan)

Di VS Code ada fitur extension, yaitu plugin tambahan yang menambah kemampuan editor. Buka menu Extensions (ikon kotak di sidebar kiri), lalu cari dan install:

• Live Server — supaya kamu bisa lihat perubahan di browser secara otomatis tanpa refresh manual
• Prettier — merapikan format kode otomatis biar rapi dan konsisten

3. Setup Project Pertamamu

Sekarang saatnya bikin folder project. Ikuti langkah ini:

• Buat folder baru di komputer, misalnya kasih nama belajar-javascript
• Buka folder itu lewat VS Code (File > Open Folder)
• Di dalam folder itu, buat 2 file baru: index.html dan script.js

Isi index.html dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belajar JavaScript</title>
</head>
<body>
  <h1>Halo, JavaScript!</h1>

  <script src="script.js"></script>
</body>
</html>

Baris <script src="script.js"></script> ini yang menghubungkan file HTML kamu dengan file JavaScript, jadi kode JS yang kamu tulis nanti bisa "berbicara" dengan halaman web ini.

Isi script.js dengan kode sederhana ini:

console.log("Halo dari JavaScript!");
alert("Environment sudah siap!");

4. Menjalankan dan Mengecek Hasilnya

Ada dua cara untuk melihat hasilnya:

• Cara manual: klik kanan file index.html di file explorer komputer, pilih "Open with" browser (misal Chrome)
• Cara dengan Live Server: klik kanan file index.html di VS Code, pilih "Open with Live Server"

Kalau berhasil, akan muncul popup "Environment sudah siap!" di browser, dan tulisan "Halo, JavaScript!" tampil di halaman.

Cek Console — Tempat "Ngobrol" dengan JavaScript

Console adalah panel di DevTools browser tempat JavaScript menampilkan pesan, hasil perhitungan, atau error — ini akan jadi teman terdekatmu selama belajar. Cara membukanya:

• Klik kanan di halaman browser, pilih "Inspect" atau "Inspect Element"
• Klik tab "Console" di panel yang muncul
• Kamu akan lihat tulisan "Halo dari JavaScript!" muncul di sana — itu hasil dari console.log() yang kamu tulis tadi

console.log() ini akan sering banget kamu pakai ke depannya untuk mengecek nilai atau proses di kodemu, jadi biasakan buka Console setiap kali coding.

Studi Kasus / Latihan

Sekarang coba praktikkan sendiri, langkah-langkahnya:

1. Pastikan Chrome dan VS Code sudah terinstall di komputermu
2. Buat folder baru bernama latihan-modul-1, lalu buat file index.html dan script.js seperti contoh di atas
3. Ubah isi script.js menjadi kode berikut, lalu jalankan:

   console.log("Nama saya: [isi nama kamu]");
   console.log("Hari ini saya mulai belajar JavaScript!");
   alert("Selamat belajar, [isi nama kamu]!");
   

4. Buka file itu di browser, lalu buka Console lewat Inspect Element
5. Pastikan kedua pesan console.log() muncul di Console, dan popup alert() muncul di layar

Kalau semua langkah di atas berhasil tanpa error, selamat — environment kamu sudah siap tempur! Di modul berikutnya kita akan mulai masuk ke konsep dasar JavaScript itu sendiri.