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 ดูว่าเขียนผิดตรงไหน หรือคิดผิดตรงไหนเอาให้ชัวร์เอาให้แน่นนะครับ เพราะการเขียนโปรแกรมคุณผิดแม้แต่นิดเดียว บรรทัดเดียว ตัวอักษรเดียว ก็ทำให้โปรแกรมคุณทำงานผิดพลาดได้แล้วครับ