JavaScript 错误处理语句示例

学习&实践爱好者

已于 2023-04-21 08:38:47 修改

阅读量335

点赞数

分类专栏： JavaScrip技术文章标签： javascript

于 2021-09-29 21:16:10 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/120503886

版权

JavaScrip技术专栏收录该内容

136 篇文章 25 订阅

订阅专栏

JavaScript 错误处理语句示例

try 语句定义在执行时进行错误测试的代码块。

catch 语句处理错误——定义当 try 代码块发生错误时，所执行的代码块。 try 和 catch 是成对出现的。

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

语法

try {

... //异常的抛出

} catch(e) {

... //异常的捕获与处理

} finally {

... //结束处理

}

throw 语句创建自定义错误——创建或抛出异常（exception）。把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

例1、源码如下：

<!DOCTYPE html>
<html>
<title>JavaScript错误处理简单示例</title>

<body>

<p> 返回运算结果：</p>
<p id="result"></p>
<p> 错误提示：</p>
<p id="err_result"></p>

<script>
try
  {
    //var y = 10;  //访问未定义的变量y
    var x = 5 + y; // 抛出引用错误
    document.getElementById("result").innerHTML = x;	
  } 
catch(err)
  {
    document.getElementById("err_result").innerHTML = err.name + "：" + err.message;
  }
</script>

</body>
</html>

【注、document.getElementById()是JavaScript获取网页标签元素的方法】

保存为：JavaScript错误处理例1.html

用浏览器运行测试之，效果如下：

例2、源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS使用throw错误处理示例</title>
</head>
<body>

<p>请输出一个 5 到 10 之间的数字:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</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 "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}
</script>

</body>
</html>

保存为：JS错误处理例2.html

用浏览器运行测试之，效果如下：

JavaScript 事件(Events)，事件是在浏览器中发生的操作，可由用户或浏览器本身启动。如：
onchange 表单元素的内容改变时触发。
onfocus     元素获取焦点时触发
onclick   当用户点击某个对象时触发。
onmouseup   鼠标按键被松开时触发。
onmousedown   鼠标按钮被按下时触发。
ondblclick 当用户双击某个对象时触发。
onkeydown   某个键盘按键被按下时触发。
onkeyup   某个键盘按键被松开时触发。
onkeypress   某个键盘按键被按下并松开时触发。

JS的事件介绍可见 https://blog.csdn.net/cnds123/article/details/127103830

例3、将上面的例2改为使用事件onkeyup，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS错误处理使用事件的示例</title>
</head>
<body>

<p>请输出一个 5 到 10 之间的数字:</p>

<input  type="text"  onkeyup="myFunction()">

<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    //x = document.getElementById("demo").value;
    x = document.querySelector("input").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}
</script>

</body>
</html>

保存为：JS错误处理使用事件的例3.html

用浏览器运行测试之，效果如下：