JavaScript Помилки
Кинь та спробуй піймати (Зроби помилку та знайди її)
Інструкція try дозволяє перевірити блок коду на наявність помилок.
Інструкція catch дозволяє опрацювати будь-яку помилку.
Інструкція finally дозволяє виконати код після try та catch, незалежно від результату.
Інструкція throw дозволяє створювати власні помилки.
Помилки будуть!
При виконанні JavaScript коду можуть виникати різні помилки.
Помилки можуть бути помилками кодування, допущеними програмістом, помилками із-за неправильного введення та іншими непередбаченими ситуаціями.
Приклад
В цьому прикладі ми неправильно написали "alert" як "adddlert", щоб спеціально продукувати помилку:
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
Спробуйте самі »
JavaScript перехоплює adddlert як помилку та виконує код перехоплення для її обробки.
JavaScript try та catch
Інструкція try дозволяє визначити блок коду, який буде перевірятися на наявність помилок під час його виконання.
Інструкція catch дозволяє визначити блок коду, який буде виконуватись, якщо в блоці try виникає помилка.
JavaScript інструкції try та catch ідуть в парі:
try {
Блок коду try
}
catch(err) {
Блок коду для обробки помилок
}
JavaScript Видає помилки
При виникненні помилки JavaScript зазвичай зупиняється та генерує повідомлення про помилку.
Технічний термін для цього: JavaScript викликає виняток (викликає помилку).
JavaScript фактично створює об’єкт Error з двома властивостями: ім’я та повідомлення.
Інструкція throw
Інструкція throw дозволяє створити користувальницьку помилку.
Технічно ви можете викликати виняток (викликати помилку).
Винятком може бути JavaScript String, Number, Boolean або Object:
throw "Too big"; // викликати текст
throw 500; // викликати число
Якщо ви використовуєте throw разом із try та catch, ви можете контролювати виконання програми та генерувати власні повідомлення про помилки.
Приклад перевірки введення
В цьому прикладі досліджується введення. Якщо значення є помилковим, видається виключення (err).
Виключення (err) перехоплюється інструкцією catch та відображається користувальницьке повідомлення про помилку:
<!DOCTYPE html>
<html>
<body>
<p>Будь ласка, введіть число між 5 та 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 "замало";
if(x > 10) throw "забагато";
}
catch(err) {
message.innerHTML = "Введено " + err;
}
}
</script>
</body>
</html>
Спробуйте самі »
HTML Валідація (перевірка)
Код вище є прикладом.
Сучасні браузери часто використовують комбінацію JavaScript та вбудованої HTML перевірки, використовуючи передвизначені правила перевірки, визначені в HTML атрибутах:
<input id="demo" type="number" min="5" max="10" step="1">
Ви можете дізнатись більше про перевірку форм пізніше в даному підручнику на нашому сайті W3Schools українською.
Інструкція finally
Інструкція finally дозволяє виконувати код після try та catch незалежно від результату:
Синтаксис
try {
Блок коду try
}
catch(err) {
Блок коду для обробки помилок
}
finally {
Блок коду, що буде виконуватись незалежно від результату try / catch
}
Приклад
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 "не число";
x = Number(x);
if(x > 10) throw "забагато";
if(x < 5) throw "замало";
}
catch(err) {
message.innerHTML = "Error: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
Спробуйте самі »
Об’єкт Error (помилка)
JavaScript має вбудований об’єкт error, що надає інформацію про помилку при її виникненні.
Об’єкт error надає дві корисних властивості: ім’я та повідомлення.
Властивості об’єкта Error
| Властивість | Опис |
|---|---|
| ім’я | Встановлює або повертає ім’я помилки |
| повідомлення | Встановлює або повертає повідомлення про помилку (рядок) |
Значення імені (назви) помилки
Властивість імені (назви) помилки може повернути шість різних значень:
| Назва Error (помилки) | Опис |
|---|---|
| EvalError | Відбулась помилка в eval() функції |
| RangeError | Відбулось число "out of range" (поза діапазоном) |
| ReferenceError | Відбулось неприпустиме посилання |
| SyntaxError | Відбулась синтаксична помилка |
| TypeError | Відбулась помилка типу |
| URIError | Відбулась помилка в encodeURI() |
Шість різних значень описані нижче.
Помилка Eval Error
Помилка EvalError вказує на помилку в функції eval().
Нові версії JavaScript не генерують EvalError. Замість цього використовуйте SyntaxError.
Помилка Range Error
Помилка RangeError видається, якщо ви використовуєте число, що виходить за межі діапазону допустимих значень.
Наприклад: Ви не можете встановити кількість знакових цифр рівною 500.
Приклад
let num = 1;
try {
num.toPrecision(500); // Число не може містити 500 знакових цифр
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Спробуйте самі »
Помилка Reference Error
Помилка ReferenceError видається, якщо ви використовуєте (посилаєтесь) на змінну, що не була оголошена:
Приклад
let x = 5;
try {
x = y + 1; // y не може використовуватись (посилатись)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Спробуйте самі »
Помилка Syntax Error
Помилка SyntaxError видається, якщо ви намагаєтесь запустити код із синтаксичною помилкою.
Приклад
try {
eval("alert('Hello)"); // Відсутність ' продукує помилку
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Спробуйте самі »
Type Error
Помилка TypeError видається, якщо ви використовуєте значення, що виходить за межі діапазону очікуваних типів:
Приклад
let num = 1;
try {
num.toUpperCase(); // Ви не можете конвертувати число в верхній регістр
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Спробуйте самі »
Помилка URI (Uniform Resource Identifier) Error
Помилка URIError видається, якщо ви використовуєте неприпустимі символи в функції URI:
Приклад
try {
decodeURI("%%%"); // Ви не можете декодувати URI знаки відсотка
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Спробуйте самі »
Нестандартні властивості об’єкту Error
Mozilla та Microsoft визначають деякі нестандартні властивості об’єкту error:
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)
Не використовуйте ці властивості на публічних вебсайтах. Вони не будуть працювати в усіх браузерах.
Повний довідник Error (помилок)
Для отримання детальної інформації про об’єкт Error, відвідайте Повний довідник JavaScript Error на нашому сайті W3Schools українською.
