บทที่ 01 — ติดตั้งเครื่องมือ + เขียนโปรแกรมแรก

← บทที่ 00 | สารบัญ | บทที่ 02: Variables + Types →

บทที่แล้วเป็นทฤษฎี — บทนี้ลงมือทำจริง เราจะติดตั้งเครื่องมือ และเขียนโปรแกรม JavaScript แรก

อ่านจบบทนี้คุณจะ:

• รู้ 3 วิธีรัน JavaScript — แต่ละวิธีใช้ตอนไหน
• ติดตั้ง Node.js เป็น
• เขียนและรันโปรแกรมแรกได้
• เข้าใจ package.json — หัวใจของทุกโปรเจกต์ JavaScript
• ตั้งค่า VS Code ให้เขียน JavaScript สบาย

ใช้เวลา 60-90 นาที รวมติดตั้ง — ทำตามไปด้วยทุกขั้นตอน

---

Part 1: 3 วิธีรัน JavaScript

ก่อนติดตั้งอะไร — ต้องเข้าใจก่อนว่า JavaScript รันได้ 3 ที่ และแต่ละที่เหมาะกับงานต่างกัน

วิธี	ต้องติดตั้งไหม	เหมาะกับ
Browser Console	ไม่ต้อง (มีในเบราว์เซอร์อยู่แล้ว)	ทดลองโค้ดสั้น ๆ เร็ว ๆ
Node.js	ต้องติดตั้ง	เขียนโปรแกรมจริง, โปรเจกต์
Online Playground	ไม่ต้อง (ใช้เว็บ)	เรียน, แชร์โค้ดให้คนอื่นดู

เราจะเริ่มจากวิธีที่ง่ายที่สุดก่อน — Browser Console

---

Part 2: Browser Console — ทดลองได้ทันที

วิธีนี้ไม่ต้องติดตั้งอะไรเลย — เบราว์เซอร์ทุกตัวมี JavaScript engine อยู่แล้ว

2.1 เปิด DevTools

DevTools (Developer Tools) คือ "เครื่องมือนักพัฒนา" ที่ซ่อนอยู่ในเบราว์เซอร์ทุกตัว:

• Chrome / Edge / Firefox: กดปุ่ม F12
• หรือ: คลิกขวาบนหน้าเว็บ → เลือก "Inspect" / "ตรวจสอบ"
• บน Mac: Cmd + Option + I

พอเปิดมาแล้ว — มองหา tab ที่ชื่อ "Console" (แท็บ Console) แล้วคลิกเข้าไป

💡 ถ้าเบราว์เซอร์คุณใช้ภาษาไทย ชื่อแท็บอาจเป็น "คอนโซล" หรือคำใกล้เคียง — แต่ตำแหน่งเดิม (มักอยู่ถัดจาก "Elements"/"องค์ประกอบ")

2.2 ลองพิมพ์โค้ดแรก

ใน Console — พิมพ์คำสั่งนี้แล้วกด Enter:

console.log("สวัสดี JavaScript!");

คุณควรเห็นข้อความ "สวัสดี JavaScript!" ปรากฏขึ้น 🎉

อธิบาย: console.log(...) คือคำสั่ง "แสดงข้อความออกมา" — เป็นคำสั่งที่คุณจะใช้บ่อยที่สุดในการเรียน (ไว้ดูว่าโปรแกรมทำงานถึงไหน ได้ค่าอะไร)

2.3 Console เป็นเครื่องคิดเลขได้ด้วย

ลองพิมพ์:

2 + 3

Console จะตอบ 5 ทันที — ไม่ต้องใช้ console.log ด้วยซ้ำ เพราะ Console จะแสดงผลของบรรทัดสุดท้ายให้อัตโนมัติ

ลองอันอื่น:

"JavaScript".length        // ได้ 10 — นับจำนวนตัวอักษร
10 * 5                      // ได้ 50

2.4 พิมพ์โค้ดหลายบรรทัด

ถ้าอยากพิมพ์หลายบรรทัดใน Console:

• กด Enter = รันโค้ด
• กด Shift + Enter = ขึ้นบรรทัดใหม่ (ยังไม่รัน)

ลอง:

