Materi tersebut pada dasarnya menjelaskan persiapan lingkungan kerja untuk belajar JavaScript menggunakan Visual Studio Code (VS Code). Saya jelaskan dari dasar sampai alasan setiap langkahnya supaya tidak sekadar mengikuti tutorial.

1. Apa yang akan dipelajari?

Dalam materi ini ada beberapa tujuan utama:

1. Memahami apa itu code editor.

2. Memahami perbedaan text editor dan code editor.

3. Memilih code editor untuk belajar JavaScript.

4. Menginstal Visual Studio Code.

5. Membuat folder project JavaScript.

6. Membuat file:

   • index.html
   • style.css

7. Menghubungkan HTML dengan CSS.

8. Menjalankan HTML di browser.

9. Memasang extension VS Code:

   • Auto Save on Window Change
   • Live Server

10. Memahami konsep localhost dan port secara sederhana.

2. Apa itu Code Editor?

Sebelum belajar JavaScript, kita membutuhkan tempat untuk menulis kode.

Sebenarnya JavaScript bisa ditulis menggunakan program sederhana seperti Notepad.

Misalnya kita menulis:

let nama = "Manoa";
console.log(nama);

Notepad bisa menyimpan tulisan tersebut.

Namun, Notepad tidak dibuat khusus untuk programmer.

Karena itu kita menggunakan code editor.

Code editor adalah apa?

Code editor adalah aplikasi untuk menulis dan mengedit kode program yang memiliki berbagai fitur khusus untuk membantu programmer.

Contohnya:

• Visual Studio Code
• Sublime Text
• Atom
• Brackets

Dalam kursus tersebut, digunakan:

Visual Studio Code (VS Code)

3. Text Editor vs Code Editor

Ini bagian yang penting.

Text editor

Text editor pada dasarnya digunakan untuk menulis teks biasa.

Contohnya:

Notepad

Misalnya kita menulis:

let nama = "Budi";
let umur = 20;
console.log(nama);

Notepad hanya melihatnya sebagai teks.

Code editor

Code editor memahami bahwa tulisan tersebut merupakan kode program dan memberikan bantuan kepada programmer.

Misalnya kode:

let nama = "Budi";
console.log(nama);

VS Code dapat memberikan:

• warna pada syntax
• autocomplete
• indentation
• pengecekan kesalahan tertentu
• saran kode
• format kode
• navigasi file
• extension
• integrasi dengan Git
• terminal
• dan banyak fitur lainnya

Jadi sederhananya:

Text editor = tempat menulis teks. Code editor = tempat menulis kode + berbagai alat bantu programmer.

4. Kenapa menggunakan Code Editor?

Bayangkan kita memiliki kode yang sangat panjang:

function hitungTotal(harga, jumlah) {
    let total = harga * jumlah;
    return total;
}

Kalau menggunakan code editor, kode akan dibuat lebih mudah dibaca.

VS Code misalnya akan memberikan warna berbeda untuk:

function
let
return

Hal ini disebut syntax highlighting.

Tujuannya bukan sekadar membuat kode terlihat bagus.

Syntax highlighting membantu kita mengenali bagian-bagian kode dengan cepat.

5. Apakah JavaScript membutuhkan software khusus?

Menariknya, tidak harus.

Untuk memulai JavaScript, sebenarnya kita hanya membutuhkan:

1. Text editor

Untuk menulis kode.

Misalnya:

• Notepad
• VS Code
• Sublime Text

2. Browser

Untuk menjalankan JavaScript dalam lingkungan browser.

Contohnya:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

Jadi secara teori:

Text editor + Browser = sudah bisa belajar JavaScript.

Tetapi dalam praktiknya, menggunakan VS Code jauh lebih nyaman.

6. Mengapa kursus memilih Visual Studio Code?

Dalam materi tersebut ada beberapa pilihan:

• Atom
• Sublime Text
• Visual Studio Code
• Brackets

Semuanya merupakan code editor.

Tetapi instruktur memilih Visual Studio Code.

Alasannya karena VS Code memiliki banyak fitur dan extension yang sangat membantu dalam pengembangan web.

Jadi kalau ingin mengikuti tutorial secara persis, sebaiknya menggunakan VS Code juga.

