鬆軟科技Web課堂:JavaScript 異常

来源:https://www.cnblogs.com/sysoft/archive/2019/12/17/12052900.html
-Advertisement-
Play Games

JavaScript 錯誤 - Throw 和 Try to Catch try 語句使您能夠測試代碼塊中的錯誤。 catch 語句允許您處理錯誤。 throw 語句允許您創建自定義錯誤。 finally 使您能夠執行代碼,在 try 和 catch 之後,無論結果如何。 錯誤總會發生! 當執行 J ...


JavaScript 錯誤 - Throw 和 Try to Catch

 

try 語句使您能夠測試代碼塊中的錯誤。

catch 語句允許您處理錯誤。

throw 語句允許您創建自定義錯誤。

finally 使您能夠執行代碼,在 try 和 catch 之後,無論結果如何。

錯誤總會發生!

當執行 JavaScript 代碼時,會發生各種錯誤。

錯誤可能是程式員的編碼錯誤,由錯誤輸入引起的錯誤,或者由於其他不可預見的問題。

實例

在本例中,我們通過 adddlert 編寫警告代碼來故意製造了一個錯誤:

<p id="demo"></p>

<script>
try {
    adddlert("歡迎訪問!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

 

JavaScript 將 adddlert 捕獲為一個錯誤,然後執行代碼來處理該錯誤。

JavaScript try 和 catch

try 語句允許您定義一個代碼塊,以便在執行時檢測錯誤。

catch 語句允許你定義一個要執行的代碼塊,如果 try 代碼塊中發生錯誤。

JavaScript 語句 try 和 catch 成對出現:

try {
     供測試的代碼塊
}
 catch(err) {
     處理錯誤的代碼塊
} 

 

JavaScript 拋出錯誤

當發生錯誤時,JavaScript 通常會停止並產生錯誤消息。

技術術語是這樣描述的:JavaScript 將拋出異常(拋出錯誤)。

JavaScript 實際上會創建帶有兩個屬性的 Error 對象:name 和 message。

throw 語句

throw 語句允許您創建自定義錯誤。

從技術上講您能夠拋出異常(拋出錯誤)。

異常可以是 JavaScript 字元串、數字、布爾或對象:

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()">測試輸入</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> 

 

HTML 驗證

以上代碼僅僅是一個例子。

現代瀏覽器通常會結合 JavaScript 與內置的 HTML 驗證,通過使用在 HTML 屬性中定義的預定義的驗證規則:

<input id="demo" type="number" min="5" max="10" step="1">

 

您將在本教程稍後的章節學到更多有關表單驗證的知識。

finally 語句

finally 語句允許您在 try 和 catch 之後執行代碼,無論結果:

try {
     供測試的代碼塊
}
 catch(err) {
     處理錯誤的代碼塊
} 
finally {
     無論 try / catch 結果如何都執行的代碼塊
}

實例

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 >  10) throw "太大";
        if(x <  5) throw "太小";
    }
    catch(err) {
        message.innerHTML = "錯誤:" + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

 

Error 對象

JavaScript 擁有當錯誤發生時提供錯誤信息的內置 error 對象。

error 對象提供兩個有用的屬性:name 和 message。

Error 對象屬性

屬性描述
name 設置或返回錯誤名
message 設置或返回錯誤消息(一條字元串)

Error Name Values

error 的 name 屬性可返回六個不同的值:

錯誤名描述
EvalError 已在 eval() 函數中發生的錯誤
RangeError 已發生超出數字範圍的錯誤
ReferenceError 已發生非法引用
SyntaxError 已發生語法錯誤
TypeError 已發生類型錯誤
URIError 在 encodeURI() 中已發生的錯誤

下麵為您詳解這六個不同的值。

Eval 錯誤

EvalError 指示 eval() 函數中的錯誤。

更新版本的 JavaScript 不會拋出任何 EvalError。請使用 SyntaxError 代替。

範圍錯誤

RangeError 會在您使用了合法值的範圍之外的數字時拋出。

例如:您不能將數字的有效位數設置為 500。

實例

var num = 1;
try {
    num.toPrecision(500);   // 數無法擁有 500 個有效數
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
} 

 

引用錯誤

假如您使用(引用)了尚未聲明的變數,則 ReferenceError 會被拋出:

實例

var x;
try {
    x = y + 1;   // y 無法被引用(使用)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
} 

 

語法錯誤

假如您計算帶語法錯誤的代碼,會 SyntaxError 被拋出:

實例

try {
    eval("alert('Hello)");   // 缺少 ' 會產生錯誤
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
} 

 

類型錯誤

假如您使用的值不在期望值的範圍之內,則 TypeError 被拋出:

實例

var num = 1;
try {
    num.toUpperCase();   // 您無法將數字轉換為大寫
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
 

URI 錯誤

假如您在 URI 函數中使用非法字元,則 URIError 被拋出:

實例

try {
    decodeURI("%%%");   // 您無法對這些百分號進行 URI 編碼
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
} 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 小程式APP生命周期需要先從app.js這個文件開始,App() 必須在 app.js 中調用,必須調用且只能調用一次,app.js中定義了一些應用的生命周期函數 onLaunch 當小程式初始化完成時,會觸發 onLaunch(全局只觸發一次) onShow 當小程式啟動,或從後臺進入前臺顯示,會 ...
  • 之前文章有寫到vue構造函數的實例化過程,只是對vue實例做了個粗略的描述,並沒有說明vue組件實例化的過程。本文主要對vue組件的實例化過程做一些簡要的描述。 組件的實例化與vue構造函數的實例化,大部分是類似的,vue的實例可以當做一個根組件,普通組件的實例化可以當做子組件。真實的DOM是一個樹 ...
  • DOM 樹 HTML 文檔的骨幹是標簽。 根據文檔對象模型(DOM),每個HTML標簽都是一個對象,同樣標簽內的文本也是一個對象。因此這些對象都可通過 JavaScript 操作 如果文檔中有空格(就像任何字元一樣),那麼它們將成為 DOM 中的文本節點,如果我們刪除它們,則不會有任何內容。 `` ...
  • HTML 網頁構成 摘要說明 結構(HTML) HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。 表現(CSS) CSS樣式是表現。就像網頁的外衣。比如,標題字體、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現 ...
  • 工作中遇到一個問題 for迴圈,再把迴圈出來的ID再進行二次請求 這就導致一個問題 請求結果返回順序不一致 原因:非同步請求會把回調事件放入微任務事件隊列,巨集任務執行完畢再執行微任務,具體參考事件隊列機制 解決方法: 通過map方法進行迴圈請求 將非同步請求方法封裝起來,返回一個promise 這樣將會 ...
  • 項目源碼: 發佈鏈接: 使用文檔: 安裝環境 如果出現錯誤: 請執行以下命令,解決方法鏈接: 創建項目 基於模版 現有項目,初始化 編寫腳本 執行的腳本, "參考示例" 配置參數 、`zone_id` 你在cloudflare托管的功能變數名稱信息 使用 workers.dev 子功能變數名稱,即預設的: 使用自定 ...
  • 遮罩層效果相信是許多開發需求時候經常會碰到的一個情況,實現遮罩層效果的方式有很多種,下麵介紹最簡單的一種,利用CSS來實現遮罩 dom節點代碼: 1 <!-- 進度條遮罩 --> <t:div id="shade" styleClass="shade" > </t:div> CSS樣式代碼 1 .u ...
  • 項目介紹 項目中需要用到下拉樹多選功能,找到兩個相關組件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-select-ext不支持樹結構,wujiawei0926-treeselect不支持多選,於是乾脆仿照moret ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...