前端案例：簡易計算器的實現（dom操作、target、eval函數、try catch、switch-case）

目錄

一、案例效果

二、涉及要點

三、完整代碼+詳細注釋

一、案例效果

二、涉及要點

1. 文本域標簽 的 readonly 屬性用于設置文本域文字為只讀；

2. DOM 獲取元素，getElementById()?獲取帶有指定 id 的節點；

3. DOM 事件中的 target 是指獲取事件的目標，即觸發事件的真實元素。如下代碼中：

btn.onclick = function (e) {

//判斷只有點擊到按鈕上才會將信息錄入“顯示屏”

if (e.target.nodeName === "BUTTON") {

e.target.nodeName，e是指觸發事件，名稱自己定義；target.nodeName 是獲取觸發事件元素的標簽名，我們這里獲取按鈕 button，意為只有觸發事件的元素為按鈕時才執行下面邏輯。除此之外還有：

e.target.id

4.?eval 函數

eval() 函數用于計算 JavaScript 字符串，并把它作為腳本代碼來執行。如果參數是一個表達式，eval() 函數將執行表達式。如果參數是 Javascript 語句，eval() 將執行 Javascript 語句。

所以當我們點擊按鈕，將表達式寫入“顯示屏“，該函數便會自動執行計算。

5. try catch

//格式

try {

tryCode - 嘗試執行代碼塊

}

catch(err) {

catchCode - 捕獲錯誤的代碼塊

}

finally {

finallyCode - 無論 try / catch 結果如何都會執行的代碼塊

}

6.?switch-case語句

switch ( 表達式 ){

case 值1:

語句塊1

break;（結束執行，跳出當前語句）

case 值n:

語句塊n

break;

default:

語句塊n+1( 前面全為false才執行此語句塊 )

}

三、完整代碼+詳細注釋

JavaScript web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。