09: JS Syntax & Variables

1. JavaScript คืออะไร

JavaScript (JS) คือภาษาที่ทำให้เว็บ "ทำงานได้" ในคอร์สนี้จะยึดหลักตาม JavaScript (ES6) หากเปรียบเว็บไซต์เป็น การสร้างบ้าน 1 หลัง

HTML

คือ "โครงสร้างบ้าน"

เสาเข็ม, คาน, ผนังปูน, หลังคา (ถ้าไม่มีของพวกนี้ บ้านก็ตั้งอยู่ไม่ได้)

CSS

คือ "ตกแต่งภายใน"

ทาสี, ปูกระเบื้อง, ผ้าม่าน, เฟอร์นิเจอร์ (ทำให้บ้านน่าอยู่)

JavaScript

คือ "ระบบไฟฟ้า & กลไก"

ไฟเปิด-ปิดอัตโนมัติ, ลิฟต์, กริ่งหน้าบ้าน (สิ่งที่โต้ตอบได้)

Javacript คือกลไกการโต้ตอบระหว่างผู้ใช้กับหน้าเว็บ

เกร็ดความรู้: ES6 คืออะไร?

ES6 (ECMAScript 2015) คือเวอร์ชันอัปเกรดครั้งใหญ่ของ JavaScript ที่ทำให้เขียนโค้ดได้ "ง่ายขึ้น สั้นลง และปลอดภัยขึ้น"

แบบเก่า (ES5)

// 1. สร้างตัวแปร (มีปัญหาเรื่อง Scope)
var name = "Somchai";

// 2. ต่อข้อความ (ยุ่งยาก)
var text = "Hello " + name + "!";

แบบใหม่ (Modern ES6)

// 1. สร้างตัวแปร (ปลอดภัย)
let name = "Somchai";

// 2. ต่อข้อความ (ใช้ Backtick ` )
let text = `Hello ${name}!`;

* ในคอร์สนี้จะใช้แบบ Modern ES6 ทั้งหมด เพื่อให้ทันสมัยและใช้งานได้จริง

2. วิธีใส่ JavaScript ลงใน HTML

สามารถเขียนโค้ดภาษา JavaScript ลงไปในโครงสร้างของหน้าเว็บ (HTML) ได้ 2 วิธีหลัก ๆ

วิธีที่ 1: Internal Script

เหมาะกับโค้ดสั้น ๆ

เขียนแทรกในไฟล์ HTML เลย โดยใช้ tag <script> (นิยมวางไว้ก่อนปิด </body>)

index.html

<body>
  <h1>สวัสดี</h1>

  <script>
      console.log("นี่คือ JavaScript ที่ฝังอยู่ใน HTML");
      alert("ยินดีต้อนรับ!");
  </script>
</body>

วิธีที่ 2: External Script

แนะนำ

แยกโค้ดไปไว้ไฟล์ใหม่ (เช่น script.js) แล้วดึงเข้ามาใช้ เพื่อความเป็นระเบียบ

index.html

<body>
  <h1>สวัสดี</h1>

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

script.js

// ไม่ต้องมี tag <script> แล้ว
console.log("นี่คือ Javascript ที่เขียนอยู่ในไฟล์ js");

Console.log คืออะไร?

console.log() คือคำสั่งพื้นฐานที่สุด เอาไว้ "แอบดูค่าของตัวแปร" การทำงานของโปรแกรม (แสดงผลเฉพาะคนเขียนโค้ดเห็น ไม่โชว์บนหน้าเว็บจริง)

JS

console.log("Hello Console");
console.log(10 + 20); // ผลลัพธ์ 30 จะไปโผล่ใน Console

กดปุ่ม F12 เพื่อเปิด Console

3. Variables (ตัวแปร)

ตัวแปรคือ "กล่องเก็บข้อมูล" ใน JavaScript (ES6) จะใช้แค่ let และ const เท่านั้น!

1. let (กล่องเปิด)

ใช้เก็บค่าที่ "เปลี่ยนแปลงได้" ในอนาคต

JS

let score = 0;
score = 10; // เปลี่ยนค่าได้ ไม่ Error
console.log(score); // 10

2. const (กล่องปิดตาย)

ย่อมาจาก Constant ใช้เก็บค่าที่ "ห้ามเปลี่ยน" ตลอดไป

JS

