下载掌阅APP，畅读海量书库
立即打开
|
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> <input type="text" id="id-data-a"
/> </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> <input type="text" id="id-data-b"
/> </td>
22 <th><label> = </label></th>
23 <td> <input type="text" id="id-result" disabled
/> </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）