7. Menginstal Visual Studio Code

Langkah pertama adalah mengunduh VS Code dari situs resminya.

Setelah installer selesai di-download:

1. Buka installer.
2. Terima license agreement.
3. Pilih lokasi instalasi.
4. Pilih Start Menu folder.
5. Lanjutkan instalasi.
6. Klik Install.
7. Tunggu sampai selesai.
8. Klik Finish.

Setelah itu VS Code akan terbuka.

8. Membuat Project JavaScript

Setelah VS Code terinstal, kita membutuhkan sebuah project folder.

Dalam tutorial dibuat struktur seperti:

Desktop
└── JavaScript Source
    └── JavaScript Basics

Folder:

JavaScript Basics

akan menjadi folder project.

Kenapa perlu folder project?

Karena project biasanya tidak hanya terdiri dari satu file.

Nantinya kita bisa memiliki:

JavaScript Basics
├── index.html
├── style.css
├── script.js
└── images

Jadi semua file yang berkaitan dengan project disimpan dalam satu tempat.

9. Membuka Project di VS Code

Di VS Code kita bisa memilih:

File → Open Folder

Kemudian cari:

JavaScript Source
└── JavaScript Basics

Pilih folder:

JavaScript Basics

Setelah dibuka, folder tersebut akan muncul di bagian Explorer VS Code.

Explorer adalah tempat kita melihat file dan folder project.

10. Apa maksud “I trust the authors”?

Ketika membuka folder project untuk pertama kalinya, VS Code bisa menampilkan pertanyaan:

Do you trust the authors of the files in this folder?

Ini merupakan fitur keamanan VS Code.

Beberapa project dapat mengandung konfigurasi atau kode yang dijalankan oleh VS Code.

Kalau folder tersebut adalah project milik kita sendiri atau sumbernya terpercaya, kita bisa memilih:

Yes, I trust the authors.

11. Membuat file index.html

Sekarang dibuat file:

index.html

Apa itu HTML?

HTML adalah bahasa markup yang digunakan untuk menyusun struktur halaman web.

Contohnya:

<h1>Hello World</h1>

Artinya kita membuat heading.

Dalam project web sederhana, index.html biasanya menjadi halaman utama.

Strukturnya kurang lebih:

JavaScript Basics
├── index.html
└── style.css

12. Apa fungsi shortcut Shift + 1 lalu Tab?

Dalam materi disebutkan:

tekan Shift + 1 lalu Tab

Tujuannya adalah membuat template HTML secara otomatis.

Di VS Code, biasanya kita bisa menggunakan Emmet.

Misalnya mengetik:

!

kemudian menekan:

Tab

VS Code dapat menghasilkan struktur HTML dasar seperti:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Jadi kita tidak perlu mengetik semuanya dari awal.

13. Mengubah title HTML

Kemudian bagian:

<title>Document</title>

diubah menjadi:

<title>JS Fundamentals</title>

title adalah judul halaman yang biasanya terlihat pada tab browser.

Misalnya:

JS Fundamentals

akan muncul sebagai nama tab.

14. Membuat H2

Kemudian pada bagian <body> dibuat:

<h2>Fundamentals of JavaScript</h2>

h2 adalah heading level 2.

HTML memiliki heading:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Secara umum:

h1
↓
h2
↓
h3
↓
h4
...

15. Membuat file CSS

Selanjutnya dibuat file:

style.css

Sekarang struktur project menjadi:

JavaScript Basics
├── index.html
└── style.css

CSS digunakan untuk mengatur tampilan halaman web.

Contohnya:

h2 {
    color: red;
}

Artinya:

Semua elemen h2 diberi warna merah.

16. Menghubungkan HTML dengan CSS

Ini konsep yang sangat penting.

File HTML dan CSS merupakan dua file yang berbeda.

HTML:

<h2>Fundamentals of JavaScript</h2>

CSS:

h2 {
    color: red;
}

Supaya HTML mengetahui CSS mana yang digunakan, kita menambahkan:

<link rel="stylesheet" href="style.css">

Biasanya diletakkan di dalam <head>:

<head>
    <title>JS Fundamentals</title>
    <link rel="stylesheet" href="style.css">
</head>

Perhatikan:

href="style.css"

