วันพฤหัสบดีที่ 17 กรกฎาคม พ.ศ. 2557

ภาษา JavaScript ฉบับผู้เริ่มต้น part 8-1

: Condition Statement กับคำสั่ง if-else-if statement

>> อะไรคือ condition statement เหรอ?
ตอบ ให้คิดง่ายๆอย่างนี้ครับ ทุกวันนี้เรามีถนนสำหรับให้รถวิ่ง ย่อมมีทั้งทางตรง ทางโค้งและทางแยก condition statement ก็คือทางแยกของถนนที่ว่าจะเลี้ยวซ้ายหรือขวาหรือตรงไปในทางโปรแกรมมิ่งนั่นเอง เพื่อนๆหลายคนฟังแล้วอ๋อทันที ใช่ครับ ก็คือเหล่าคำสั่งต่อไปนี้
- if-else-if statement
- switch statement

>> if-else-if statement คืออะไรเหรอ?
ตอบ มันคือเงื่อนไขให้เลือกทางหนึ่งทางใด ซึ่งมีโครงสร้างดังนี้

if ( boolean_expression ) { ... }

เมื่อ boolean_expression คือค่าที่มีผลเป็น จริง (true) หรือ เท็จ (false) เท่านั้น ตัวอย่างเช่น

var x = 10;
if(x == 10) {
alert("Yes, x equals ten");
}

คำตอบที่ได้คือข้อความ Yes, x equals ten ปรากฏขึ้นมาครับ เพราะเรากำหนดค่าของตัวแปร x เท่ากับ 10 แล้วถามการเท่ากันนี้ในเงื่อนไขของคำสั่ง if ว่าตัวแปร x เท่ากับ 10 ใช่ไหม (ด้วยเครื่องหมาย == นะจ๊ะ) คำตอบคือ true แน่นอน

var x = 0;
if(x = 10) {
alert("Yes, set x by ten");
}

คำตอบของกรณีข้างต้นนี้อันตรายมาก (ด้วยเครื่องหมาย = เพียงอันเดียว) เพราะภาษาจาวาสคริปต์ไม่ถือเป็นข้อผิดพลาดในนิพจน์ boolean_expression และถือว่าเป็น true กล่าวคือจะได้คำตอบเป็น Yes, set x by ten ออกมาอย่างแน่แท้ โดยมีกติกาดังนี้จ๊ะ
- กำหนดให้ x มีค่าเท่ากับ 0 จะตีความเป็น เท็จ
- ค่าอื่นใดที่ไม่ใช่ 0 (กระทั่งค่าลบ) จะตีความเป็น จริง
- กำหนดให้ x มีค่าเท่ากับ null จะตีความเป็น เท็จ
- กำหนดให้ x มีค่าเป็นออบเจ็กต์ (new ให้ไง) จะตีความเป็น จริง

บางคนว่าจำยากจัง จำได้บ้างไม่ได้บ้างก็ไม่ต้องกังวลไปนะ ขอให้ฝึกเขียนบ่อยๆใช้บ่อยๆเดี๋ยวก็ได้เอง สรุปว่าควรใช้เครื่องหมาย == (เท่ากับสองอัน) เสมอในเงื่อนไขหรือนิพจน์ที่เป็น boolean_expression

>> จากโค้ดตัวอย่างทั้งสองข้างต้น ขอถามว่าถ้าเกิดผมกำหนดค่าของ x เป็น -1 (ลบหนึ่ง) จะเกิดอะไรขึ้น?
ตอบ กล่องข้อความจากคำสั่ง alert ก็จะไม่ทำงานน่ะสิ ใช่ครับ!เก่งมาก หรือก็คือมันข้ามทุกคำสั่งที่อยู่ระหว่างเครื่องหมาย { และ } ของ if ไปเลยไงล่ะ ทว่าในกรณีที่เราต้องการดักจับหรือกำหนดให้ทางแยกซ้ายและขวาเกิดการกระทำอย่างหนึ่งอย่างใด (จริงก็ทำ เท็จก็ทำ) เราก็จะเขียนคำสั่ง else เพิ่มเข้าไปครับ ดังตัวอย่างนี้

var x = 5;
if(x == 10) {
alert("x equals ten");
} else {
alert("x not equals ten");
}

กำหนดให้ x มีค่าเท่ากับ 5 ดังนั้นคำตอบคือ x not equals ten ครับผม ทีนี้เอาใหม่ สร้างทางเลือกให้มากกว่าสองทางด้วยคำสั่ง else if เพิ่มเข้าไปอีก (เอาสี่ทางเลือกเลย) ดังตัวอย่างต่อไปนี้จ้า

var x = 5;
if(x >= 100) {
alert("x more than or equals one hundred");
} else if(x > 10) {
alert("x more than ten");
} else if(x < 5) {
alert("x less than five");
} else {
alert("x more than or equals five");
}

ลองทายกันสิครับว่า ข้อความใดจะปรากฏออกมา? อิอิ

>> เนื่องจากเนื้อหาเยอะเกินไป ผมขอตัด part นี้เป็น 8-1 และ 8-2 นะครับ ก่อนจะนำมันมาสร้างเป็นตัวอย่างสนุกๆให้ศึกษากันใน part 9 (ปูรากฐานสู่เกมเล็กๆขำๆ) ครั้งนี้ลาแล้ว สวัสดีครับ

ไม่มีความคิดเห็น:

แสดงความคิดเห็น