26
Oct

javascript จิ๊บจ๊อย #7 การเช็คเงื่อนไข

Category: Blog / 1,996 views

มาต่อกันกับตอนที่เจ็ดเลยนะครับ ช่วงนี้คึกเป็นพิเศษ ฮ่าๆ เพื่อนๆสังเกตไหมครับว่า ตั้งแต่อ่านมาเนี่ย Operator ส่วนใหญ่ที่พูดถึง มักจะเป็นการเช็คว่าสิ่งนั้นจริงหรือเท็จ บ่อยครั้งเลยครับในการเขียนโปรแกรม เรามักจะเช็คเงื่อนไขว่า เออถ้าจริง ให้ทำอย่างนี้นะ ถ้าไม่จริงให้ทำอย่างอื่นแทน  ยกตัวอย่างให้เห็นภาพง่ายๆ  สมมติว่า ผมต้องการตั้งเงื่อนไขว่า ถ้าผมมีเงิน 1000 บาท ผมจะซื้อหนังสือมาอ่าน  ถ้าไม่ใช่ ผมจะซื้อก๋วยเตี๋ยวแทน   — แบบนี้แหล่ะครับ ที่เป็นวิธีการเช็คเงื่อนไข เรียกเป็นภาษาบ้านเกิดบักสนว่า Condition Statement เดี๋ยวลองมาดูกันว่ามันประกอบด้วยอะไรบ้าง

 

If Statements

สำหรับเงื่อนไขนี้ เราเรียกว่า เงื่อนไข “if” ครับ เราจะ เริ่มต้นด้วยการใช้คีย์เวิร์ดว่า “if” ครับ จากนั้น ก็ทำการตรวจสอบเงื่อนไข แล้วก็ทำการเช็คกว่า เงื่อนไขนั้นเป็นจริง หรือเท็จ แลวก็ทำตามกระบวนตามเงื่อนไขที่วางไว้  ลองดูตัวอย่างนะครับ ผม ตั้งโจทย์ไว้ว่า ถ้า age < 30 ให้แสดงข้อความ “มีแฟนยังจ๊ะ”  แต่ถ้าไม่ใช่ ให้แสดงข้อความว่า “ระวังขึ้นคาน!!”  พอเขียนเป็นภาษาโปรแกรมก็จะได้แบบนี้ครับ

[codesyntax lang=”javascript”]

var age = 27, msg;

if (age < 30){
	msg="มีแฟนยังจ๊ะ";
	}
	else{
	msg="ระวังขึ้นคาน!";
	}

	alert(msg); // มีแฟนยังจ๊ะ

[/codesyntax]

 

ดูตัวอย่างแล้ว พอเก็ทไหมครับ ผมอาจจะยังไม่เจาะรายละเอียดตรงขั้นตอนการแสดงผลออกมาเท่าไหร่ ตอนนี้อยากให้โฟกัสถึงวิธีการคิดของมันมากกว่าครับ  ทีนี้ลองมาดุว่า แล้วในกรณีที่ ต้องการให้อะไรที่มากกว่า true/false จะทำอย่างไร ก็ไม่ยากครับ ลองดูตัวอย่าง

[codesyntax lang=”javascript”]

var age = 11, msg;
if(age >60){
	msg="คุณยาย";
	} else if(age > 40){
	msg="คุณแม่";
	} else{
	msg="ยังเด็กอยู่เลย";
	}

	alert(msg); // ยังเด็กอยู่เลย

[/codesyntax]

อย่างที่เราเห็นในตัวอย่างครับว่า กรณีที่มีการให้เช็ค if หลายครั้ง (multiple if-statement) ไม่ใช่เรื่องที่ต้องตื่นตระหนก เราก็เพียงแค่เพิ่ม else-statement เข้าไป แล้วก็ตามด้วย if-statement เช็คอีกทีแค่นั้นเองครับ   คือมันจะเช็คว่า if ตัวแรกเป็นจริงหรือเปล่า ถ้าไม่จริง มันก็จะไปดูที่ else ถัดมาวาจริงไหม ถ้าไม่จริง ก็ไปดู else ตัวต่อมาอีก แบบนี้ไปเรื่อยๆครับ ดังนั้นเราสามารถใช้ else if ได้ไ่ม่จำกัดครั้งครับ ลองดูเด้อ

