Flow Control 4 - Program Looping

สวัสดี ครับ ไม่ได้เขียนซะนานเลยเนื่องจากโปรเจคที่ทำอยู่ค่อนข้างเร่ง 1 โปรเจค และก็กำลังจะ luanch อยู่อีก 1 โปรเจคครับ วันนี้พอมีเวลาว่าจะเขียนอีกให้ได้มากที่สุดครับ ติดตามกันด้วยนะครับ อิอิ

ActionScript 3.0 Program Looping

Program Looping นั้นมีประโยชน์อย่างไร ขอให้เรามาดูรูปตัวอย่างนี้กันก่อนนะครับ

ในรูปด้านบนนี้คือ Triangular Number นั่นเองครับ เราสามารถพูดได้ว่า 

• Triangular Number ขั้นที่ 1 มีค่าเท่ากับ 1
• Triangular Number ขั้นที่ 2 มีค่าเท่ากับ 3
• Triangular Number ขั้นที่ 3 มีค่าเท่ากับ 6
• Triangular Number ขั้นที่ 4 มีค่าเท่ากับ 10
• Triangular Number ขั้นที่ 5 มีค่าเท่ากับ 15
• Triangular Number ขั้นที่ 6 มีค่าเท่าไหร่ครับ?

พอจะนึกกันออกใช่มั้ยครับ เมื่อวิเคราะห์แล้วเราจะทราบว่าโครงสร้างของ Triangular Number มีลักษณะดังนี้

• Triangular Number ขั้นที่ 1 มีค่าเท่ากับ 1
• Triangular Number ขั้นที่ 2 มีค่าเท่ากับ 1 + 2 = 3
• Triangular Number ขั้นที่ 3 มีค่าเท่ากับ 1 + 2 + 3 = 6
• Triangular Number ขั้นที่ 4 มีค่าเท่ากับ 1 + 2 + 3 + 4 = 10
• Triangular Number ขั้นที่ 5 มีค่าเท่ากับ 1 + 2 + 3 + 4 + 5 = 15
• Triangular Number ขั้นที่ 6 มีค่าเท่ากับ 1 + 2 + 3 + 4 + 5 + 6 = 21

โอเค Triangular Number ขั้นที่เท่าไหร่ก็ตามจะมีค่าเท่ากับ 1 + 2 + 3 + 4 + ต่อๆ ไปเรื่อยๆ จนถึงตัวเลขเดียวกับขั้นของ Triangular Number ที่ต้องการหานั่นเองครับ หรือเขียนให้ดู งงๆ ตามหลักคณิตศาสตร์ได้เป็น

Tn = 1 + 2 + 3 + 4 + ... + (n - 1) + n

 เอาหละ ทีนี้ถ้าเราอยากจะเขียนโปรแกรมแสดงผลค่า Triangular Number ตั้งแต่ขั้นที่ 1 จนถึงขั้นที่ 5 จะเขียนได้ยังไง

ลองเขียนแบบนี้ก็ได้ รับรองถูกต้องแน่นอนไม่มีปัญหา

var t1:int = 1;

var t2:int = 1 + 2;

var t3:int = 1 + 2 + 3;

var t4:int = 1 + 2 + 3 + 4;

var t5:int = 1 + 2 + 3 + 4 + 5;

trace("t1 = " + t1);

trace("t2 = " + t2);

trace("t3 = " + t3);

trace("t4 = " + t4);

trace("t5 = " + t5);

และเมื่อลองรันโปรแกรมดูก็จะได้ผลดังภาพด้านล่างนี้

คราวนี้สมมติโจทย์ยากขึ้นมาอีกหน่อย ถ้าเราอยากจะเขียนโปรแกรมแสดงผลค่า Triangular Number ขั้นขั้นที่ 100 หละครับ เขียนได้มั้ยครับ

ยัง ได้อยู่ไม่มีปัญหา แต่เหนื่อยหน่อยใช่มั้ยครับ แล้วถ้าเราอยากจะแสดงผลค่า Triangular Number ขั้นที่ 1,000 หรือขั้นที่ 2,000 หละครับ

เอาหละสิ เหงื่อเริ่มตกหละทีนี้ จะเขียนยังไงไหว

Program Looping มันจึงมีไว้เพื่อแก้ปัญหาการทำซ้ำหลายๆ ครั้งแบบนี้โดยเฉพาะครับ

Program Looping

สำหรับภาษา ActionScript 3.0 นั้น มีวิธีเขียนลูปหลักๆ อยู่ 3 วิธี ตาม Keyword และ Syntax ที่มันมีให้ ได้แก่

• for
• while
• do

ข้อควรระวัง การเขียนโปรแกรมเป็นลูป หากเขียนผิดพลาดอาจจะทำให้โปรแกรมของคุณติดลูปที่ไม่มีวันหยุดและหลุดออกจาก ลูปได้นะครับ ซึ่งอาจจะทำให้คอมคุณค้างไปเลยได้ เพราะฉะนั้นขอให้เขียนตามตัวอย่าง อย่างระมัดระวังนะครับ อิอิ

เรามาดูกันโดยเริ่มจาก for กันก่อนครับ

for

