11: Loops & String Methods

1. Loops (การวนซ้ำ)

Loop คือการสั่งให้คอมพิวเตอร์ทำคำสั่งเดิมซ้ำ ๆ จนกว่าจะครบตามที่กำหนด (เหมือนการวิ่งรอบสนาม)

1.1 For Loop (วนแบบรู้รอบ)

ใช้เมื่อทราบจำนวนที่แน่นอนว่าต้องการวนกี่รอบ (เช่น 10 รอบ, 100 รอบ)

JS

Syntax

for (let i = 1; i < 3; i++) {
    console.log("รอบที่ " + i);
}

องค์ประกอบ 3 ส่วน:

จุดเริ่มต้น (Start): let i = 1 (เริ่มนับที่ 1)
เงื่อนไขจบ (Stop): i < 3 (ทำต่อถ้า i ยังน้อยกว่า 3)
การเพิ่มค่า (Step): i++ (จบรอบแล้วบวก i เพิ่มทีละ 1)

1.2 While Loop (วนจนกว่าจะ..)

ใช้เมื่อ ไม่รู้จำนวนรอบที่แน่นอน แต่รู้เงื่อนไขว่าเมื่อไหร่ควรหยุด (เช่น วนไปเรื่อย ๆ จนกว่าพลังงานจะหมด)

JS

let energy = 10;

while (energy > 0) { // ตราบใดที่พลังยังมากกว่า 0 ให้รันโค้ดที่อยู่ในขอบเขตของวงเล็บปีกกา
    console.log("วิ่งอยู่.. พลังเหลือ " + energy);
    energy = energy - 4; // ลดพลังลงเรื่อย ๆ (สำคัญมาก! ถ้าไม่ลดค่าจะวนซ้ำแบบไม่รู้จบ)
}
console.log("พลังหมด หยุดวิ่ง!");

1.3 สั่งหยุดและข้าม (Break & Continue)

บางครั้งเราต้องการแทรกแซงการทำงานของ Loop กลางคัน

🛑 Break (เลิกทำ/หนีออกจาก Loop)

เจอคำสั่งนี้เมื่อไหร่ ให้ จบการวนลูปทันที (ไม่สนเงื่อนไขแล้ว)

JS

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        console.log("เจอเลข 5 แล้ว! พอแค่นี้");
        break; // กระโดดออกจาก Loop เลย
    }
    console.log(i);
}
// ผลลัพธ์: 1, 2, 3, 4, เจอเลข 5... (จบ)

⏭️ Continue (ข้ามรอบนี้)

เจอคำสั่งนี้ ให้ ทิ้งรอบปัจจุบัน แล้วไปเริ่มรอบถัดไปทันที

JS

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        console.log("เลข 3 ไม่เอา ข้ามไป");
        continue; // ข้ามไปรอบที่ 4 เลย (ไม่ทำบรรทัดล่าง)
    }
    console.log("เลข " + i);
}
// ผลลัพธ์: 1, 2, ...ข้าม..., 4, 5

2. String Methods

JavaScript มีเครื่องมือจัดการข้อความที่ทรงพลังมาก

Method	หน้าที่	ตัวอย่าง Code	ผลลัพธ์
`.length`	นับจำนวนตัวอักษร	`"Hello".length`	5
`.toUpperCase()`	แปลงเป็นตัวพิมพ์ใหญ่	`"user".toUpperCase()`	"USER"
`.toLowerCase()`	แปลงเป็นตัวพิมพ์เล็ก	`"USER".toLowerCase()`	"user"
`.includes()`	เช็คว่ามีคำนี้ไหม? (True/False)	`"I love Cat".includes("Cat")`	true
`.split()`	หั่นข้อความออกเป็นส่วน ๆ (Array)	`"A,B,C".split(",")`	["A", "B", "C"]

3. Template Literals

การต่อข้อความแบบใหม่ใน ES6 โดยใช้ Backticks ( ` ) (ปุ่มเปลี่ยนภาษา) แทน Single Quote ' หรือ Double Quote "

จุดเด่นที่ต้องใช้:

1. แทรกตัวแปรง่าย:
ใช้ ${ตัวแปร} แทรกตรงไหนก็ได้ ไม่ต้องพิมพ์ + ให้เมื่อยมือ
2. ขึ้นบรรทัดใหม่ได้เลย:
แค่กด Enter ในโค้ด ข้อความก็จะขึ้นบรรทัดใหม่ตามจริง (ไม่ต้องใช้ \n)

JS

let name = "Somchai";
let score = 80;

// 1. แทรกตัวแปร (Interpolation)
console.log(`User: ${name} Score: ${score}`);

// 2. ขึ้นบรรทัดใหม่ (Multi-line String)
// แค่กด Enter ใน Backticks ได้เลย
let menu = `รายการอาหาร:
- กะเพรา
- ไข่ดาว
- น้ำเปล่า`;

console.log(menu);

Result in Console:
User: Somchai Score: 80
รายการอาหาร:
- กะเพรา
- ไข่ดาว
- น้ำเปล่า

Workshop: โปรแกรมสูตรคูณ

ฝึกใช้ For Loop สร้างสูตรคูณแม่ต่าง ๆ ลงใน Console

โจทย์:

กำหนดตัวแปร let n = 2; (แม่ 2)
ใช้ for loop วนตั้งแต่ i = 1 ถึง 12
ในแต่ละรอบ ให้ console.log ผลคูณออกมาในรูปแบบ:
2 x 1 = 2
2 x 2 = 4
...

กด F12 เพื่อเปิด Console แล้วเขียนโค้ด

JS

let n = 2; // สูตรคูณแม่ 2

console.log(`--- สูตรคูณแม่ ${n} ---`);

//เขียน loop สำหรับสูตรคูณแม่ n

Practice Mission: ระบบเซ็นเซอร์รหัสผ่าน (Password Masker)

สถานการณ์ (Scenario):

"คุณได้รับโจทย์ให้เขียนระบบ ตรวจสอบความปลอดภัย และ ปิดบังรหัสผ่าน เพื่อไม่ให้ใครเห็น (เปลี่ยนเป็นดอกจัน *) ก่อนบันทึกลง Log"

1. ข้อมูลที่มี (Data Input)

กำหนดตัวแปรเก็บรหัสผ่าน (ลองเปลี่ยนเล่นดูได้)

let password = "SuperSecretPassword123";

เงื่อนไขความปลอดภัย:
1. ต้องยาวอย่างน้อย 8 ตัวอักษร
2. ต้องไม่มีคำว่า "password" หรือ "1234" (ไม่ปลอดภัย)

2. สิ่งที่ต้องทำ (Algorithm)

Step 1: ใช้ if ตรวจสอบความปลอดภัย (ใช้ .length และ .includes())
Step 2: ถ้าไม่ผ่าน ให้แสดง Error Message
Step 3: ถ้าผ่าน ให้สร้างตัวแปร masked = "" (ค่าว่าง)
Step 4: ใช้ for loop วนตามจำนวนตัวอักษรของรหัสผ่าน ในแต่ละรอบให้เติมดาว * ใส่ตัวแปร masked
Step 5: แสดงผล "Password accepted: ****************"