จากตัวอย่างด้านบนนั้น ผมให้อายุเท่ากับ 11 ต่อมาผมเช็คว่า อายุมากกว่า 60 ใช่ไหม  มันก็ไม่จริง ดังนั้นมันก็จะมาเช็ค else ตัวแรกครับ มันก็เช็คว่า แล้วมากกว่า 40 หรือเปล่า คำตอบก็ไม่ใช่ มันก็เลยวิ่งมา else ตัวต่อมาอีก ซึ่งตัวต่อมาไม่มีการเช็คแล้ว ดังนั้นมันก็เลยจะ “กระทำ” สิ่งที่ตัว else ตัวสุดท้ายนี่สั่งครับ นั่นก็คือใส่แสดงข้อความว่า “ยังเด็กอยู่เลย” ครับผม
Switch Statements

อย่างไรก็ตามนะครับ เดี๋ยวเราลองมาเช็คอะไรเล่นๆดีกว่า ฮ่าๆ ซึ่งจะเป็นการเช็คกรณีที่มีเงื่อนไขเยอะมาก ยกอย่างเช่น ไซต์เสื้อ มันมีทั้ง small, medium, large, extra large ใช่ไหมครับ  ถ้าเราจะเช็คเงื่อนไขแบบ if ที่ผมพูดถึงด้านบน เราก็จะเขียนแบบนี้

 

[codesyntax lang=”javascript”]

var size="medium";

if (size==="small"){
    alert("small");
} else if(size ==="medium"){
    alert("medium");
} else if(size ==="large"){
    alert("large");
} else if(size ==="extra large"){
    alert("extra large");
} else {
    alert("someting else?");
}

[/codesyntax]

ถึงตอนนี้ คิดว่ายังไงครับ ผมไม่รู้ว่าคุณผู้อ่านคิดว่ายังไง แต่สำหรับผมแล้ว เขียนแบบนี้ผมค่อนข้างจะปวดหัวอยู่เบาๆ ขนาดนี่แค่เช็คตัวเลือกไม่กี่ตัวนะครับ ถ้ามีการเช็คเป็นสิบๆตัวเลือก การใช้ if statement ก็คงจะไม่ใช้วิธีที่ฉลาดนัก (อย่างน้อยก็สำหรับผมนะ)  อ้าว แล้วมันมีวิธีเขียนแบบอื่นหรือ?  มีิสิครับ ในกรณีที่มีการเช็คเงื่อนไขทีเ่ป็นตัวเลือกหลายๆตัว เรานิยมใช้ switch statement ครับ

 

ตัวอย่าง

[codesyntax lang=”javascript”]

var size="medium";

switch (size){
    case "small":
        alert("small");
        break;
    case "medium":
        alert("medium");
        break;
    case "large":
        alert("large");
        break;
    case "extra large":
        alert("extra large");
        break;
    default:
        alert("something else");
}

[/codesyntax]

หง่ะ! หลายคนเห็นแล้วคงนึกว่า เห้ย มันเขียนหลายบรรทัดกว่า if อีกนะเว้ย ครับ ดูแบบนี้มันเขียนหลายบรรทัดกว่าก็จริง แต่วิธีการเช็คมันง่ายกว่ามากครับผม  มามะ มาให้ผมแนะนำวิธีการใช้ switch statement ให้ฟังครับ  สำหรับวิธีนี้จะ “เหมาะมากๆ” สำหรับ กรณีที่มีการเช็ค “ตัวเลือกที่มีให้เช็คเยอะ”  ซึ่งการใช้ switch statement นั้น เราจะเขียน expression ที่ใช้ในการวิเคราะห์แค่ครั้งเีดียวเองครับ จากนั้นก็ไล่จากบนลงล่าง ว่ามันเข้ากรณีไหน ครับ

 