ตัวอย่างการเขียน for เป็นดังนี้ครับ

ตัวอย่าง for 1

var i:int;
for (i = 0; i < 10; i++)
{
    trace("i = " + i);
}

ผลที่ได้

สำหรับ for นั้นปกติเราก็จะมีตัวแปรตัวหนึ่งเป็นตัววิ่งลูป ซึ่งเมื่อการวนลูปแต่ละรอบเสร็จสิ้นจะทำการเพิ่มค่า หรือลดค่าตัววิ่งลูปนี้ (ส่วนใหญ่ทีละ 1 แต่จริงๆ แล้วจะเท่าไหร่ก็ได้) โดยลูปจะจบลงก็ต่อเมื่อ Expression ตรงกลาง (ในตัวอย่างคือ i < 10) เป็น false ก็จะออกจากลูปครับ

เจ้าตัวแปรที่ใช้เป็นตัววิ่งลูปนี้ก็มักจะตั้งชื่อมันว่า i, j, k อะไรประมาณนี้ครับ ผมก็ไม่เข้าใจเหมือนกันว่าทำไม อิอิ หากใครทราบรบกวนบอกผมด้วยจะเป็นพระคุณอย่างมากครับ

และก็ในบางที เราอาจจะประกาศตัวแปรที่จะใช้วิ่งลูปอยู่ใน for เลยก็ได้ครับ มาลองดูอีกตัวอย่างหนึ่งกัน

 ตัวอย่าง for 2

for (var i:int = 5; i < 20; i += 5)
{
    trace("i = " + i);
} 

ผลที่ได้

ลองดูตัวอย่างแบบลบค่าตัววิ่งลูปดูบ้างครับ



 ตัวอย่าง for 3

for (var i:int = 100; i > 0; i -= 10)
{
    trace("i = " + i);
}

ผลที่ได้

สรุปสำหรับ for นั้น Syntax คือ

for (กำหนดค่าเริ่มต้นของตัววิ่งลูป; ลูป Expression ที่ถ้าเป็น true จะทำต่อถ้าเป็น false จะออกจากลูป; เพิ่มค่า(หรือลดค่า)ตัววิ่งลูป)
{
    statement ที่จะทำซ้ำ;
}  

Code ที่จะถูกเรียกเวลารันลูปจะเป็น

1. กำหนดค่าเริ่มต้นของตัววิ่งลูป
2. เช็คลูป Expression ว่าเป็น true หรือ false ถ้าเป็น true ไปข้อถัดไป
3. รัน  statement ที่จะทำซ้ำ
4. เพิ่มค่า(หรือลดค่า)ตัววิ่งลูป
5. เช็คลูป Expression ว่าเป็น true หรือ false ถ้าเป็น true ไปข้อถัดไป
6. รัน statement ที่จะทำซ้ำ
7. เพิ่มค่า(หรือลดค่า)ตัววิ่งลูป
8. เช็คลูป Expression ว่าเป็น true หรือ false ถ้าเป็น true ไปข้อถัดไป
9. รัน statement ที่จะทำซ้ำ
10. เพิ่มค่า(หรือลดค่า)ตัววิ่งลูป
11. เช็คลูป Expression ว่าเป็น true หรือ false ถ้าเป็น true ไปข้อถัดไป
12. รัน statement ที่จะทำซ้ำ
13. เพิ่มค่า(หรือลดค่า)ตัววิ่งลูป
14. เช็คลูป Expression ว่าเป็น true หรือ false ถ้าเป็น true ไปข้อถัดไป
15. ...
16. ...
17. ...
18. ...
19. ...
20. เช็คลูป Expression ว่าเป็น true หรือ false ถ้าเป็น false หยุดลูปและออกจากลูป  

 กลับมาที่ปัญหาของ Triangular Number กันครับ ถ้าเราเขียนด้วย for ลูป สามารถเขียนได้ดังนี้

ตัวอย่างหาค่า Triangular Number ด้วย for

var n:int = 5;
var result:int = 0;
for (var i:int = 1; i <= n; i++)
{
    result += i;
}
trace("result for triangular number at " + n + " is = " + result); 

ผลที่ได้ 

ถ้าอยากหาค่า Triangular Number ขั้นที่เท่าไหร่ก็แค่เปลี่ยนค่า n ดูนะครับ

อ้าว แต่แบบนี้หาค่าของ Triangular Number ขั้นที่ n ได้ แล้วถ้าจะแสดงค่าของ Triangular Number ตั้งแต่ขั้นที่ 1 ถึงขั้นที่ n หละ เขียนได้มั้ย?

คำ ตอบก็คือไอ้เขียนได้มั้ยหนะมันได้อยู่แล้วครับ แต่เขียนยังไงนี่สิประเด็น จะเขียนยังไงคุณลองนึกดูก่อนครับ อิอิ เวลาเจอโจทย์แบบนี้มันก็รู้สึกเหมือนเรากำลังเล่นเกม Puzzle ดีๆ นี่เอง ลองหาวิธีผ่านด่านกันดูเองก่อนนะครับ แล้วค่อยดูเฉลยด้านล่างต่อไป บางทีคุณอาจจะเขียนไม่เหมือนผมก็ได้ แต่ถ้าได้ผลลัพธ์เช่นกันก็ไม่มีปัญหาอะไรครับ เพราะ 100 คนเขียนโปรแกรมออกมาเหมือนกันแต่ Code อาจจะไม่เหมือนกันเลยก็ได้นะครับเป็นเรื่องปกติธรรมดามาก



