一、实验名称
实验6 JavaScript函数（2）
二、实验日期
2015年10月js脚本开发21日
三、实验目的
1、理解JavaScript内置函数的概念。
2、掌握JavaScript数字类型内置函数的使用方法。
3、掌握JavaScript字符类型内置函数的使用方法。
4、掌握JavaScript编码和解码类型内置函数的使用方法。
5、熟悉JavaScript三种编码和解码类型内置函数的区别，会选择性地加以运用。
四、实验环境
1、硬件环境：i386兼容机，2G剩余硬盘空间。
2、软件环境：Windows XP以上兼容系统
3、使用资源：开发环境Dreamweaver CS6
五、实验内容与步骤
练习1：运用数字型内置函数，在页面上输入一个字符串，验证输入的是不是非数字或者是无穷大的数字，如输入的是整数，则实现：单击“二进制”按钮，在其后的文本框中显示结果；单击“八进制”按钮，在其后的文本框中显示结果；单击“十六进制”按钮，在其后的文本框中显示结果。如果输入的是小数，则将其转换成数字形式。
操作步骤如下：
（1）在页面中添加用于输入一个字符串的表单及表单元素。具体代码如下：
<form name="form1" method="post" action="">
请输入数值：<input name="num" type="text" id=" num " size="40"><br><br>
<input name="Button" type="button" class="btn_grey" value="二进制">
<input name="num2" type="text" id="num2" size="40"><br><br>
<input name="Button" type="button" class="btn_grey" value="八进制">
<input name="num8" type="text" id="num8" size="40"><br><br>
<input name="Button" type="button" class="btn_grey" value="十六进制">
<input name="num16" type="text" id="num16" size="40"><br><br>
<input name="Button" type="button" class="btn_grey" value="小数">
<input name="num_float" type="text" id="num_float" size="40"><br><br>
</form>
（2）编写一个自定义的JavaScript函数getNum(str,radix)，获取相应进的数值，getNum(str,radix)函数的具体代码如下：
<script language="javascript">
    function getNum(str,radix){//参数str是获取的字符串的值，radix为进制，如字符串是小数，则为0
        //TODO (写你的代码)
    }
</script>
练习2：定义一个JavaScript函数calculator()，用于实现简单的计算器。在输入算式之后，单击计算，在该文本框中显示计算结果。
操作步骤如下：
（1）在页面中添加用于输入要计算的算式的表单及表单元素。具体代码如下：
 
<form name="form1" method="post" action="">
输入要计算的算式：<input name="formula" type="text" id=" formula " size="40">
<input name="button" type="button" value="计算结果" onclick="calculator();">
<input name="result" type="text" id="result" size="40" >
</form>
 
（2）编写自定义的JavaScript函数calculator()，用于实现计算器的功能，函数的具体代码如下：(计算器里要考虑异常处理，还要考虑如何把结果放在文本框中(赋值))
 
<script language="javascript">
    function calculator(){
        //TODO (写你的代码)
    }
</script>
练习:3：在文本框中输入一行字符串，然后分别运用三种编码和解码函数进行编码解码，并显示效果。
操作步骤如下：
（1）在页面中添加用于输入一个字符串的表单及表单元素。具体代码如下：
<form name="form1" method="post" action="">
请输入字符串：<input name="text" type="text" id="text" size="140"><br><br>
请选择编码解码类型：<select name="sel" id="select">
<option value="escape" id="escape">escape</option>
<option value="unescape" id="unescape">unescape</option>
<option value="encodeURI">encodeURI</option>
<option value="decodeURI">decodeURI</option>
<option value="encodeURIComponent">encodeURIComponent</option>
<option value="decodeURIComponent">decodeURIComponent</option>
</select>
<br><br>
<input type='button' value='结果为' />：<input name="text" type="result" id="result" size="140">
</form>
（2）编写相应的JavaScript脚本代码，具体代码如下：
<title>js的编码解码函数</title>
<script type="text/javascript">
function getResult(){
}
</script>
效果如下图所示：（可参考实验4中的最后一道练习题）
六、实验思考
JavaScript中的编码和解码类型内置函数有哪些？怎么使用它们有什么区别？
七、实验结果或结论

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。