Ini memberitahu browser:

“Gunakan file style.css yang ada di folder ini.”

17. Kenapa H2 menjadi merah?

Karena CSS memiliki:

h2 {
    color: red;
}

Browser membaca HTML:

<h2>Fundamentals of JavaScript</h2>

Kemudian browser membaca CSS:

h2 {
    color: red;
}

Browser akhirnya menampilkan:

Fundamentals of JavaScript

dengan warna merah.

Secara sederhana:

index.html
     │
     │ menggunakan
     ↓
style.css
     │
     ↓
Browser
     │
     ↓
Halaman web

18. Menjalankan HTML di Browser

Tutorial kemudian membuka:

index.html

dengan browser.

Browser akan membaca HTML tersebut dan menampilkannya.

Misalnya hasilnya:

Fundamentals of JavaScript

dengan warna merah.

Namun ada satu masalah.

Saat kita membuka file secara langsung, URL browser biasanya terlihat seperti lokasi file di komputer.

Contohnya secara konsep:

file:///C:/Users/.../JavaScript Basics/index.html

Ini disebut membuka file secara langsung melalui filesystem.

19. Masalah ketika melakukan perubahan

Misalnya kita mengubah:

<h2>Fundamentals of JavaScript</h2>

menjadi:

<h2>Welcome to JavaScript</h2>

Kalau belum disimpan, browser belum tentu mendapatkan perubahan terbaru.

Biasanya kita harus:

1. edit kode
2. save
3. kembali ke browser
4. refresh

Ini cukup merepotkan jika dilakukan berkali-kali.

Karena itu tutorial memasang extension.

20. Extension pertama: Auto Save on Window Change

Extension pertama adalah:

Auto Save on Window Change

Tujuannya sederhana.

Biasanya:

Edit
 ↓
Save
 ↓
Browser

Dengan extension ini:

Edit
 ↓
Pindah window
 ↓
Otomatis Save
 ↓
Browser

Jadi kita tidak perlu terus-menerus menekan:

Ctrl + S

setiap kali berpindah dari VS Code ke browser.

21. Apa itu Extension di VS Code?

Extension adalah tambahan fitur untuk VS Code.

Anggap VS Code sebagai smartphone.

Smartphone memiliki fungsi dasar.

Kemudian kita bisa memasang aplikasi tambahan.

Kurang lebih konsepnya seperti itu.

VS Code memiliki fitur dasar, kemudian kita bisa memasang extension untuk menambahkan kemampuan tertentu.

Misalnya extension untuk:

• JavaScript
• Python
• Git
• Live Server
• formatter
• debugging
• dan lain-lain.

Extension dapat dicari melalui bagian:

Extensions

di VS Code.

22. Extension kedua: Live Server

Ini bagian yang sangat penting.

Extension kedua adalah:

Live Server

Fungsinya menjalankan project web melalui development server lokal.

Sebelumnya kita membuka:

index.html

secara langsung.

Dengan Live Server, halaman dijalankan melalui server lokal.

URL-nya dapat terlihat seperti:

http://127.0.0.1:5500/index.html

23. Apa itu 127.0.0.1?

127.0.0.1 adalah alamat khusus yang menunjuk ke:

komputer kita sendiri

Alamat ini biasa disebut:

localhost

Jadi secara sederhana:

127.0.0.1
      ↓
localhost
      ↓
komputer kita sendiri

Misalnya:

http://127.0.0.1:5500

Artinya kira-kira:

“Buka server yang sedang berjalan di komputer saya.”

24. Apa itu port 5500?

Sekarang kita melihat:

127.0.0.1:5500

Bagian:

127.0.0.1

adalah alamat komputer lokal.

Sedangkan:

5500

adalah port.

Bayangkan komputer seperti sebuah gedung.

Komputer
│
├── Pintu 80
├── Pintu 443
├── Pintu 3000
├── Pintu 5000
└── Pintu 5500

Port adalah semacam “pintu” yang digunakan oleh aplikasi/server untuk berkomunikasi.

Dalam tutorial, Live Server menggunakan:

port 5500

sehingga URL menjadi:

http://127.0.0.1:5500

25. Keuntungan Live Server

Misalnya kita menulis:

<h2>Fundamentals of JavaScript</h2>

