JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


JavaScript Errors


โยนแล้วลอง...จับ...ในที่สุด

คำtryสั่งกำหนดบล็อคโค้ดที่จะรัน (เพื่อลอง)

คำcatchสั่งกำหนดบล็อคโค้ดเพื่อจัดการกับข้อผิดพลาดใดๆ

คำfinallyสั่งกำหนดบล็อคโค้ดที่จะรันโดยไม่คำนึงถึงผลลัพธ์

คำthrowสั่งกำหนดข้อผิดพลาดที่กำหนดเอง


ข้อผิดพลาดจะเกิดขึ้น!

เมื่อรันโค้ด JavaScript อาจเกิดข้อผิดพลาดต่างๆ ขึ้นได้

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

ตัวอย่าง

ในตัวอย่างนี้ เราสะกดคำว่า "alert" เป็น "addlert" เพื่อสร้างข้อผิดพลาดโดยเจตนา:

<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

JavaScript จับadddlertเป็นข้อผิดพลาด และรันโค้ด catch เพื่อจัดการกับมัน


JavaScript ลองและจับ

คำtryสั่งอนุญาตให้คุณกำหนดกลุ่มของรหัสที่จะทดสอบหาข้อผิดพลาดในขณะที่กำลังดำเนินการ

คำcatchสั่งนี้อนุญาตให้คุณกำหนดกลุ่มของรหัสที่จะดำเนินการ หากเกิดข้อผิดพลาดในบล็อกการลอง

คำสั่ง JavaScript tryและcatch มาเป็นคู่:

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}


JavaScript แสดงข้อผิดพลาด

เมื่อเกิดข้อผิดพลาด โดยปกติ JavaScript จะหยุดและสร้างข้อความแสดงข้อผิดพลาด

ศัพท์เทคนิคสำหรับสิ่งนี้คือ: JavaScript จะส่งข้อยกเว้น (throw an error )

JavaScript จะสร้างอ็อบเจ็กต์ Errorโดยมีคุณสมบัติสองประการ : ชื่อและข้อความ


คำสั่งโยน

คำthrowสั่งช่วยให้คุณสร้างข้อผิดพลาดที่กำหนดเองได้

ใน ทางเทคนิคคุณสามารถโยนข้อยกเว้น (โยนข้อผิดพลาด )

ข้อยกเว้นอาจเป็น JavaScript String, a Number, a BooleanหรือObject:

throw "Too big";    // throw a text
throw 500;          // throw a number

หากคุณใช้throwร่วมกับtryและ catchคุณสามารถควบคุมการไหลของโปรแกรมและสร้างข้อความแสดงข้อผิดพลาดที่กำหนดเองได้


ตัวอย่างการตรวจสอบอินพุต

ตัวอย่างนี้ตรวจสอบอินพุต หากค่าไม่ถูกต้อง ข้อยกเว้น (err) จะถูกส่งออกไป

ข้อยกเว้น (ข้อผิดพลาด) ถูกจับโดยคำสั่ง catch และแสดงข้อความแสดงข้อผิดพลาดที่กำหนดเอง:

<!DOCTYPE html>
<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() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let 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>

การตรวจสอบ HTML

รหัสด้านบนเป็นเพียงตัวอย่าง

เบราว์เซอร์สมัยใหม่มักจะใช้การรวมกันของ JavaScript และการตรวจสอบ HTML ในตัว โดยใช้กฎการตรวจสอบที่กำหนดไว้ล่วงหน้าซึ่งกำหนดไว้ในแอตทริบิวต์ HTML:

<input id="demo" type="number" min="5" max="10" step="1">

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการตรวจสอบแบบฟอร์มได้ในบทต่อๆ ไปของบทช่วยสอนนี้


คำสั่งสุดท้าย

คำfinallyสั่งนี้ให้คุณรันโค้ด หลังจากที่ลองและจับ โดยไม่คำนึงถึงผลลัพธ์:

ไวยากรณ์

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}
finally {
  Block of code to be executed regardless of the try / catch result
}

ตัวอย่าง