let a = 10;
let b = 20;
a + b

→ Console ตอบ 30

2.5 ข้อดี/ข้อจำกัดของ Console

✅ ดี: ทดลองเร็วมาก ไม่ต้องติดตั้ง — เวลาสงสัยว่า "โค้ดบรรทัดนี้ได้ผลอะไร" เปิด Console ลองเลย

❌ จำกัด: เขียนโปรแกรมยาว ๆ ไม่สะดวก, ปิดเบราว์เซอร์โค้ดหาย

→ Console เหมาะกับ "ทดลอง" — เขียนโปรแกรมจริงต้องใช้ Node.js

---

Part 3: ติดตั้ง Node.js

Node.js คือ "ตัวรัน JavaScript นอกเบราว์เซอร์" (จากบทที่ 00) — เราต้องมีมันเพื่อเขียนโปรแกรมจริง

3.1 เช็คก่อนว่ามีอยู่แล้วไหม

เปิด Terminal (บน Windows คือ PowerShell, บน Mac คือ Terminal) แล้วพิมพ์:

💡 วิธีเปิด Terminal: Windows — กดปุ่ม Win แล้วพิมพ์ PowerShell แล้วกด Enter (หรือกด Win+X แล้วเลือก "Windows Terminal") | Mac — กด Cmd+Space แล้วพิมพ์ Terminal แล้วกด Enter

node --version

• ถ้าเห็นเลขเวอร์ชัน เช่น v22.11.0 → มีอยู่แล้ว ข้ามไป Part 4
• ถ้าเห็น 'node' is not recognized (ข้อความที่เห็นบน Windows) หรือ command not found (บน Mac/Linux) — ทั้งสองแบบแปลว่ายังไม่ได้ติดตั้ง Node.js หรือ PATH ยังไม่ถูกเซ็ต → ยังไม่มี ติดตั้งกันเลย

3.2 วิธีติดตั้ง

Windows และ Mac (วิธีง่ายสุด — ใช้ Installer)

1. ไปที่ https://nodejs.org
2. ดาวน์โหลดเวอร์ชัน LTS (LTS = Long-Term Support = เวอร์ชันที่เสถียร แนะนำสำหรับมือใหม่) — เช็คเวอร์ชัน LTS ล่าสุดได้ที่ nodejs.org ก่อนติดตั้งเสมอ (ตอนเขียนหนังสือเล่มนี้คือ Node.js 22 แต่เวอร์ชัน LTS จะเปลี่ยนไปเรื่อย ๆ)
3. เปิดไฟล์ที่ดาวน์โหลด → กด Next ไปเรื่อย ๆ จนเสร็จ

Mac (ทางเลือก — ใช้ Homebrew)

ถ้าคุณมี Homebrew อยู่แล้ว:

brew install node

Linux (Ubuntu/Debian)

⚠️ ความปลอดภัย: คำสั่ง curl ... | bash คือการดาวน์โหลด script จากอินเทอร์เน็ตแล้วรันทันที — ควรตรวจสอบ script ก่อนรันเสมอ และดูคำสั่งล่าสุดที่ https://github.com/nodesource/distributions แทนการ copy จากหนังสือเพื่อให้ได้เวอร์ชันที่ทันสมัย

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs

3.3 ตรวจสอบว่าติดตั้งสำเร็จ

ปิด Terminal เก่า เปิดใหม่ แล้วพิมพ์:

node --version
npm --version

ควรเห็นเลขเวอร์ชันทั้งคู่ เช่น:

v22.11.0
10.9.0

• node = ตัวรัน JavaScript
• npm = ตัวจัดการ library (โค้ดสำเร็จรูปที่คนอื่นเขียนไว้ให้ใช้ เช่น โค้ดจัดการวันที่ โค้ดเรียก API — เราดาวน์โหลดมาใช้ได้ฟรี) — มากับ Node.js อัตโนมัติ

3.4 nvm — เครื่องมือจัดการหลายเวอร์ชัน (ทางเลือก)

ถ้าในอนาคตคุณทำงานหลายโปรเจกต์ที่ใช้ Node.js คนละเวอร์ชัน — มีเครื่องมือชื่อ nvm (Node Version Manager) ช่วยสลับเวอร์ชันได้:

