zoukankan      html  css  js  c++  java
  • javaccript学习3

    JavaScript - 捕获错误

    当我们在网上冲浪时,总会看到带有 runtime 错误的 Javascript 警告框,同时会询问我们“是否进行 debug?”。像这样的错误信息或许对开发人员有用,对用户则未必。当错误发生时,他们往往会选择离开这个站点。

    本节向你讲解如何捕获和处理 Javascript 的错误消息,这样就可以为受众提供更多的便利。

    有两种在网页中捕获错误的方法:

    • 使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)
    • 使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)

    Try...Catch 语句

    try...catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。

    语法:

    try
    {
       //在此运行代码
    }
    catch(err)
    {
       //在此处理错误
    }

    注意:try...catch 使用小写字母。大写字母会出错。

    实例 1

    下面的例子原本用在用户点击按钮时显示 "Welcome guest!" 这个消息。不过 message() 函数中的 alert() 被误写为 adddlert()。这时错误发生了:

    <html>
    <head>
    <script type="text/javascript">
    function message()
    {
    adddlert("Welcome guest!")
    }
    </script>
    </head>
    
    <body>
    <input type="button" value="View message" onclick="message()" />
    </body>
    
    </html>

    我们可以添加 try...catch 语句,这样当错误发生时可以采取更适当的措施。

    下面的例子用 try...catch 语句重新修改了脚本。由于误写了 alert(),所以错误发生了。不过这一次,catch 部分捕获到了错误,并用一段准备好的代码来处理这个错误。这段代码会显示一个自定义的出错信息来告知用户所发生的事情。

    <html>
    <head>
    <script type="text/javascript">
    var txt=""
    function message()
    {
    try
      {
      adddlert("Welcome guest!")
      }
    catch(err)
      {
      txt="此页面存在一个错误。
    
    "
      txt+="错误描述: " + err.description + "
    
    "
      txt+="点击OK继续。
    
    "
      alert(txt)
      }
    }
    </script>
    </head>
    
    <body>
    <input type="button" value="View message" onclick="message()" />
    </body>
    
    </html>

    实例 2

    下一个例子会显示一个确认框,让用户来选择在发生错误时点击确定按钮来继续浏览网页,还是点击取消按钮来回到首页。如果 confirm 方法的返回值为 false,代码会把用户重定向到其他的页面。如果 confirm 方法的返回值为 true,那么代码什么也不会做。

    <html>
    <head>
    <script type="text/javascript">
    var txt=""
    function message()
    {
    try
      {
      adddlert("Welcome guest!")
      }
    catch(err)
      {
      txt="There was an error on this page.
    
    "
      txt+="Click OK to continue viewing this page,
    "
      txt+="or Cancel to return to the home page.
    
    "
      if(!confirm(txt))
        {
        document.location.href="http://www.w3school.com.cn/"
        }
      }
    }
    </script>
    </head>
    
    <body>
    <input type="button" value="View message" onclick="message()" />
    </body>
    
    </html>

    onerror 事件

    我们马上会讲解 onerror 事件。但首先您需要学习如何使用 throw 语句来创建异常。throw 语句可以与 try...catch 语句一起使用。

    throw 声明的作用是创建 exception(异常或错误)。

    实例

    throw 声明
    如何使用 throw 声明。

    Throw 声明

    throw 声明的作用是创建 exception(异常)。你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的。

    语法:

    throw(exception)

    exception 可以是字符串、整数、逻辑值或者对象。

    注意:使用小写字母编写 throw。使用大写字母会出错!

    实例 1

    下面的实例的作用是测定变量 x 的值。如果 x 的值大于 10 或者小于 0,错误就会被抛出 (throw)。这个错误被 catch 的参数捕获后,就会显示出自定义的出错信息。

    <html>
    <body>
    <script type="text/javascript">
    var x=prompt("Enter a number between 0 and 10:","")
    try
    { 
    if(x>10) 
    throw "Err1"
    else if(x<0)
    throw "Err2"
    } 
    catch(er)
    {
    if(er=="Err1") 
    alert("Error! The value is too high")
    if(er == "Err2") 
    alert("Error! The value is too low") 
    }
    </script>
    </body>
    </html>

    使用 onerror 事件是一种老式的标准的在网页中捕获 Javascript 错误的方法。

    实例

    onerror 事件
    如何使用 onerror 事件捕获网页中的错误。

    onerror 事件

    我们刚讲过如何使用 try...catch 声明来捕获网页中的错误。现在,我们继续讲解如何使用 onerror 事件来达到相同的目的。

    只要页面中出现脚本错误,就会产生 onerror 事件。

    如果需要利用 onerror 事件,就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用:msg(错误消息)、url(发生错误的页面的 url)、line(发生错误的代码行)。

    语法:

    onerror=handleErrfunction handleErr(msg,url,l)
    {
    //Handle the error here
    return true or false
    }

    浏览器是否显示标准的错误消息,取决于 onerror 的返回值。如果返回值为 false,则在控制台 (JavaScript console) 中显示错误消息。反之则不会。

    实例:

    下面的例子展示如何使用 onerror 事件来捕获错误:

    <html>
    <head>
    <script type="text/javascript">
    onerror=handleErr
    var txt=""
    
    function handleErr(msg,url,l)
    {
    txt="There was an error on this page.
    
    "
    txt+="Error: " + msg + "
    "
    txt+="URL: " + url + "
    "
    txt+="Line: " + l + "
    
    "
    txt+="Click OK to continue.
    
    "
    alert(txt)
    return true
    }
    
    function message()
    {
    adddlert("Welcome guest!")
    }
    </script>
    </head>
    
    <body>
    <input type="button" value="View message" onclick="message()" />
    </body>
    
    </html>
  • 相关阅读:
    Nginx 部署多个 web 项目(虚拟主机)
    Nginx 配置文件
    Linux 安装 nginx
    Linux 安装 tomcat
    Linux 安装 Mysql 5.7.23
    Linux 安装 jdk8
    Linux 安装 lrzsz,使用 rz、sz 上传下载文件
    springMVC 拦截器
    spring 事务
    基于Aspectj 注解实现 spring AOP
  • 原文地址:https://www.cnblogs.com/liupeng61624/p/3228424.html
Copyright © 2011-2022 走看看