function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try {
    if(x == "") throw "is empty";
    if(isNaN(x)) throw "is not a number";
    x = Number(x);
    if(x > 10) throw "is too high";
    if(x < 5) throw "is too low";
  }
  catch(err) {
    message.innerHTML = "Error: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

วัตถุผิดพลาด

JavaScript มีอ็อบเจ็กต์ข้อผิดพลาดในตัวที่ให้ข้อมูลข้อผิดพลาดเมื่อเกิดข้อผิดพลาด

ออบเจ็กต์ข้อผิดพลาดมีคุณสมบัติที่มีประโยชน์สองประการ: ชื่อและข้อความ


ข้อผิดพลาดคุณสมบัติของอ็อบเจ็กต์

คุณสมบัติคำอธิบาย
ชื่อตั้งค่าหรือส่งคืนชื่อข้อผิดพลาด
ข้อความตั้งค่าหรือส่งคืนข้อความแสดงข้อผิดพลาด (สตริง)

ชื่อผิดพลาด ค่า

ค่าที่ต่างกันหกค่าสามารถส่งคืนได้ด้วยคุณสมบัติชื่อข้อผิดพลาด:

ชื่อข้อผิดพลาดคำอธิบาย
EvalErrorเกิดข้อผิดพลาดในฟังก์ชัน eval()
RangeErrorเกิดเลข "นอกช่วง" ขึ้น
อ้างอิงข้อผิดพลาดมีการอ้างอิงที่ผิดกฎหมายเกิดขึ้น
ข้อผิดพลาดทางไวยากรณ์เกิดข้อผิดพลาดทางไวยากรณ์
ประเภทข้อผิดพลาดเกิดข้อผิดพลาดประเภท
URIErrorเกิดข้อผิดพลาดใน encodeURI() ขึ้น

ค่าต่างๆ หกค่าได้อธิบายไว้ด้านล่าง


ข้อผิดพลาดของการประเมิน

An EvalErrorบ่งชี้ข้อผิดพลาดในฟังก์ชัน eval()

JavaScript เวอร์ชันใหม่กว่าไม่ส่ง EvalError ใช้ SyntaxError แทน


ข้อผิดพลาดของช่วง

A RangeErrorจะถูกส่งออกไปหากคุณใช้ตัวเลขที่อยู่นอกช่วงของค่าทางกฎหมาย

ตัวอย่างเช่น คุณไม่สามารถกำหนดจำนวนหลักสำคัญของตัวเลขเป็น 500

ตัวอย่าง

let num = 1;
try {
  num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

อ้างอิงผิดพลาด

A ReferenceErrorถูกส่งออกไปหากคุณใช้ (ข้อมูลอ้างอิง) ตัวแปรที่ยังไม่ได้ประกาศ:

ตัวอย่าง

let x = 5;
try {
  x = y + 1;   // y cannot be used (referenced)
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

ข้อผิดพลาดทางไวยากรณ์

A SyntaxErrorถูกส่งออกไปหากคุณพยายามประเมินโค้ดที่มีข้อผิดพลาดทางไวยากรณ์

ตัวอย่าง

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

พิมพ์ผิดพลาด

A TypeErrorจะถูกส่งออกไปหากคุณใช้ค่าที่อยู่นอกช่วงของประเภทที่คาดไว้:

ตัวอย่าง

let num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

ข้อผิดพลาด URI (Uniform Resource Identifier)

A URIErrorถูกส่งออกไปหากคุณใช้อักขระที่ไม่ถูกต้องในฟังก์ชัน URI:

ตัวอย่าง

try {
  decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

คุณสมบัติอ็อบเจ็กต์ข้อผิดพลาดที่ไม่ได้มาตรฐาน

Mozilla และ Microsoft กำหนดคุณสมบัติวัตถุข้อผิดพลาดที่ไม่ได้มาตรฐานบางอย่าง:

ชื่อ ไฟล์ (Mozilla)
บรรทัดหมายเลข (Mozilla) หมายเลขคอลัมน์ (Mozilla) หมายเลข คำอธิบาย (
Mozilla)
กองซ้อน (Mozilla) (Microsoft) (Microsoft)

ห้ามใช้คุณสมบัติเหล่านี้ในเว็บไซต์สาธารณะ พวกเขาจะไม่ทำงานในทุกเบราว์เซอร์


อ้างอิงข้อผิดพลาดที่สมบูรณ์

สำหรับการอ้างอิงที่สมบูรณ์ของอ็อบเจ็กต์ Error ไปที่Complete JavaScript Error Referenceของเรา