# ติดตั้ง nvm (Mac/Linux)
# ⚠️ ห้าม copy คำสั่งด้านล่างตรง ๆ — เช็ค version ล่าสุดที่ https://github.com/nvm-sh/nvm ก่อน
# แล้วแทน v0.40.1 ด้วยเลข version ล่าสุดที่เจอ (ตัวอย่างนี้แค่โครงคำสั่ง)
# เปิด Terminal แล้วรันคำสั่งนี้ (curl = คำสั่งดาวน์โหลดไฟล์จากอินเทอร์เน็ตผ่าน Terminal):
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# Windows ใช้ nvm-windows: https://github.com/coreybutler/nvm-windows

nvm install 22       # ติดตั้ง Node 22
nvm install 20       # ติดตั้ง Node 20 ด้วย
nvm use 22           # สลับมาใช้เวอร์ชัน 22

ตอนนี้ยังไม่จำเป็น — แต่รู้ไว้ว่ามี

---

Part 4: Node REPL (โหมดทดสอบโค้ด) — เครื่องคิดเลข JavaScript ใน Terminal

หลังติดตั้ง Node.js — คุณรัน JavaScript ใน Terminal ได้แล้ว

พิมพ์ node เฉย ๆ (ไม่มีอะไรต่อท้าย):

node

จะเห็น:

Welcome to Node.js v22.11.0.
Type ".help" for more information.
>

ตอนนี้คุณอยู่ใน REPL (Read-Eval-Print Loop — อ่าน-ประมวล-แสดงผล-วนซ้ำ — โหมดพิมพ์โค้ดทีละบรรทัดแล้วเห็นผลทันที) — เหมือน Browser Console แต่ใน Terminal:

> 2 + 3
5
> "hello".toUpperCase()
'HELLO'
> let x = 10
undefined
> x * 5
50

ออกจาก REPL: พิมพ์ .exit หรือกด Ctrl + D

→ REPL เหมาะกับทดลองโค้ดสั้น ๆ เหมือน Browser Console แต่ไม่ต้องเปิดเบราว์เซอร์

---

Part 5: เขียนโปรแกรมแรกเป็นไฟล์

REPL ดีสำหรับทดลอง — แต่โปรแกรมจริงต้องเขียนเป็น "ไฟล์" เพื่อเก็บไว้ใช้ซ้ำ

5.1 สร้างโฟลเดอร์โปรเจกต์

ใน Terminal:

💡 เมื่อเปิด Terminal ขึ้นมาครั้งแรก คุณจะอยู่ที่ home directory ของคุณโดยอัตโนมัติ เช่น C:\Users\ชื่อผู้ใช้ บน Windows หรือ /Users/ชื่อผู้ใช้ บน Mac — โฟลเดอร์ที่สร้างด้วย mkdir จะอยู่ตรงนั้น พิมพ์ cd (Windows) หรือ pwd (Mac/Linux) เพื่อดูว่าอยู่ที่ไหน

mkdir hello-js
cd hello-js

mkdir = สร้างโฟลเดอร์, cd = เข้าไปในโฟลเดอร์

5.2 สร้างไฟล์ JavaScript

สร้างไฟล์ชื่อ hello.js — เปิดด้วย text editor (ถ้ายังไม่มี ข้ามไปติดตั้ง VS Code ใน Part 7 ก่อนได้ แล้วกลับมาทำต่อ — หรือใช้ Notepad/TextEdit ชั่วคราวก็ได้) แล้วใส่:

💡 วิธีสร้างไฟล์ใหม่ใน VS Code: เปิด VS Code → File → Open Folder → เลือกโฟลเดอร์ hello-js → คลิกไอคอนสร้างไฟล์ (รูป + ข้าง explorer ด้านซ้าย) หรือ File → New File → พิมพ์ชื่อ hello.js → กด Enter

console.log("สวัสดี! นี่คือโปรแกรม JavaScript แรกของผม");

let name = "Alice";
let age = 25;
console.log("ชื่อ:", name);
console.log("อายุ:", age);
console.log("ปีหน้าอายุ:", age + 1);

5.3 รันไฟล์