เฉลยๆๆ

ตัวอย่างหาค่า Triangular Number ขั้นที่ 1 ถึง ขั้นที่ n ด้วย for 

var n:int = 5;
for (var i:int = 1; i <= n; i++)
{
    var result:int = 0;
    for (var j:int = 1; j <= i; j++)
    {
        result += j;
    }
    trace("result for triangular number at " + n + " is = " + result);
}

ผลที่ได้

วิธีที่ผมใช้ก็คือใช้ for ซ้อน for นั่นเองครับ อิอิ บาง คนอาจจะบอก เฮ้ย! ทำอย่างนี้ได้ด้วยหรอเนี่ย ไม่บอกตั้งแต่แรกไม่งั้นก็คิดออกแล้ว ตรงนี้ก็เป็นประเด็นเล็กๆ อย่างนึงที่เวลาคุณเขียนโปรแกรมจริงๆ แล้วเนี่ยจะพบบ่อยมาก นั่นก็คือ "จะเขียนยังไง" ซึ่งคุณอาจจะไม่มีคนให้ถาม หรือต้องหาวิธีเอง วิธีการที่เราจะสามารถตอบคำถามได้เองว่าจะเขียนยังไงหรือทำอย่างนั้นอย่าง นี้ได้หรือเปล่านั่นก็คือ "ต้องลอง" ครับ ไม่ลองก็ไม่รู้ นะครับผม

ก็คงจบเรื่อง for เท่านี้ก่อนนะครับ มาต่อการวนลูปด้วย while กันต่อเลยดีกว่าครับ

while

เริ่ม กันด้วยตัวอย่างอีกเช่นเคยครับ โดยผมจะให้ผลลัพธ์ที่ได้เป็นเหมือนกับตัวอย่างของ for นะครับ เพื่อจะได้เทียบกันแบบ shot ต่อ shot เลยว่า เขียนให้ได้ผลเหมือนกันโดยใช้ for กับ while มันเขียนต่างกันยังไงบ้าง


ตัวอย่าง while 1

var i:int = 0;
while (i < 10)
{
    trace("i = " + i);
    i++;
}

ผลที่ได้ 

ดูตัวอย่างที่ 2 ต่อกันเลยนะครับ

ตัวอย่าง while2

var i:int = 5;
while (i < 20)
{
    trace("i = " + i);
    i += 5;
}

ผลที่ได้

และต่อที่ตัวอย่างที่ 3 ครับ

 ตัวอย่าง while3

var i:int = 100;
while (i > 0)
{
    trace("i = " + i);
    i -= 10;
}

ผลที่ได้

สรุปสำหรับ while นั้น Syntax คือ


กำหนดค่าเริ่มต้นของตัววิ่งลูป;
while (ลูป Expression ที่ถ้าเป็น true จะทำต่อถ้าเป็น false จะออกจากลูป)
{
    statement ที่จะทำซ้ำ; 
    เพิ่มค่า(หรือลดค่า)ตัววิ่งลูป;
} 

เอา หละถ้าจะใช้  while เขียนหาค่า Triangular Number ดูหละ รวมถึงการใช้ while เขียนให้แสดงค่า Triangular Number ตั้งแต่ขั้นที่ 1 ถึงขั้นที่ n จะเขียนยังไง ผมให้เป็นแบบฝึกหัดลองเขียนกันดูนะครับ!!

do

สำหรับ do ลูป จะใกล้เคียงกับ while ลูปครับ หรือบางทีเค้าจะเรียกกันว่า do...while มากกว่า do เฉยๆ ซะอีกเพราะว่าเวลาเขียนจะใช้ Keyword ทั้ง do และ while ครับ

do ลูป จะทำการรัน Code ตรงส่วน statement ที่จะทำซ้ำก่อน แล้วค่อยตรวจสอบลูป Expression ที่ถ้าเป็น true จะวนลูปต่อถ้าเป็น false จะออกจากลูป ทีหลังครับ ซึ่งก็แตกจาก for และ while ด้วยเช่นกัน เพราะทั้ง for loop และ while loop จะทำการตรวจสอบลูป Expression ก่อน แล้วค่อยทำ statement ที่จะทำซ้ำ

ลองมาดูตัวอย่าง do กันครับ

ตัวอย่าง do 1

var hp:int = 50;
do
{
    trace("attack!");
    hp -= 10;
}
while (hp > 0)
trace("die...");

ผลที่ได้

ตัวอย่าง นี้แสดงถึง Syntax การเขียน do...while ครับ โดยที่มาถึงเราก็จะ attack! ก่อนเลย 1 ทีซึ่งจะทำให้ hp ลดลง 10 หลังจากนั้นถึงจะทำการตรวจสอบดูว่าอยากมันยังไม่ตาย (hp ยังมากกว่า 0 อยู่) ก็ให้ทำการวนลูปอัดซ้ำไปเรื่อยๆ จนกว่ามันจะตายนั่นเองครับ อิอิ โปรแกรมนี้โหดสะใจเลยใช่มั้ยครับ ฮ่าๆ

