• 欢迎来到本站,本站主要做程序员相关技术、博客、笔记,如果喜欢本网站那么赶紧使用Ctrl+D 收藏吧!
  • 如果有任何疑问,可以在下方文章下方留下你的评论~

Demo JavaScript Error handling throw、try and catch

电子书籍 6个月前 (12-19) 7次浏览 0个评论

JavaScript error – throw, try and catch

try:Statement to test the code block.
catch:Statement processing error.
throw:Statement to create a custom error.
finally:Statement after the try and catch statements, the statement is executed regardless of whether an exception has been triggered.

JavaScript error

When the JavaScript engine executes JavaScript code, various errors occur.
It can be a syntax error, usually a coding error or typo caused by a programmer.
It could be a misspelling or missing feature in the language (possibly due to browser differences).
An error may be caused by an error output from the server or the user.
Of course, it can also be due to many other unpredictable factors.

JavaScript throw error

When an error occurs, when something goes wrong, the JavaScript engine usually stops and generates an error message.
The technical term for this is: Javascript will throw an error.

JavaScript try and catch

The try statement allows us to define blocks of code that are error tested at execution time.

The catch statement allows us to define the block of code to be executed when an error occurs in the try block.

The JavaScript statements try and catch appear in pairs.

try {
    ...    //Exception throwing
} catch(e) {
    ...    //Exception capture and handling
} finally {
    ...    //End processing
}

Demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>china pen pal</title>
<script>
var txt="";
function message(){
    try {
        adddlert("Welcome guest!");
    }
    catch(err) {
        txt="There is an error on this page. \n\n";
        txt+="Error description:" + err.message + "\n\n";
        txt+="Click OK to continue. \n\n";
        alert(txt);
    }
}
</script>
</head>
<body>

<input type="button" value="view message" onclick="message()" />

</body>
</html>

Result

Demo JavaScript Error handling throw、try and catch

Finally

Finally statement executes the code block regardless of whether an exception was generated in the previous try and catch.

Demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>china pen pal</title>
</head>
<body>
<p>No matter whether the input is correct or not, the input box will be cleared after re input.</p>
<p>Please enter a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Click me</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 "The value is empty";
    if(isNaN(x)) throw "Value is not a number";
    x = Number(x);
    if(x > 10) throw "Too big";
    if(x < 5) throw "Too small";
  }
  catch(err) {
    message.innerHTML = "error: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>

Throw

The throw statement allows us to create custom errors.

The correct technical term is: create or throw an exception.

If you use throw with try and catch, you can control the program flow and generate custom error messages.

Demo

This example detects the value of the input variable.
If the value is wrong, an exception (error) is thrown.
Catch catches the error and displays a custom error message:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>china pen pal</title>
</head>
<body>

<p>Please output a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test input</button>
<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "The value is empty";
        if(isNaN(x)) throw "It's not a number";
        x = Number(x);
        if(x < 5)    throw "Too small";
        if(x > 10)   throw "Too big";
    }
    catch(err) {
        message.innerHTML = "error: " + err;
    }
}
</script>

</body>
</html>

Demo JavaScript Error handling throw、try and catch


中国笔友, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Demo JavaScript Error handling throw、try and catch
喜欢 (0)
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址