การจัดการความผิดพลาด (Exception Handling)
การจัดการความผิดพลาด (Exception Handling)
คุณสมบัติหนึ่งที่ภาษาโปรแกรมเชิงวัตถุมีก็คือ กระบวนการดักจับและจัดการต่อความผิดพลาดที่เกิดจึ้น จาวาสคริปต์เองก็มีคุณลักษณะนี้โดยใช้กลไกการ try-catch เช่นเดียวกับภาษาโปรแกรมเชิงวัตถุตัวอื่น เพียงแต่ไม่ได้มีครบถ้วนดังเช่นภาษาเชิงวัตถุบางตัวอย่าง C++ หรือภาษาจาวา เป็นต้น
การดักจับความผิดพลาดในจาวาสคริปต์ มีวิธีอยู่สองวิธี สำหรับวิธีที่ถูกนำมาใช้กันมากในปัจจุบันคือการใช้ try-catch ซึ่งมีรูปประโยคดังนี้
| try
{ //Run some code here } catch(err) { //Handle errors here } |
ในการเขียนโค้ดภาษาจาวาสคริปต์นั้น หากเราต้องการที่จะดักจับความผิดพลาดใดๆ ที่เกิดขึ้นระหว่างการประมวลโค้ดที่อยู่นอกฟังก์ชัน หรือโค้ดที่อยู่ในฟังก์ชัน (ภายใต้เครื่องหมาย { } ) เราสามารถกระทำโดยการใช้คำสั่ง try{} ล้อมบริเวณดังกล่าวไว้ ทั้งนี้เนื่องจากเครื่องหมาย { } ถูกนำไปใช้ในการนิยามฟังก์ชันหรือกลุ่มคำสั่งด้วย ดังนั้นเราจะไม่สามรารถล้อมบริเวณที่คาบเกี่ยวระหว่างนอกฟังก์ชันกับในฟังก์ชัน หรือข้ามส่วนบริเวณที่ล้อมรอบเป็นกลุ่มคำสั่งได้ (ต้องล้อมบริเวณนอกฟังก์ชัน หรือภายในบริเวณต่างๆ ในฟังก์ชันโดยจะต้องล้อมกรอบคร่อมชุดกลุ่มคำสั่งทั้งชุดไว้
เมื่อเกิดความผิดพลาดขึ้นในระหว่างการทำงานตามคำสั่งในบริเวณ try{} ดังกล่าว โปรแกรมจะกระโดดมาทำงานภายใน catch(){} โดยข้อมูลบ่งความผิดพลาดจะส่งมาเก็บไว้ที่ตัวแปรในวงเล็บหลังคำสงวน catch
ลองดูตัวอย่างต่อไปนี้ และลองรันโค้ดดูว่า เกิดอะไรขึ้น
| <html>
<head> <script type=”text/javascript”> var txt=”" function message() { try { adddlert(”Welcome guest!”) } catch(err) { txt=”There was an error on this page.\n\n” txt+=”Error description: ” + err.description + “\n\n” txt+=”Click OK to continue.\n\n” alert(txt) } } </script> </head>
<body> <input type=”button” value=”View message” onclick=”message()” /> </body>
</html> |
ในบางกรณีที่เราสามารถคาดการณ์ได้ว่า อาจจะเกิดการทำงานที่ผิดพลาดในทางใดได้บ้าง แทนที่เราจะเขียนโปรแกรมในเชิงดักจับเพียงอย่างเดียว เราอาจจะเขียนโค้ดให้มีการสร้างสัญญาณเหตุการณ์ความผิดพลาดขึ้นเองด้วยก็ได้ และโดยการสร้างเหตุการณ์บอกความผิดพลาดนี้ ทำให้เราสามารถแนบข้อความบอกประเภทความผิดพลาดเป็นการเฉพาะไปด้วยได้ โดยในส่วนการทำงานตอบสนองต่อความผิดพลาดใน catch(){} นั้น เราจึงสามารถนำข้อมูลรายงานความผิดพลาดมาตรวจสอบและตอบสนองเป็นการเฉพาะต่อสัญญาณความผิดพลาดนั้นๆ ได้
การสร้างสัญญาณบอกความผิดพลาด เรากระทำโดยใช้คำสงวน throw ดังตัวอย่าง
| <html>
<body> <script type=”text/javascript”> var x=prompt(”Enter a number between 0 and 10:”,”") try { if(x>10) throw “Err1″ else if(x<0) throw “Err2″ } catch(er) { if(er==”Err1″) alert(”Error! The value is too high”) if(er==”Err2″) alert(”Error! The value is too low”) } </script> </body> </html> |
จะเห็นได้ว่า ในกรณีนี้เราสร้างสัญญาณความผิดพลาดโดยกำกับข้อมูลเป็น “Err1″ หรือ “Err2″ ขึ้นอยู่กับสถานะที่เราต้องการ และในส่วนของ catch(){} จะเห็นว่าตัวแปร er ที่รับข้อมูลแสดงความผิดพลาด จะเก็บค่าที่เราโยน (throw) สัญญาณความผิดพลาดนี้ ซึ่งเราสามารถตรวจสอบค่าใน er เพื่อตอบสนองต่อความผิดพลาดเป็นการเฉพาะกรณีได้
สำหรับเว็บบราวเซอร์เก่าๆ หน่อย จะไม่รองรับ try-catch นี้ แต่จะรองรับการดักจับความผิดพลาดโดยผ่านทางเหตุการณ์ onerror (เว็บบราวเซอร์เวอร์ชันที่นิยมใช้กันในปัจจุบันจะรองรับทั้งสองแบบ) ซึ่งในการใช้งานแบบนี้ เราจะสร้างฟังก์ชันขึ้นมาเพื่อรองรับในกรณีที่เกิดความผิดพลาดขึ้นในระหว่างการประมวลของจาวาสคริปต์ ดังตัวอย่าง
| onerror=handleErr
function handleErr(msg,url,l) { //Handle the error here return true or false } |
พารามิเตอร์สำหรับฟังก์ชันที่ใช้ตอบสนองต่อเหตุการณ์ onerror มีสามตัว ตัวแรก msg จะรับข้อมูลแสดงความผิดพลาดที่เกิดขึ้น ตัวที่สอง url เป็น location ของหน้าเว็ปปัจจุบันที่เกิดปัญหาขึ้น และ l คือบรรทัดที่เกิดความผิดพลาดในการทำงาน ค่าส่งกลับเป็น boolean ซึ่งอาจเป็น true หรือ false โดยถ้าส่งค่ากลับเป็น true เว็บบราวเซอร์จะไม่มีการแสดงข้อความผิดพลาดใดๆ แต่ถ้าเป็น false จะมีการรายงานความผิดพลาดแสดงไว้ที่ Javascript Console ของบราวเซอร์นั้นๆ ไว้ด้วย
ให้นักศึกษาลองศึกษาจากตัวอย่างการใช้งานต่อไปนี้
| <html>
<head> <script type=”text/javascript”> onerror=handleErr var txt=”" function handleErr(msg,url,l) { txt=”There was an error on this page.\n\n” txt+=”Error: ” + msg + “\n” txt+=”URL: ” + url + “\n” txt+=”Line: ” + l + “\n\n” txt+=”Click OK to continue.\n\n” alert(txt) return true } function message() { adddlert(”Welcome guest!”) } </script> </head> <body> <input type=”button” value=”View message” onclick=”message()” /> </body> </html> |
Good article - plenty of food for thought.