kemudian kita ubah menjadi:

<h2>Belajar JavaScript</h2>

Dengan Live Server, perubahan bisa langsung terlihat di browser setelah file tersimpan.

Bahkan dengan konfigurasi/editor yang sesuai, browser dapat melakukan live reload.

Alurnya menjadi:

VS Code
   │
   │ edit
   ↓
index.html
   │
   │ save
   ↓
Live Server
   │
   ↓
Browser
   │
   ↓
Tampilan diperbarui

Ini sangat membantu ketika membuat website.

26. Mengapa Live Server lebih baik daripada double-click HTML?

Bukan berarti double-click index.html itu salah.

Untuk HTML sederhana, itu bisa saja dilakukan.

Namun ketika mulai membuat aplikasi web yang lebih kompleks, menjalankan project melalui server lokal lebih sesuai dengan lingkungan pengembangan web.

Misalnya:

file:///...

berbeda konsep dengan:

http://127.0.0.1:5500/...

Dengan Live Server kita belajar menggunakan lingkungan yang lebih mirip dengan bagaimana website dilayani melalui web server.

27. Gambaran keseluruhan project

Setelah mengikuti tutorial, project kita kira-kira seperti ini:

JavaScript Basics
│
├── index.html
│
└── style.css

Isi index.html secara sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>JS Fundamentals</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h2>Fundamentals of JavaScript</h2>
</body>
</html>

Sedangkan style.css:

h2 {
    color: red;
}

Kemudian:

index.html
     │
     ├── struktur halaman
     │
     └── menggunakan style.css
                    │
                    ↓
                 CSS
                    │
                    ↓
                 Browser

28. Hal yang perlu benar-benar dipahami

Jangan hanya menghafalkan langkah tutorial. Pahami peran setiap komponen.

29. Lalu di mana JavaScript-nya?

Nah, ini yang perlu diperhatikan.

Pada lecture ini sebenarnya belum banyak menulis JavaScript.

Kita baru mempersiapkan lingkungan untuk belajar JavaScript.

Nantinya kita akan membuat file:

JavaScript Basics
├── index.html
├── style.css
└── script.js

Kemudian HTML dapat menghubungkan JavaScript:

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

Misalnya script.js berisi:

console.log("Hello JavaScript");

Kemudian browser menjalankan JavaScript tersebut.

Jadi pembagian tugasnya menjadi:

HTML
 ↓
Struktur

CSS
 ↓
Tampilan

JavaScript
 ↓
Perilaku / interaksi

Contohnya sebuah tombol:

HTML       → membuat tombol
CSS        → mempercantik tombol
JavaScript → membuat tombol melakukan sesuatu

30. Inti materi dalam satu alur

Kalau seluruh lecture ini diringkas menjadi satu alur:

Belajar JavaScript
       ↓
Butuh tempat menulis kode
       ↓
Gunakan Code Editor
       ↓
Pilih Visual Studio Code
       ↓
Install VS Code
       ↓
Buat folder project
       ↓
Buka folder di VS Code
       ↓
Buat index.html
       ↓
Buat style.css
       ↓
Hubungkan HTML + CSS
       ↓
Jalankan di Browser
       ↓
Install Auto Save
       ↓
Install Live Server
       ↓
Project siap digunakan
       ↓
Mulai belajar JavaScript

Kesimpulan paling sederhananya

Lecture ini belum fokus mengajarkan sintaks JavaScript, tetapi menyiapkan “meja kerja” sebelum mulai coding.

Yang paling penting untuk diingat:

VS Code = tempat kita menulis kode. HTML = struktur halaman. CSS = tampilan halaman. JavaScript = logika dan interaksi halaman. Browser = tempat kita melihat/menjalankan hasilnya. Live Server = membantu menjalankan project web melalui server lokal dan mempermudah melihat perubahan secara langsung.

Jadi setelah lecture ini, kamu seharusnya sudah memiliki VS Code + sebuah project + HTML + CSS + Live Server, dan siap masuk ke bagian berikutnya: menulis program JavaScript pertama.

Saya juga bisa membuat gambar/diagram alur Visual Studio Code → HTML/CSS → Live Server → Browser agar konsepnya lebih mudah dipahami.