คำว่า กรณี ภาษาอังกฤษก็คือ “case” ครับ โปรแกรมจะวิเคราะห์ว่าสิ่งที่นำมาวิเคราะห์มันเข้า case ไหน  ถ้าเข้าเงื่อนไขนั้นก็จะทำตามที่เงื่อนไขตั้งไว้ อย่างตัวอย่างด้านบนก็คือให้ alert ข้อความนั่นเองครับ  ถ้าจะเปรียบเทียบกับ if-statement  การใช้ case ก็เทียบเท่ากับ  if else นั่นเองครับ  ซึ่งพอมันทำเสร็จแล้ว มันก็ต้องหยุดทำ ดังนั้นราจึงต้องมีคำสั่งให้ัมันหยุด นั่นก็คือ break ครับ

 

แต่ิสิ่งที่คุณห้ามลืมเด็ดขาดเลยสำหรับ switch statemetn นั่นก็คือ default ครับ คำนี้เป้นคำปิดท้ายเงื่อนไขเลย จำเป็นต้องมี  ลองเดาดูสิครับว่า ถ้าเทียบกับ if-statement มันเทียบได้กับอะไร?  ใช่แล้วครับ มันก็เทียบเท่ากับ else นั่นเอง ซึ่งก็มีไว้ในกรณีที่สิ่งที่เรานำมาวิเคราะห์ มันไม่ตรงกับเงื่อนไขใดๆเลย

ทีนี้มาดู break กันเพิ่มเติมครับ  ถ้าเราไม่มี break;  มันก็จะทำงานต่อไป ครับ ลองดูตัวอย่างประกอบคับ

[codesyntax lang=”javascript”]

var size="medium";

switch (size){
    case "small":
        alert("small");
    case "medium":
        alert("medium");
    case "large":
        alert("large");
    case "extra large":
        alert("extra large");
    default:
        alert("something else");
}

[/codesyntax]

ลองเขียนโปรแกรมและรันดูนะครับ จะเห็นว่า เราจะเห็นป๊อบอัพเตือนข้อความว่า “medium”, “large”, “extra large” และ “something else” ตามลำดับครับ คือถ้าหากว่า เราไม่มี break มากำกับ มันก็จะไล่ทำตาม case ถัดมา ไปเรื่อยๆและประมวลผลตามที่เคสนั้นเขียนไว้   ลองดูอีกสักตัวอย่างครับ

[codesyntax lang=”javascript”]

var size="medium";

switch (size){
    case "small":
        alert("small");
        break;
    case "medium":
    case "large":
    case "extra large":
        alert("medium, large, extra large");
        break;
    default:
        alert("something else");
}

[/codesyntax]

 

สำหรับตัวอย่างนี้ ผมต้องการให้เห็นว่า กรณีที่ผมต้องการตรวจสอบว่า ถ้ามัน คำที่รับมาเป้น medium หรือ large หรือ extra large ก็ให้แสดงข้อความนี้ออกมาครับ “medium, large, extra large” นั่นเอง ซึ่งจะเห็นว่า ถ้าเราไม่ใช้ break มันก็จะทำงานไล่ตามบรรทัดจากบนลงล่างมาเลย ถ้าเราไม่ต้องการให้หยุดทำ ก็ใส่ break ให้มันครับ  คืออาจจะดูงงๆหน่อย แต่เพื่อนๆต้องลองเขียนโปรแกรมตามไปด้วยครับ แล้วจะเข้าใจ และฝึกเขียนบ่อยๆครับ   ถึงตอนนี้บางคนอาจจะชอบ if else มากกว่า บางคนก็อาจจะชอบ switch มากกว่า จริงๆแล้ว ก็แล้วแต่เราครับว่า เราถนัดแบบไหน ก็เหมือนกับวิธีการเดินทางครับ เราจะนั่งรถ จะนั่งเืรือ ปั่นจักรยาน อะไรก็ได้ครับ ขอให้แค่มันไปถึง ฮ่าๆ จะต่างกันก็ตรง “ความเร็ว และทรัพยากรที่ใช้ ในการทำงาน” นั่นแหล่ะครับ แต่เอาเหอะ บทนี้มันแค่เรียนเพื่อให้รู้ัจักการเขียนโปรแกรม สำหรับการเขียนให้เร็ว มีการ optimize อะไรเนี่ย ปล่อยให้พวกโปรแกรเมอร์ที่เรียนสายตรงมา เค้าเรียนไปครับ ฮ่าๆ

แล้วเจอกันกับตอนต่อไปครับ

 

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours
ปิดโหมดสีเทา