ส่วน ใหญ่แล้วเวลาเขียนโปรแกรมวนลูปเราก็ไม่มีข้อกำหนดตายตัวว่าจะต้องใช้ for, while หรือ do ครับ ขึ้นอยู่กับ Requirement หรือผลลัพธ์ของโปรแกรมที่เราต้องการ รวมถึงความถนัดและความชอบส่วนตัวมากกว่าว่าชอบใช้อะไรมากกว่ากัน ไม่มีผิด-ถูกครับ (แต่สำหรับการเป็นโปรแกรมเมอร์ระดับโปรหรือ Expert นั้นก็อาจจะมีการเขียน Code ที่เรียกว่าดีน้อยกับดีมากหรือดีเยี่ยมอยู่ครับ ไว้อนาคตค่อยพูดถึงครับ หากมีโอกาส)

อย่าง ไรก็ตามผมขอจบเรื่อง Program Looping ไว้เท่านี้ละกันนะครับ อาจจะพูดถึง while กับ do น้อยหน่อย แต่ Concept แล้วทั้ง for, while และ do ไม่ค่อยต่างกันมากครับ ยังไงคุณก็ "ลอง" เขียนเล่นเพื่อทำความคุ้นเคยกันดูละกันนะครับผม

ขอบคุณครับ ไว้พบกันใหม่ครับ ^^

Flow Control 3 - Conditional Statement ด้วย switch case

Conditional Statement

มาต่อกับ Conditional Statement ใน ActionScript 3.0 อีกคำสั่งหนึ่งนั่นก็คือ switch case ครับ

switch case

สำหรับ switch case นั้น จะมีลักษณะคล้ายๆ กับการใช้ if, else if, else if, else if, ..., else ครับ ลองมาดู Syntax กันก่อนนะครับ

switch (condition)
{
    case condition 1:
        statement1;
        break;
    case condition 2:
        statement2;
        break;
    case condition 3:
        statement3;
        break;
    default:
        statement4;
        break;
}

นี่ก็คือ Syntax มาตรฐานของคำสั่ง switch case ครับ ผมทำให้ Keyword เป็นตัวหนาและเอียงเพื่อให้ดูง่ายกัน Keyword ของคำสั่ง switch case ได้แก่ switch, case, default และ break ครับ โปรดสังเกตุด้วยว่าคำสั่ง switch case นั้นจะต้องมีปีกกา { } ครอบด้วยนะครับ และข้างหลัง case condition กับ default จะเป็นโคลอน (:) นะครับ ลองดูตัวอย่างกันครับ

ตัวอย่างที่ 1

// Day is in 1 - 7;
var day:int = 1;
            
switch (day)
{
    case 1:
        trace("Play games");
        break;
    case 2:
        trace("Go to work");
        break;
    case 3:
        trace("Visit customers");
        break;
    case 4:
        trace("Go to hospital");
        break;
    case 5:
        trace("Go to police station");
        break;
    case 6:
        trace("Go to pub");
        break;
    case 7:
        trace("Go travel");
        break;
    default:
        trace("Invalid day.");
        break;
}

Output
Play games 

Recap ตัวอย่างที่ 1
คงจะคุ้นๆ กันนะครับ สำหรับตัวอย่างที่ 1 นี้มันก็คือโปรแกรมเดียวกับตัวอย่างของ if, else if, else ในบทความเรื่อง Conditional Statement ด้วย if else นั่นเองครับ โดยที่เราเปลี่ยนวิธีเขียนจาก if else มาใช้ switch case แทนครับ จะเห็นได้ว่าไม่ว่าคุณจะเขียนโดยใช้คำสั่ง if else หรือ switch case หากคุณเข้าใจตัวคำสั่งและแนวคิดก็สามารถเขียนโปรแกรมให้ทำงานได้เหมือนๆ กันครับ

default

คำสั่ง default นั้นเราจะเขียนหรือไม่เขียนก็ได้ครับไม่ผิด Syntax แต่อย่างใด ขึ้นอยู่กับเราว่าต้องการยังไง หากเขียน default หมายความว่า ถ้าเกิด condition ไม่ตรงกับ case ใดๆ เลยก็จะเข้ามาทำในส่วนของ default ครับ แต่หากไม่เขียน default ไว้แล้ว condition ไม่ตรงกับ case ใดๆ โปรแกรมมันก็จะหลุดจากคำสั่ง switch case ออกมาเลยครับ

ตัวอย่างที่ 2

trace("Playing lucky number!");
var luckyNumber:int = 10;
            
switch (luckyNumber)
{
    case 1:
        trace("Got TV");
        break;
    case 2:
        trace("Got Play Station 3")
        break;
}

Output
Playing lucky number! 

