矿工模拟器官方下载

書名： 15天學會JavaScript（視頻教學版）
作者名：王金柱
本章字數： 837字
更新時間： 2019-12-06 14:00:38

3.10　開發實戰：ECMAScript運算符工具

基于本章中學習到的知識，本節我們設計開發一個ECMAScript運算符表達式工具。由于還沒有學習到條件語句等方面的知識，所以這個ECMAScript運算符表達式工具實現的功能還比較簡單（后面的章節中會進一步完善）。希望通過該開發實戰，可以幫助讀者盡快掌握關于ECMAScript語法中運算符表達式的相關知識內容。

下面是ECMAScript運算符表達式工具的網頁代碼（詳見源代碼ch03目錄中operator\ch03-js-operator.html文件）：

【代碼3-33】

    01   <table>
    02        <tr>
    03            <th><label for="id-data-a">運算數</label></th>
    04            <th><label for="seloper">運算符</label></th>
    05            <th><label for="id-data-b">運算數</label></th>
    06            <th><label>等于</label></th>
    07            <th><label for="id-result">運算結果</label></th>
    08        </tr>
    09        <tr>
    10            <td>&nbsp;&nbsp;<input type="text" id="id-data-a"
/>&nbsp;&nbsp;</td>
    11            <td>
    12        <select id="seloper" name="name-operator"
onchange="on_seloper_change(this);">
    13                      <option value="0" selected = "selected">請選擇...</option>
    14                      <option value="+">+</option>
    15                      <option value="-">-</option>
    16                      <option value="*">*</option>
    17                      <option value="/">/</option>
    18                      <option value="%">%</option>
    19                 </select>
    20            </td>
    21            <td>&nbsp;&nbsp;<input type="text" id="id-data-b"
/>&nbsp;&nbsp;</td>
    22            <th><label>&nbsp;&nbsp;=&nbsp;&nbsp;</label></th>
    23            <td>&nbsp;&nbsp;<input type="text" id="id-result" disabled
/>&nbsp;&nbsp;</td>
    24        </tr>
    25   </table>

關于【代碼3-33】的分析如下：

這段代碼主要是通過<table>標簽元素定義了ECMAScript運算符表達式工具的界面。其中，第10行和第21行代碼通過<input>標簽元素定義了兩個原始運算數的輸入框；第12～19行代碼定義了一個<select>下拉菜單選擇框，用于選取運算符；第23行代碼定義了另一個<input>標簽元素，用于顯示輸出運算結果。

下面是ECMAScript運算符表達式工具的JS腳本代碼（詳見源代碼ch03目錄中operator\ch03-js-operator.html文件）：

【代碼3-34】

    01   <script type="text/javascript">
    02        function on_seloper_change(thisid) {
    03            var result = "";
    04            var a = document.getElementById("id-data-a").value;
    05            var b = document.getElementById("id-data-b").value;
    06            var oper = document.all.seloper.options[document.all.seloper.
selectedIndex].value;
    07            if(oper == "0") {
    08                 document.getElementById("id-data-a").value = "";
    09                 document.getElementById("id-data-b").value = "";
    10            } else {
    11                 result = eval(a + oper + b);
    12            }
    13            document.getElementById("id-result").value = result;
    14        }
    15   </script>

關于【代碼3-34】的分析如下：

第02～14行代碼是【代碼3-33】中定義的事件處理函數“on_seloper_change(this)”的具體實現。其中，第03行代碼定義了一個變量（result），用于保存運算結果；第04行和第05行代碼獲取了用戶輸入的兩個原始運算數；第06行代碼獲取了用戶選取的運算符；第07～12行通過if條件語句判斷用戶選取的運算符，如果是無效的運算符則清空原始運算數輸入框，而如果是有效的運算符則通過第11行代碼中“eval()”函數進行計算；第13行代碼將運算結果顯示輸出在頁面中的文本框內。

下面測試【代碼3-33】和【代碼3-34】定義的HTML網頁，初始效果如圖3.36所示。

然后，在兩個運算數文本框中輸入任意數字（比如123和789），頁面效果如圖3.37所示。

圖3.36　ECMAScript運算符工具（1）

圖3.37　ECMAScript運算符工具（2）

點擊下拉菜單并選擇“+”運算符，頁面效果如圖3.38所示。下面，再次點擊下拉菜單并選擇“*”運算符，頁面效果如圖3.39所示。

圖3.38　ECMAScript運算符工具（3）

圖3.39　ECMAScript運算符工具（4）

官术网_书友最值得收藏!

15天學會JavaScript（視頻教學版）

3.10 開發實戰：ECMAScript運算符工具

3.10　開發實戰：ECMAScript運算符工具