15天学会JavaScript：视频教学版最新章节_王金柱著

2.7　开发实战：ECMAScript类型工具

本节基于前文介绍的ECMAScript语法基础知识，设计实现一个ECMAScript类型测试和转换工具。

下面是ECMAScript类型测试和转换工具的HTML网页代码（详见源代码ch02目录中TypeTo\ch02-js-typeto.html文件）：

【代码02-49】

    01  <table>
    02   <tr>
    03        <td><label for="id-type">原始输入:&nbsp;&nbsp;</label></td>
    04        <td><input type="text" id="id-type" value="" placeholder="请输入..."
onblur="on_id_type_blur('id-type');" /></td>
    05   </tr>
    06   <tr>
    07        <td><label for="id-typeof">typeof:&nbsp;&nbsp;</label></td>
    08        <td><input type="text" id="id-typeof" value="" placeholder="" readonly
/></td>
    09   </tr>
    10   <tr>
    11        <td><label for="id-literal">Literal:&nbsp;&nbsp;</label></td>
    12        <td><input type="text" id="id-literal" value="" placeholder=""
readonly /></td>
    13   </tr>
    14   <tr>
    15        <td><label for="id-number">Number:&nbsp;&nbsp;</label></td>
    16        <td><input type="text" id="id-number" value="" placeholder="" readonly
/></td>
    17   </tr>
    18   <tr>
    19        <td><label for="id-number">Boolean:&nbsp;&nbsp;</label></td>
    20        <td><input type="text" id="id-boolean" value="" placeholder=""
readonly /></td>
    21   </tr>
    22   <tr>
    23        <td><label for="id-string">String:&nbsp;&nbsp;</label></td>
    24        <td><input type="text" id="id-string" value="" placeholder="" readonly
/></td>
    25   </tr>
    26  </table>

关于【代码02-49】的分析如下：

这段代码主要是通过<table>标签元素定义ECMAScript类型测试和转换工具的界面。其中，第04行代码通过<input>标签元素定义一个原始文本输入框，并注册“onblur”（失去焦点）事件的处理方法（on_id_type_blur('id-type');）；第06～25行代码定义一组<input>标签元素，用于显示类型测试与转换的输出结果。

下面是ECMAScript类型测试和转换工具的JS脚本代码（详见源代码ch02目录中TypeTo\ch02-js-typeto.html文件）。

【代码02-50】

   01  <script type="text/javascript">
   02       function on_id_type_blur(idtype) {
   03           var v_type = document.getElementById(idtype).value;
   04           if(v_type == "null") {
   05                v_type = null;
   06           } else if(v_type == "undefined") {
   07                v_type = undefined;
   08           } else {
   09                v_type = v_type;
   10           }
   11           document.getElementById("id-typeof").value = typeof v_type;
   12           document.getElementById("id-literal").value = v_type;
   13           document.getElementById("id-number").value = Number(v_type);
   14           document.getElementById("id-boolean").value = Boolean(v_type);
   15           document.getElementById("id-string").value = String(v_type);
   16       }
   17  </script>

关于【代码02-50】的分析如下：

第02～16行代码是【代码02-49】中定义的事件处理函数“on_id_type_blur(idtype)”的具体实现。其中，第03行代码获取了用户输入的内容；第04～10行代码用于判断用户输入的内容是否为"null"或"undefined"特殊类型，如果“是”则直接赋值为特殊类型；第11～15行代码用于测试输入类型并进行强制类型转换。

运行测试HTML网页，效果如图2.49所示。在“原始输入”文本框中输入任意字符串（例如null、undefined和123等），页面效果分别如图2.50、图2.51和图2.52所示。

图2.49　ECMAScript类型测试和转换工具（1）

图2.50　ECMAScript类型测试和转换工具（2）

图2.51　ECMAScript类型测试和转换工具（3）

图2.52　ECMAScript类型测试和转换工具（4）

2.7 开发实战：ECMAScript类型工具

2.7　开发实战：ECMAScript类型工具