Recap  ตัวอย่างที่ 2
ตัวอย่าง นี้แสดงให้ดูในกรณีที่เราไม่ได้เขียน default ไว้ในชุดคำสั่ง switch case ครับ จะเห็นว่าถ้า luckyNumber ไม่ใช่ 1 หรือ 2 ก็จะไม่มีข้อความอะไรออกมาอีกนอกจาก Playing lucky number! ที่เรา trace ไว้ตั้งแต่ต้นครับ

break 

คำสั่ง break ที่เราเห็นอยู่ในทุก case รวมถึงใน default (ถ้ามี) นั้นมีประโยชน์ของมันอยู่ครับ เพราะถ้าเราไม่เขียนคำสั่ง break ไว้ จะเกิดสิ่งที่เค้าเรียกว่า Fall Through ครับ นั่นก็คือโปรแกรมมันจะรันทะลุ case ลงมาครับ ต้องลองดูตัวอย่างถึงจะเข้าใจครับ

ตัวอย่างที่ 3

trace("Playing lucky number!");
var luckyNumber:int = 1;
            
switch (luckyNumber)
{
    case 1:
        trace("Got TV");
    case 2:
        trace("Got Play Station 3");
    case 3:
        trace("Got Final Fantasy XIII Game");
    default:
        trace("Got tissue");
} 

Output
Playing lucky number!
Got TV
Got Play Station 3
Got Final Fantasy XII Game
Got tissue 

Recap ตัวอย่างที่ 3
ให้เราลองเปลี่ยนค่า luckyNumber เป็นค่าต่างๆ ดู เพื่อสังเกตุ Output ที่ได้ครับ แล้วจะเข้าใจว่า Fall Through มันคืออะไร

ผมลองเปลี่ยนค่า luckyNumber เป็น 3 ให้ดู ณ ที่นี้นะครับ ถ้าเปลี่ยนเป็น 3 จะได้

Output
Playing lucky number!
Got Final Fantasy XIII Game
Got tissue

สรุปของโปรแกรม ตัวอย่างที่ 3 นั้นตีความได้ว่าคนที่ได้รางวัลใหญ่ที่สุดหรือก็คือที่ 1 จะได้รางวัลทุกอย่าง ใครได้รางวัลที่ 2 ก็จะได้รางวัลของที่ 2 ลงมาทุกอย่างยกเว้นของที่ 1 ไล่แบบนี้ไปเรื่อยๆ ซึ่งหากไม่ได้รางวัลเลยก็จะได้กระดาษทิชชู่ปลอบใจ ทั้งนี้คนที่ได้รางวัลใดๆ ไปก็จะได้ทิชชู่ด้วยเช่นกัน

หวังว่าจะเข้าใจคำสั่ง switch case กันนะครับ

แถมท้ายว่า statement ที่อยู่ในแต่ละ case นั้นจะมีกี่บรรทัดก็ได้ครับ ไม่ได้จำเพาะเจาะจงว่าจะต้องมีเพียงบรรทัดเดียวครับ และส่วนตัวผมนั้นผมชอบที่จะเขียนปีกกาเพิ่มไปในแต่ละ case เพื่อให้กวาดสายตาอ่านได้สบายขึ้นครับ เช่น

var action_id:int = 1;
            
switch (action_id)
{
    case 1:
    {
        trace("Patrol");
        break;
    }
    case 2:
    {
        trace("Follow");
        break;
    }
    case 3:
    {
        trace("Attack!");
        trace("Flee!");
        break;
    }
}

อ้อ สุดท้ายของเรื่อง switch case นั้น อยากจะบอกว่า condition ในการ switch นั้นสามารถเป็น int, uint, Number หรือ String ก็ได้นะครับ ไม่ได้จำกัดอยู่แค่ int เท่านั้นครับผม

Flow Control 2 - Conditional Statement ด้วย if else

Conditional Statement

คือการที่เราต้องการเขียนให้โปรแกรมของเรา สามารถตัดสินใจได้เหมือนคนว่าจะทำหรือไม่ เช่น ถ้าอ่านหนังสือเล่มนี้จบแล้วก็เอาไปคืนที่ห้องสมุด หรือเลือกทำอย่างใดอย่างหนึ่ง เช่น ถ้าเกิดราคารองเท้าแพงกว่า 20 บาทเราจะไม่ซื้อ แต่ถ้า 20 บาทลงมาเราจะซื้อ หรือตัดสินใจเลือกทำตามสถานการณ์ เช่น ถ้าวันนี้วันจันทร์เราจะอยู่บ้านเล่นเกม วันอังคารเราจะไปทำงาน วันพุธไปหาลูกค้า วันพฤหัสไปโรงพยาบาล วันศุกร์ไปสถานีตำรวจ วันเสาร์ไปผับ วันอาทิตย์ไปเที่ยว อย่างนี้เป็นต้นครับ

คำสั่งสำหรับการเขียน Condition ใน ActionScript 3.0 จะมี 2 ชุดคำสั่ง ได้แก่

• if else
• switch case

สำหรับบทความนี้เราจะพูดถึง if else  กันนะครับ

if

เวลาเราเขียน if จะมีรูปแบบ Syntax ง่ายๆ ดังนี้ครับ

แบบที่ 1 ถ้า Expression Evaluate ออกมาเป็น true โปรแกรมจะรัน Code ในส่วน Statement ครับ

