Errors

Errors หรือข้อผิดพลาดสามารถเกิดขึ้นได้จากหลายปัจจัย เช่น ข้อผิดพลาดที่เกิดจากโปรแกรมเมอร์ ข้อผิดพลาดที่เกิดขึ้นจากการป้อนข้อมูล หรือข้อผิดพลาดที่ไม่คาดคิดอื่นๆ เป็นต้น

ในเนื้อหาส่วนต่อจากนี้จะพูดถึงเรื่องการดักจับการเกิดข้อผิดพลาดและกำหนดรูปแบบที่สามารถแก้ไข และรองรับปัญหาที่เกิดขึ้นโดยการใช้ try และ catch เป็นหลัก

  • try คำสั่งในการทดสอบโค้ดที่เกิดข้อผิดพลาด
  • catch คำสั่งในการจัดการกับข้อผิดพลาดที่เกิดขึ้น
  • throw คำสั่งในการสร้างข้อผิดพลาดที่กำหนดเอง (ซึ่งในบางครั้งอาจไม่ใช่ข้อผิดพลาดที่แท้จริง ดังตัวอย่างที่ 2 throw)
  • 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

 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: