Errors หรือข้อผิดพลาดสามารถเกิดขึ้นได้จากหลายปัจจัย เช่น ข้อผิดพลาดที่เกิดจากโปรแกรมเมอร์ ข้อผิดพลาดที่เกิดขึ้นจากการป้อนข้อมูล หรือข้อผิดพลาดที่ไม่คาดคิดอื่นๆ เป็นต้น
ในเนื้อหาส่วนต่อจากนี้จะพูดถึงเรื่องการดักจับการเกิดข้อผิดพลาดและกำหนดรูปแบบที่สามารถแก้ไข และรองรับปัญหาที่เกิดขึ้นโดยการใช้ try และ catch เป็นหลัก
tryคำสั่งในการทดสอบโค้ดที่เกิดข้อผิดพลาดcatchคำสั่งในการจัดการกับข้อผิดพลาดที่เกิดขึ้นthrowคำสั่งในการสร้างข้อผิดพลาดที่กำหนดเอง (ซึ่งในบางครั้งอาจไม่ใช่ข้อผิดพลาดที่แท้จริง ดังตัวอย่างที่ 2throw)finallyคำสั่งที่จะดำเนินการในทุกกรณี ไม่ว่าจะเกิดข้อผิดพลาดหรือไม่ (แนะนำให้ใช้ในการล้างค่าต่างๆ)
ไวยากรณ์ try…catch … finally
try {
// บล็อกโค้ดของ try
}
catch(err) {
// บล็อกโค้ดที่ตรวจสอบการเกิดข้อผิดพลาด
}
finally{
// บล็อกโค้ดที่ทำงานโดยไม่สนว่าผลลัพธ์ของ try และ catch ที่เกิดขึ้นคืออะไร
}
ตัวอย่างที่ 1 try … catch
<html>
<body>
<button onclick="myFunction()">Click</button>
<p id="demo"></p>
<script>
function myFunction(){
try {
consoleeeee.log("Hello World!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
}
</script>
</body>
</html>
ไฟล์ที่ 1 try … catch
จากไฟล์ที่ 1 เป็นการทดสอบการเกิดข้อผิดพลาด โดยในโค้ดบล็อกของ try จงใจทำให้เกิดข้อผิดพลาด และสร้างโค้ดบล็อก catch เพื่อตรวจสอบและแสดงผลข้อผิดพลาดที่เกิดขึ้น
ตัวอย่างที่ 2 throw
<html>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
</body>
</html>
ไฟล์ที่ 2 throw
จากไฟล์ที่ 2 เป็นการใช้งาน throw เพื่อส่งค่าไปยังส่วนของ catch โดยกำหนดข้อความตามเงื่อนไขที่เกิดขึ้นจริง
ตัวอย่างที่ 3 finally
<html>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
finally{
document.getElementById("demo").value = "";
}
}
</script>
</body>
</html>
ไฟล์ที่ 3 finally
จากไฟล์ที่ 3 ในส่วนของบล็อกโค้ด finally สร้างขึ้นมาเพื่อรีเซตค่าของ input ที่ไอดีเท่ากับ demo