if (expression) statement;

แบบที่ 2 อันนี้เหมือนแบบที่ 1 เลยครับ แต่แค่เราเขียน Statement ไว้บรรทัดใหม่ และโดยปกติแล้วเพื่อความสวยงามของ Code และเพื่อให้อ่านง่าย เราจะเคาะหรือ Tab Code เข้าไปครับให้รู้ว่า Statement นี้จะทำเมื่อ Expression เป็น true เท่านั้น

if (expression) 
    statement;

แบบที่ 3 ก็ยังเหมือนแบบที่ 1 กับแบบที่ 2 ครับ แต่เพื่อให้อ่านง่ายขึ้นเข้าไปอีกเราก็เอาปีกกา { และ } มาใช้ครอบตรงส่วนของ Statement ครับ

if (expression)
{
    statement;
}

if (expression) {
    statement;
}

ทั้ง 2 แบบด้านบนที่ต่างกันตรงปีกกาเปิดอยู่บรรทัดเดียวกับ if และปีกกาเปิดขึ้นบรรทัดใหม่ ทั้ง 2 แบบนี้ได้ผลเหมือนกันทุกประการครับ Compiler อ่านไม่ต่าง จะต่างตรงคนอ่านนี่แหละครับ ถนัดแบบไหนก็เขียนแบบนั้นได้เลยครับ แต่ผมชอบให้ปีกกาขึ้นบรรทัดใหม่มากกว่าครับ อิอิ

และข้อดีอีกอย่างของปีกกาคือมันช่วยให้คำสั่ง if เลือกทำได้หลาย Statement ครับ ตัวอย่างเช่น สมมติเราเขียนแบบด้านล่างนี้

// a.
if (expression) statement1;
statement2;

// b.
if (expression)
statement1;
statement2;

// c.
if (expression)
    statement1;
    statement2;

// d.
if (expression)
    statement1;
statement2;
  
จาก ด้านบนทั้ง a. b. c. d. จะให้ผลเหมือนกันครับนั่นก็คือ Statement1 จะทำเฉพาะ Expression เป็น true เท่านั้น แต่ Statement2 ไม่ว่ายังไงก็จะทำ เพราะคำสั่ง if นั้นจะส่งผลควบคุมเฉพาะ Statement ถัดไปเท่านั้นครับ นี่ก็เป็นสาเหตุที่ปีกกาสามารถช่วยเราได้ครับ สมมติเราต้องการให้ Statement1 และ Statement2 ทำเฉพาะ Expression เป็น true เท่านั้นก็เขียนได้แบบนี้เลยครับ

if (expression)
{
    statement1;
    statement2;
}

ใน Block ของปีกกานั้นเราอยากใส่กี่ Statement ก็ได้เลยครับ Statement ทั้งหมดในปีกกาจะทำเมื่อ Expression เป็น true เท่านั้น

เอาหละมาดูตัวอย่างโปรแกรมกันดีกว่านะครับ

ตัวอย่างที่ 1 โปรแกรมเรามี hp และ damage และเกิดการ Attack ขึ้น!
  
var hp:int = 100;
var damage:int = 50;

// Attack!
hp -= damage;

if (hp <= 0)
{
    trace("You died.");
    trace("Please try again.");
} 
trace("Your hp is " + hp);

Output
Your hp is 50

Recap
ตัวอย่างที่ 1 หลังจากโดน Attack ไปแล้ว hp ยังเหลือ 50 ซึ่ง 50 มันน้อยกว่าหรือเท่ากับ 0 หรือเปล่าครับ? ไม่ใช่นะครับ ต่อนะครับ Expression hp <= 0 หรือก็คือ 50 <= 0 จึงได้ผลออกมาเป็น false และคำสั่ง if บอกไว้ว่าจะทำต่อเมื่อ Expression เป็น true เท่านั้น! เพราะฉะนั้น Code (หรือ Statement นั่นแหละ) ทั้ง 2 บรรทัดที่อยู่ในปีกกาจึงไม่ทำครับ โปรแกรมมันกระโดดข้ามไปเลยครับ


ตัวอย่างที่ 2 โครงสร้างโปรแกรมเหมือนตัวอย่างที่ 1 ครับ แต่ปรับให้ damage เยอะกว่า hp ดู
  
var hp:int = 100;
var damage:int = 500;

// Attack!
hp -= damage;

if (hp <= 0)
{
    trace("You died.");
    trace("Please try again.");
} 
trace("Your hp is " + hp);

Output
You died.
Please try again.
Your hp is -400

Recap
ตัวอย่างที่ 2 หลังจากโดน Attack ไปแล้วคราวนี้ hp กลายเป็นติดลบ 400 เลยครับ ซึ่ง -400 มันน้อยกว่าหรือเท่ากับ 0 มั้ยครับ? ใช่แล้วนะครับ  Expression hp <= 0 หรือก็คือ -400 <= 0 นั้นจึงได้ผลออกมาเป็น true และคำสั่ง if บอกไว้ว่าจะทำต่อเมื่อ Expression เป็น true เท่านั้น เพราะฉะนั้น Code ทั้ง 2 บรรทัดที่อยู่ในปีกกาจึงทำแล้วครับ