const pi = 3.14;
pi = 5; // เกิด Error เพราะไม่อนุญาตให้เปลี่ยนค่า

ห้ามใช้ var เด็ดขาด!

var เป็นคำสั่งยุคเก่าที่มีปัญหาเรื่อง Scope (ขอบเขตตัวแปร) ซึ่งทำให้เกิดข้อผิดพลาดได้ง่าย

4. Data Types (ประเภทของข้อมูล)

Type	คำอธิบาย	ตัวอย่าง
String	ข้อความ (ต้องอยู่ใน `""` หรือ `''`)	`let name = "สมชาย";`
Number	ตัวเลข (คำนวณได้เลย ไม่ต้องใส่ quote)	`let age = 25;` `let price = 99.50;`
Boolean	ค่าความจริง (มีแค่ True / False)	`let isLogin = true;`
Null	ค่าว่างเปล่า (ว่างแบบตั้งใจให้ว่าง)	`let user = null;`
Undefined	ยังไม่กำหนดค่า (สร้างตัวแปรไว้เฉย ๆ)	`let score;` (ค่าคือ undefined)

5. Operators (ตัวดำเนินการ)

นอกจาก บวก ลบ คูณ หาร แล้ว JavaScript ยังมีเครื่องหมายพิเศษ (แบบย่อ) ที่ช่วยให้เขียนโค้ดได้ไวขึ้น

1. Arithmetic (คณิตศาสตร์)

`+`, `-`, `*`, `/`	บวกลบคูณหารปกติ
`%` (Modulo)	หารเอาเศษ (เช่น `10 % 3 = 1`)
`**` (Exponent)	ยกกำลัง (เช่น `2 ** 3 = 8`)

2. Assignment (กำหนดค่าแบบย่อ)

เขียนย่อ ๆ ให้ดูโปรฯ ขึ้น

แบบเต็ม	แบบย่อ (นิยม)
`x = x + 5`	`x += 5`
`x = x - 1`	`x -= 1`
`x = x + 1`	`x++` (เพิ่มทีละ 1)

Mini Quiz

ข้อที่ 1: ยกกำลัง

let x = 2;
let y = 3;
console.log(x ** y);

ข้อที่ 2: Modulo + Assignment

let score = 10;
score += 5; 
console.log(score % 4);

Programming Challenge

จงเขียนโค้ดแก้โจทย์ปัญหาต่อไปนี้ลงใน Console (กด F12)

โจทย์ที่ 1: เครื่องคิดเงิน

ลูกค้าซื้อของราคา 350 บาท
จ่ายแบงค์ 500 บาทมา
จงเขียนโค้ดเพื่อคำนวณ เงินทอน (change)

คลิกดูเฉลย

let price = 350;
let cash = 500;
let change = cash - price;

console.log(change); // 150

โจทย์ที่ 2: พื้นที่สี่เหลี่ยม

ห้องนอนเป็นรูปสี่เหลี่ยมจัตุรัส
มีความกว้างด้านละ 4 เมตร
จงคำนวณ พื้นที่ (area) ทั้งหมด (สูตร: ด้าน x ด้าน หรือ ด้านยกกำลัง 2)

คลิกดูเฉลย

let side = 4;
// วิธีที่ 1
let area = side * side; 
// วิธีที่ 2 (เท่กว่า)
let area2 = side ** 2; 

console.log(area); // 16

โจทย์ที่ 3: คู่หรือคี่

มีตัวเลข 15 อยู่ในตัวแปร
อยากรู้ว่าหาร 2 ลงตัวไหม? (เลขคู่/คี่)
จงใช้ Modulo (%) หาเศษที่เหลือ

คลิกดูเฉลย

let num = 15;
let result = num % 2;

console.log(result); 
// ได้ 1 แปลว่าเหลือเศษ (เลขคี่)
// ถ้าได้ 0 แปลว่าลงตัว (เลขคู่)

Workshop: BMI Calculator

เขียนโปรแกรมคำนวณดัชนีมวลกาย (BMI) ลงใน Console

โจทย์:

สร้างตัวแปร weight เก็บน้ำหนัก (kg)
สร้างตัวแปร height เก็บส่วนสูง (cm)
คำนวณ BMI ตามสูตร: น้ำหนัก (kg) / ส่วนสูง (m)²
แสดงผลลัพธ์ด้วย console.log()