การใช้ switch ในภาษา Javascript

ในบทความที่แล้วเราได้ดู if else กันไปแล้ว มาบทความนี้ เรามาดูวิธีใช้ switch กันบ้างครับ



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





จาก flowchart ข้างบน เราเขียนเป็น Syntax ของ Switch ได้ดังข้างล่างครับ

switch(กรณี)  
{   
  case กรณี 1 : Command; break;   
  case กรณี 2 : Command; break;  
  case กรณี 3 : Command; break;  
  case กรณี 4 : Command; break;  
  default : คำสั่ง   
}

ตัวอย่างการใช้งาน Switch

<input type="button" value="ดูว่าวันนี้วันอะไร" onclick="useswitch()" />
<span id="show"></span>





เนื่องจาก Javascript ทำงานในฝั่ง client ดังนั้นเวลาเราเปลี่ยนเวลาที่เครื่องคอมพิวเตอร์ของเรา ฟังก์ชัน Date จะ get มาตาม เวลาของเครื่อง



จากตัวอย่างข้างบน ผมสร้างตัวแปรชื่อว่า date แล้วให้เป็นชนิด Date เก็บเวลาปัจจุบัน จากนั้น สร้างตัวแปรชื่อว่า day ให้ตัวแปรนี้ getDay มาจาก date (ฟังก์ชันการใช้งาน Date ไว้ผมจะอธิายรายละเอียดต่าง  ในบทความถัด ๆ ไปนะครับ) จากนั้นผมเข้าสู่ตัวเลือก switch โดยให้อ้างอิงจาก day จากนั้นให้ case ต่าง ๆ ของ day โดยเทียบกับ 1 2 3 .. ไปเรื่อย ๆ จนถึง 7 แล้วให้แสดงออกมาว่าวันนี้เป็นวันอะไร โดยแสดงออกมาใน id=show




<input id="grade" type="text" name="grage" />
<input type="button" value="ดูคำอธิบายเกรดที่ได้" onclick="doGrade()" />
<span id="showexpain"></span>







ตัวอย่างนี้ เรารับค่ามาจาก id ที่ชื่อ grade จากนั้นเข้าสู่ตัวเลือก switch แล้วตรวจสอบว่า grade เข้ากับกรณีไหน ถ้าเป็น A ก็โชว์คำว่า Good job ออกมาทาง id ที่ชื่อ showexpain จากนั้นก็ตรวจสอบ B C D F ไปเรื่อย ๆ ถ้าไม่เข้ากรณีไหน ก็เข้าสู่ default ทดลองกรอกตัวอย่างการแสดงผล ในช่องด้านบน จะเห็นหว่า ถ้าเรากรอก a ตัวเล็ก จะเข้าสู่กรณี default นั่นคือ ตัวใหญ่กับตัวเล็ก คิดเป็นคนละตัวกัน