else

สำหรับ else นั้นจะใช้โดดๆ ไม่ได้ ต้องใช้งานร่วมกับ if เท่านั้น โดยมี Syntax ดังนี้ครับ

// 1.
if (expression) statement1;
else statement2; 

// 2.
if (expression)
    statement1;
else
    statement2;

// 3.
if (expression)
{
    statement1;
}
else
{
    statement2;
}

else จะต้องอยู่หลัง if เสมอ จะมาอยู่ดีๆ เขียน else เลยไม่ได้ครับ

เวลาเราเขียน if else หมายความว่าโปรแกรมจะเลือกทำไม่ Statement1 ก็ Statement2 เท่านั้น ถ้า Expression เป็น true ก็ทำ Statement1 ถ้า Expression เป็น false ก็ทำ Statement2 จะไม่มีเหตุการณ์ที่ทำทั้ง Statement1 และ Statement2 ทั้งคู่เด็ดขาดครับ


ตัวอย่างที่ 3 โครงสร้างโปรแกรมยังเหมือนเดิมครับ แต่ถ้าเกิดเรายังไม่ตายเราจะ Counter Attack!
  
var hp:int = 100;
var damage:int = 50;

// Attack!
hp -= damage;

if (hp <= 0)
{
    trace("You died.");
    trace("Please try again.");
}
else
{
    trace("Counter Attack!");
}
trace("Your hp is " + hp);

Output
Counter Attack!Your hp is 50

ตัวอย่างที่ 4 เหมือนตัวอย่างที่ 3 ครับแต่เพิ่ม damage เป็น 500
  
var hp:int = 100;
var damage:int = 500;

// Attack!
hp -= damage;

if (hp <= 0)
{
    trace("You died.");
    trace("Please try again.");
}
else
{
    trace("Counter Attack!");
}
trace("Your hp is " + hp);

Output
You died.
Please try again.
Your hp is -400

else if

คำสั่งสุดท้ายของเรื่อง if else ก็คือ else if ครับ เจ้า else if จะถูกเขียนอยู่หลัง if แต่ก่อนหน้า else ซึ่งเราจะเขียน else if กี่อันก็ได้ไม่จำกัด และจะปิดด้วย else หรือไม่ก็ได้ขึ้นอยู่กับความต้องการของเราครับ  โดยจะมี Syntax คือ

แบบที่ 1 แสดงการใช้งาน if, 1 else if และปิดด้วย else แบบที่ 1 นี้สามารถอ่านได้ว่า ถ้า Expression1 เป็น true ให้ทำ Statement1 แล้วจบการทำงาน Block if นี้ แต่ถ้า Expression 1 เป็น false ให้ดู Expression2 ต่อไป ถ้า Expression2 เป็น true ให้ทำ Statement2 แล้วจบการทำงาน Block if นี้ แต่ถ้า Expression2 ก็เป็น false ให้ทำ Statement3

if (expression1)
{
    statement1;
}
else if (expression2)
{
    statement2;
}
else
{
    statement3;
}

แบบที่ 2 แสดงการใช้งาน if และ 1 else if โดยไม่มีการปิดด้วย else แบบที่ 2 นี้อ่านได้ว่า ถ้า Expression1 เป็น true ให้ทำ Statement1 แล้วจบการทำงาน Block if นี้ แต่ถ้า Expression 1 เป็น false ให้ดู Expression2 ต่อไป ถ้า Expression2 เป็น true ให้ทำ Statement2 แล้วจบการทำงาน Block if นี้ แต่ถ้า Expression2 ก็เป็น false ก็จะไม่มี Statement ไหนได้ทำเลย

if (expression1)
{
    statement1;
}
else if (expression2)
{
    statement2;
}


แบบที่ 3 แสดงการใช้งาน if และ 3 else if โดยมี else ปิด สามารถอ่านแบบสั้นที่สุดได้แบบนี้ครับ ถ้า Expression1 เป็น true ให้ทำ Statement1 ไม่งั้นถ้า Expression2 เป็น true ให้ทำ Statement2 ไม่งั้นถ้า Expression3 เป็น true ให้ทำ Statement3 ไม่งั้นถ้า Expression4 เป็น true ให้ทำ Statement4 ไม่งั้นให้ทำ Statement5 

if (expression1)
{
    statement1;
}
else if (expression2)
{
    statement2;
}
else if (expression3)
{
    statement3;
}
else if (expression4)
{
    statement4;
}
else
{
    statement5;
} 

การ เขียน else if ต่อกันหลายๆ อันและปิดด้วย else หมายความว่าหากสุดท้ายแล้วทุก Expression เป้น false หมด ก็ให้ทำ Statement ใน else ไปครับ


ยังจำได้ไหมที่ผมเกริ่นไว้ตั้งแต่แรกของบทความนี้ที่ว่าเราจะเขียนโปรแกรมให้ตัดสินใจเลือกทำตามสถานการณ์ เช่น ถ้าวันนี้วันจันทร์เราจะอยู่บ้านเล่นเกม วันอังคารเราจะไปทำงาน วันพุธไปหาลูกค้า วันพฤหัสไปโรงพยาบาล วันศุกร์ไปสถานีตำรวจ วันเสาร์ไปผับ วันอาทิตย์ไปเที่ยว สามารถเขียนได้ดังตัวอย่างด้านล่างนี้ครับ


