JavaScript 错误处理语句示例

我就是我 2022-09-13 04:07 153阅读 0赞

### 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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16][]

**例****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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16 1][]

JavaScript 事件(Events)，事件是在浏览器中发生的操作，可由用户或浏览器本身启动。如当松开按键时将触发onchange事件。

**例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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/7974ebc4d7cc4a2cbe17672814cee620.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/0ea624b785804b9b886fbcc7921b00c9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_17_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/47085500d8e44b34ad63d8c4e35bc64c.png