ใน Terminal (ต้องอยู่ในโฟลเดอร์ hello-js):

node hello.js

ผลลัพธ์:

สวัสดี! นี่คือโปรแกรม JavaScript แรกของผม
ชื่อ: Alice
อายุ: 25
ปีหน้าอายุ: 26

🎉 ยินดีด้วย — คุณรันโปรแกรม JavaScript จากไฟล์ได้แล้ว!

อธิบาย: node hello.js = "บอก Node.js ให้รันไฟล์ hello.js" — Node.js อ่านไฟล์จากบนลงล่าง ทำคำสั่งทีละบรรทัด

---

Part 6: package.json — หัวใจของทุกโปรเจกต์

เมื่อโปรเจกต์โตขึ้น — มีหลายไฟล์ ใช้ library ของคนอื่น — เราต้องการ "ไฟล์ที่อธิบายโปรเจกต์" นั่นคือ package.json

6.1 สร้าง package.json

ในโฟลเดอร์โปรเจกต์ พิมพ์:

npm init -y

npm init = "เริ่มต้นโปรเจกต์", -y = "ตอบ yes ทุกคำถาม" (ใช้ค่า default)

จะได้ไฟล์ package.json หน้าตาแบบนี้ (สำหรับ npm 10+):

{
  "name": "hello-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

อธิบายแต่ละบรรทัด:

• name — ชื่อโปรเจกต์
• version — เวอร์ชันของโปรเจกต์
• description — คำอธิบาย
• main — ไฟล์หลักของโปรเจกต์
• scripts — คำสั่งลัด (อธิบาย Part 6.3)
• keywords, author, license — ใช้ตอนเผยแพร่ library (ตอนนี้ปล่อยว่างไว้ได้)

💡 สังเกตว่า npm init -y บน npm 10+ ไม่ใส่ "type" ให้ — แปลว่าค่าเริ่มต้นคือ CommonJS (วิธีเก่า) เราจะเพิ่ม "type": "module" เองใน Part 6.2 ถัดไป (npm รุ่นเก่ากว่านี้บางตัวอาจใส่ "type": "commonjs" มาให้ ผลเหมือนกัน)

6.2 type: module — โหมดสมัยใหม่

JavaScript มี 2 วิธีแบ่งโค้ดออกเป็นไฟล์ เปรียบได้กับการนำเข้าสูตรอาหารจากหนังสือเล่มอื่น — แทนที่จะเขียนทุกอย่างในไฟล์เดียว เราแบ่งโค้ดเป็นไฟล์แล้ว "นำเข้า" มาใช้ (ศัพท์เรียกว่า "module system" — เรียนละเอียดบทที่ 10):

• CommonJS — วิธีเก่าของ Node.js ใช้ require() / module.exports
• ES Modules (ESM) — วิธีมาตรฐานสมัยใหม่ ใช้ import / export (ดูตัวอย่างใน 6.4)

แนะนำให้ใช้ ESM — เปิดไฟล์ package.json แล้วเพิ่มบรรทัด "type": "module":

{
  "name": "hello-js",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

→ หนังสือเล่มนี้ใช้ ESM (import/export) เป็นหลัก — เราจะใช้ import จริง ๆ ในหัวข้อ 6.4 ถัดไป — ถ้าไม่ตั้ง "type": "module" ไว้ก่อนตอนนั้น จะเจอ SyntaxError: Cannot use import statement outside a module

6.3 npm scripts — คำสั่งลัด

scripts ใน package.json คือ "ปุ่มลัด" — แทนที่จะพิมพ์คำสั่งยาว ๆ ทุกครั้ง

{
  "scripts": {
    "start": "node hello.js",
    "dev": "node --watch hello.js"
  }
}

แล้วรันด้วย:

npm start          # = node hello.js
npm run dev        # = node --watch hello.js (--watch = แก้ไฟล์แล้วรันใหม่อัตโนมัติ)

💡 ต้องใช้ Node.js เวอร์ชันใด: --watch ใช้ได้ตั้งแต่ Node.js 18.11+ (เสถียรใน Node 20+) — ถ้าใช้เวอร์ชันเก่ากว่านั้นจะไม่รู้จัก flag นี้ หนังสือเล่มนี้ตั้งฐานที่ Node.js 22 LTS ขึ้นไป

💡 npm start กับ npm test พิมพ์สั้นได้ (ไม่ต้องมี run) — ส่วน script อื่นต้องมี npm run <ชื่อ>

6.4 ติดตั้ง Library ของคนอื่น

พลังของ JavaScript คือ — มี library ของคนอื่นให้ใช้นับล้านตัว (เก็บใน "npm registry")

ลองติดตั้ง library ตัวอย่าง:

npm install dayjs

เกิดอะไรขึ้น:

1. npm ดาวน์โหลด library dayjs (library จัดการวันเวลา)
2. เก็บไว้ในโฟลเดอร์ node_modules/
3. บันทึกใน package.json ว่าโปรเจกต์นี้ใช้ dayjs

ใช้งานในโค้ด:

import dayjs from "dayjs";
console.log(dayjs().format("YYYY-MM-DD"));   // แสดงวันที่วันนี้

💡 import คืออะไร: คำสั่ง import X from "..." คือวิธี "ดึง" โค้ดจากไฟล์/library อื่นมาใช้ — ใช้ได้ เฉพาะตอนตั้ง "type": "module" ใน package.json แล้วเท่านั้น (Part 6.2) ถ้าไม่ตั้ง จะเจอ SyntaxError. เรียนลึกเรื่องนี้บทที่ 10 (Modules)

6.5 node_modules และ .gitignore

โฟลเดอร์ node_modules/ เก็บ library ทั้งหมด — มันใหญ่มาก (อาจหลายร้อย MB)

→ อย่าเก็บ node_modules/ ขึ้น Git (Git = ระบบติดตามเวอร์ชันโค้ด ใช้บันทึกประวัติการแก้และทำงานเป็นทีม — เรียนแยกในคู่มือ Git) — ถ้ายังไม่เคยใช้ Git เลย ข้ามหัวข้อ 6.5 นี้ไปก่อนได้ ไม่กระทบการเรียน JavaScript ในบทต่อ ๆ ไป

สร้างไฟล์ .gitignore (ไฟล์บอก Git ว่าให้เพิกเฉยไฟล์/โฟลเดอร์ไหน) แล้วใส่:

node_modules/

แล้วทำไมไม่ต้องเก็บ? — เพราะ package.json บันทึกไว้แล้วว่าใช้ library อะไรบ้าง — คนอื่นแค่รัน npm install ก็ได้ node_modules/ กลับมาครบ

---

Part 7: ติดตั้ง VS Code

เราเขียนโค้ดด้วย "text editor" ได้ — แต่ถ้าใช้ editor ที่ออกแบบมาเพื่อเขียนโค้ดโดยเฉพาะ จะสบายกว่ามาก. ที่นิยมที่สุดคือ VS Code

7.1 ติดตั้ง

เครื่องมือเขียนโค้ดที่แนะนำสำหรับมือใหม่คือ VS Code (ฟรี ใช้ได้ทุกระบบ) — ดาวน์โหลดและติดตั้งตามขั้นตอนด้านล่าง แล้วค่อยเพิ่ม extension ในหัวข้อถัดไป:

ไปที่ https://code.visualstudio.com → ดาวน์โหลด → ติดตั้ง

7.2 Extension ที่ควรติดตั้ง

Extension = "ปลั๊กอินเสริม" ของ VS Code — เปิด VS Code → คลิกไอคอน Extensions ด้านซ้าย (รูปบล็อก 4 อัน) → ค้นหาและติดตั้ง:

• Prettier — จัดรูปแบบโค้ดให้สวยอัตโนมัติ (เว้นวรรค ขึ้นบรรทัดใหม่ ฯลฯ) — ตั้งให้ทำงานตอนกด Save ได้ใน 7.3
• ESLint — ตรวจจับข้อผิดพลาดและสไตล์ที่ไม่ดีในโค้ดแบบ realtime ขีดเส้นใต้แดงให้
• Error Lens — แสดง error ตรงบรรทัดที่ผิดเลย (ไม่ต้องเลื่อนเมาส์ไปดู)

💡 ทั้ง Prettier และ ESLint จะทำงาน "อัตโนมัติเบื้องหลัง" — Prettier จัดฟอร์แมตทุกครั้งที่กด Save (ถ้าเปิดตามข้อ 7.3), ESLint ขีดเส้นเตือนทันทีที่พิมพ์ผิด ไม่ต้องสั่งเอง

7.3 ตั้งค่าให้เขียนสบาย

เปิด VS Code Settings (กด Ctrl + , หรือ Cmd + ,) → คลิกไอคอนไฟล์มุมขวาบน (Open Settings JSON) — หรือวิธีที่เชื่อถือได้กว่า: กด Ctrl + Shift + P แล้วพิมพ์ Preferences: Open User Settings (JSON) แล้ว Enter → ใส่:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2
}

• formatOnSave — กด save แล้วจัดรูปแบบโค้ดให้สวยอัตโนมัติ
• tabSize: 2 — ใช้การเยื้อง 2 ช่อง (มาตรฐานของ JavaScript)

---

Part 8: รันโค้ดในเบราว์เซอร์ (HTML + JavaScript)

ถ้าจะเขียน JavaScript สำหรับหน้าเว็บ — ต้องเอาไปใส่ในไฟล์ HTML

สร้างไฟล์ index.html:

<!DOCTYPE html>
<html>
<head>
  <title>หน้าแรกของผม</title>
</head>
<body>
  <h1 id="greeting">กำลังโหลด...</h1>

  <script>
    // JavaScript เขียนตรงนี้
    document.getElementById("greeting").textContent = "สวัสดีจาก JavaScript!";
  </script>
</body>
</html>

เปิดไฟล์นี้ด้วยเบราว์เซอร์ (ดับเบิลคลิก) — คุณจะเห็น "สวัสดีจาก JavaScript!" แทนที่ "กำลังโหลด..."

อธิบาย: tag <script> คือที่ที่เราใส่ JavaScript ในหน้าเว็บ — เราจะลงลึกเรื่องนี้ในบทที่ 12 (DOM)

8.1 แยก JavaScript ออกเป็นไฟล์ต่างหาก

จริง ๆ เราไม่ควรเขียน JavaScript ปนใน HTML — แยกเป็นไฟล์:

app.js:

document.getElementById("greeting").textContent = "สวัสดีจากไฟล์แยก!";

index.html:

<body>
  <h1 id="greeting">กำลังโหลด...</h1>
  <script src="app.js" defer></script>
</body>

<script src="app.js" defer> — โหลด JavaScript จากไฟล์ app.js

• defer = "รอให้ HTML โหลดเสร็จก่อนค่อยรัน JavaScript" — แนะนำให้ใส่เสมอ

---

Part 9: Online Playground (ทางเลือก ไม่ต้องติดตั้ง)

ถ้ายังไม่อยากติดตั้งอะไร หรืออยากแชร์โค้ดให้คนอื่นดู — ใช้ playground บนเว็บ:

• StackBlitz (stackblitz.com) — เหมือน VS Code บนเว็บ รัน Node.js ได้
• CodePen (codepen.io) — เหมาะกับ HTML + CSS + JS
• JSFiddle (jsfiddle.net) — ทดลองโค้ดสั้น ๆ

→ ดีสำหรับเรียน แต่โปรเจกต์จริงควรติดตั้งในเครื่อง

---

Part 10: Lab — ลงมือทำ

Lab 1: โปรแกรมทักทาย

สร้างไฟล์ greet.js:

let name = "ใส่ชื่อคุณ";
let year = 2026;
let birthYear = 2000;

console.log("สวัสดี " + name);
console.log("ปีนี้ปี " + year);
console.log("คุณอายุ " + (year - birthYear) + " ปี");

รันด้วย node greet.js — แก้ค่าตัวแปรแล้วรันใหม่ ดูผลเปลี่ยน

Lab 2: รับ input จาก command line

// receive-name.js
let name = process.argv[2];     // รับค่าตัวที่ index 2 จาก command line

if (name) {                      // (if = ตรวจเงื่อนไข — เรียนละเอียดบทที่ 04)
  console.log("สวัสดี " + name + "!");
} else {
  console.log("สวัสดี คนแปลกหน้า!");
}

รัน:

node receive-name.js Alice      # → สวัสดี Alice!
node receive-name.js             # → สวัสดี คนแปลกหน้า!

💡 ไฟล์ receive-name.js นี้ไม่ได้ใช้ import/export เลย — จึงรันได้ปกติไม่ว่า package.json จะตั้ง "type": "module" ไว้หรือไม่ (กฎเรื่อง ESM ใน Part 6.2 มีผลเฉพาะไฟล์ที่ใช้ import/export เท่านั้น)

process.argv คืออะไร — process คือ object พิเศษของ Node.js — มันเก็บข้อมูลเกี่ยวกับโปรแกรมที่กำลังรันอยู่ (เรียกว่า "โปรเซส") ส่วน argv เป็น array (รายการค่า) ที่เก็บคำที่ผู้ใช้พิมพ์ตามหลังชื่อไฟล์ตอนรันคำสั่งจาก command line:

index	ค่า	ตัวอย่างเมื่อรัน node receive-name.js Alice
[0]	path เต็มของตัว node	C:\Program Files\nodejs\node.exe
[1]	path เต็มของไฟล์สคริปต์	C:\...\receive-name.js
[2]	argument ตัวแรกที่ผู้ใช้พิมพ์	"Alice"
[3]	argument ตัวที่สอง (ถ้ามี)	—

→ เลยเริ่มเก็บ "ค่าจากผู้ใช้" ตั้งแต่ index [2] เป็นต้นไป (argument = ค่าที่ส่งให้โปรแกรม/ฟังก์ชัน — เรียนละเอียดบทที่ 05)

💡 ตารางนี้ถูกต้องเมื่อรันแบบ node script.js ตรง ๆ — ถ้ารันผ่าน npm/npx หรือมี flag พิเศษ ตำแหน่งใน argv อาจขยับได้

Lab 3: ตั้งค่าโปรเจกต์เต็มรูปแบบ

mkdir my-project
cd my-project
npm init -y

แก้ package.json — เพิ่ม "type": "module" และ script:

{
  "type": "module",
  "scripts": {
    "start": "node index.js"
  }
}

สร้าง index.js:

console.log("โปรเจกต์ตั้งค่าเรียบร้อย!");

รัน npm start

---

Part 11: Checkpoint

1. JavaScript รันได้ 3 ที่ — อะไรบ้าง? แต่ละที่เหมาะกับงานแบบไหน?
2. เปิด Browser Console ทำยังไง?
3. console.log(...) ทำอะไร?
4. Node.js คืออะไร? npm คืออะไร?
5. REPL คืออะไร? ต่างจากการรันไฟล์ยังไง?
6. package.json เก็บข้อมูลอะไรบ้าง?
7. "type": "module" ทำอะไร?
8. npm scripts มีประโยชน์ยังไง?
9. ทำไมไม่ควรเก็บ node_modules/ ขึ้น Git?
10. <script src="app.js" defer> — defer ทำอะไร?

---

Part 12: สรุปบทนี้

• JavaScript รันได้ 3 ที่: Browser Console (ทดลองเร็ว), Node.js (เขียนโปรแกรมจริง), Online Playground (เรียน/แชร์)
• Node.js = ตัวรัน JavaScript นอกเบราว์เซอร์ — npm มาด้วยกัน ใช้จัดการ library
• REPL (node เปล่า ๆ) = เครื่องคิดเลข JavaScript ใน Terminal
• รันไฟล์ด้วย node ชื่อไฟล์.js
• package.json = ไฟล์อธิบายโปรเจกต์ — สร้างด้วย npm init -y
• ใส่ "type": "module" เพื่อใช้ ESM (มาตรฐานสมัยใหม่)
• npm scripts = ปุ่มลัดสำหรับคำสั่งที่ใช้บ่อย
• อย่าเก็บ node_modules/ ขึ้น Git — ใส่ใน .gitignore
• ใช้ VS Code + extensions (Prettier, ESLint) ให้เขียนโค้ดสบาย

บทต่อไป — เราจะเรียนรากฐานของภาษา: ตัวแปร และ ชนิดข้อมูล

---

← บทที่ 00 | สารบัญ | บทที่ 02: Variables + Types →