ตัวอย่างที่ 5 

// Day is in 1 - 7;
var day:int = 1;
            
if (day == 1) trace("Play games");
else if (day == 2) trace("Go to work");
else if (day == 3) trace("Visit customers");
else if (day == 4) trace("Go to hospital");
else if (day == 5) trace("Go to police station");
else if (day == 6) trace("Go to pub");
else if (day == 7) trace("Go travel");
else trace("Invalid day."); 

Output
Play games

Recap
ขอ ให้คุณลองเปลี่ยนค่าของ day เป็นค่าอื่นๆ เพื่อลองสังเกตุผลลัพธ์ที่ได้ดูนะครับ และอย่าลืมลองค่าที่นอกเหนือจาก 1 - 7 ด้วย ซึ่งถ้าคุณลองก็จะพบว่า Output มันจะออกมาเป็น Invalid day. ครับ จากตัวอย่างนี้ได้แสดงการใช้ if, else if และ else โดยใช้ else เป็นตัว Validate ค่าให้ดูกันครับ




สำหรับตัวอย่างที่ 5 คุณบางคนอาจจะบอกว่า เอ๊ะ ทำไมต้องใช้ else if ด้วย เขียนแบบนี้ก็ได้ผลเหมือนกันนี่นา

ตัวอย่างที่ 6 เขียนแบบเนี้ย



// Day is in 1 - 7;
var day:int = 1;
            
if (day == 1) trace("Play games");
if (day == 2) trace("Go to work");
if (day == 3) trace("Visit customers");
if (day == 4) trace("Go to hospital");
if (day == 5) trace("Go to police station");
if (day == 6) trace("Go to pub");
if (day == 7) trace("Go travel");
else trace("Invalid day."); 

ดูผ่านๆ แล้วเหมือนว่าจะได้ผลเหมือนกันใช่มั้ยครับ ลองรันดูดีกว่า ได้ผลออกมาตามรูปด้านล่างครับ

Output
Play games
Invalid day.

อ้าว ทำไม Invalid day. มันขึ้นมาด้วย 1 มันต้องไม่ Invalid สิ รู้มั้ยครับว่าทำไม หลายๆ คนคงรู้แล้วนะครับ ผมขอถามคำถามดีกว่า ถามว่า ค่าของ day ต้องเป็นอะไร Output ถึงจะไม่ขึ้นว่า Invalid day. ครับ?

คำตอบคือ 7 ครับ เพราะถ้า day มีค่าเป็น 7 โปรแกรมจะทำ  trace("Go travel"); แล้วก็กระโดดข้าม trace("Invalid day."); ที่ else ออกไปครับ แต่ค่านอกเหนือจาก 7 แล้วจะมี Invalid day. ออกมาที่ Console หมดเลยครับ เพราะพอเป็นโปรแกรมมันรันมาถึงบรรทัดนี้

if (day == 7) trace("Go travel");
else trace("Invalid day.");

Code 2 บรรทัดนี้หมายความว่า ถ้า day มีค่าเท่ากับ 7 ให้ Print "Go travel" ออกที่ Output ไม่งั้นให้ Print "Invalid day." ออกที่ Output เพราะฉะนั้นโปรแกรมนี้ถ้า day ไม่เป็น 7 ยังไงก็เจอ Invalid day. แน่นอนครับ ดังนั้นโปรแกรมนี้เขียนผิดนะครับ ต้องใช้ else if แบบตัวอย่างที่ 5 ถึงจะถูกต้องครับ

Nested if block

เอาละครับ เข้าสู่เรื่องสุดท้ายแล้ว ไม่มีอะไรมากครับ แค่จะบอกว่าเราสามารถเขียน if ซ้อนอยู่ใน if ได้ครับ เช่น

if (expression)
{
    if (expression) statement;
    else statement;
}
else if (expression)
{
    if (expression) statement; 
    statement;
    statement;
}
else
{
    if (expression)
    {
        statement;
    }
    else if (expression)
    {
        if (expression) statement;
        else statement;
    }
    else
    {
        statement;
    }
} 


ก่อนจบบทความนี้ผมก็ขอให้คุณลองเขียนโปรแกรมเพื่อทดสอบความเข้าใจของตัวเองดูด้วยนะครับ ว่าตอนที่เราคิดแล้วเขียนออกมา Output ตอนที่รันจริงกับ Output ที่เราคิดไว้มันตรงกันหรือเปล่า ถ้ายังไม่ตรงแสดงว่าเรายังมีจุดที่ไม่เข้าใจอยู่ ให้พยายามไล่ Code ดูว่าเขียนผิดตรงไหน หรือคิดผิดตรงไหนเอาให้ชัวร์เอาให้แน่นนะครับ เพราะการเขียนโปรแกรมคุณผิดแม้แต่นิดเดียว บรรทัดเดียว ตัวอักษรเดียว ก็ทำให้โปรแกรมคุณทำงานผิดพลาดได้แล้วครับ