javaweb 实验3

做人求其滴

于 2024-09-28 13:15:21 发布

阅读量442

点赞数 7

文章标签： javaweb jsp 前端表单对象事件监听

本文链接：https://blog.csdn.net/CH3CH2CH4/article/details/142604032

版权

我发现了有些人喜欢静静看博客不聊天呐，

但是ta会点赞。

这样的人呢帅气低调有内涵，

美丽大方很优雅。

说的就是你，

不用再怀疑哦

实验三 Web基础-JavaScript

目的：

1、理解和掌握Javascript基本语法

2、掌握JavaScript操作表单对象的方法

3、理解和掌握JavaScript的函数与事件

4、理解JavaScript的内置对象

实验要求：

1、使用JavaScript语言实现实验要求

2、要求提交实验报告，将代码和实验结果页面截图放入报告中，附实验报告。文件命名规则”学号_姓名.rar”。

3、实验心得。

实验过程：

1、函数与事件的使用。

编写一个html页面，使用Javascript完成数字的平方计算。完成下面的JS代码，并验证你的程序。

<!DOCTYPE html>

<html>

<head>

function sqrt()

{

}

</script>

</head>

<body>

请输入一个数字：<input type="text" value="" name="number"/><br>

平方数：<input type="text" name="result"/>

</form>

</body>

</html>

2、要求文本框中只能输入字母，参考如下：（可使用JavaScript内置对象String的方法测试数字和字母）

3、在文本框分别输入两个数，实现两个数的+、-、*、/运算，点击“=按钮将”结果显示在文本框中。界面设计可参考下图。注意对文本框输入的数据是否是数字要进行判断。

实验代码&结果：

第一题：

<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript">
        function sqrt()
        {
            // var num = document.getElementsByName("f1");  //类型NodeList(1) [form]
            // console.log(num);
            // var res = num*num;
            // document.getElementsByName("result") = res;  
            // console.log(document.getElementsByName("result"));  
            
            var num = document.getElementsByName("number")[0].value;
            console.log(num);
            var res = num * num;
            document.getElementsByName("result")[0].value = res;
            console.log(document.getElementsByName("result")[0].value);
        }
  </script>
  </head>
  
  <body>
  <form name="f1">
    	请输入一个数字：<input type="text" value="" name="number"/><br>
    	平方数：<input type="text" name="result"/>
  		<input type="button" value="求平方" onclick="sqrt()"/>
  </form>
  </body>
</html>

【运行结果】

第二题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入字母</title>
    <script>
        function judge(){
            var str = document.getElementsByName("input")[0].value;
            //console.log(typeof(str));
            for(let i=0; i<str.length; i++)
            {
                if(str[i] >= '0' && str[i] <= '9')
                {
                    alert("你输入的字符串只能是字母");
                    break;
                }
            }

        }
    </script>
</head>
<body>
    <form name="f1">
    	输入字母：<input type="text" value="" name="input"/>
  		<input type="button" value="确定" onclick="judge()"/>
  </form>
</body>
</html>

【运行结果】

第三题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入字母</title>
    <script>
        function calculate(){
            let num1, num2;
            //读取是字符串, 需要转数字
            num1 = parseFloat(document.getElementsByName("num1")[0].value);
            num2 = parseFloat(document.getElementsByName("num2")[0].value);
            
            //提取运算符对应的value值：add、sub...
            //typeof: string:
            var operationValue = document.getElementById("calculator").value;
            // alert(typeof(operation));
            // alert(operationValue);
            if(operationValue == "add")
            {
                document.getElementsByName("result")[0].value = num1+num2;
            }
            else if(operationValue == "sub"){
                document.getElementsByName("result")[0].value = num1-num2;
            }
            else if(operationValue == "mul"){
                document.getElementsByName("result")[0].value = num1*num2;
            }
            else{
                if (num2 === 0) 
                {
                    alert("除数不能为0");
                    return;
                }
                document.getElementsByName("result")[0].value = num1/num2;
            }
        }
    </script>
</head>
<body>
    <form name="f1">
    	请输入两个数进行简单的运算：<br>
        <input type="text" value="" name="num1" />
        <!-- 下拉框 -->
        <select id="calculator"> 
            <option value="add">+</option>
            <option value="sub">-</option>
            <option value="mul">*</option>
            <option value="div">/</option>
        </select>
        <input type="text" value="" name="num2" />
  		<input type="button" value="=" onclick="calculate()"/>
        <input type="text" value="" name="result" />
  </form>
</body>
</html>

【运行结果】

实验心得：

调试了挺久的，document.getElementsByName，或者ById都是返回的NodeList类型，要想获得整型：document.getElementsByName("number")[0].value

下拉框是找了半天的w3school，找不到就去csdn找了，然后就是怎么读取运算符的问题，document.getElementById("calculator")[0].value，四个读取后全是add（笑死🤣），把[0]去掉就没问题了。Csdn和科大讯飞AI都是用addEventListener里面用上匿名函数（类似lambda表达式）又复杂又不行，一行多简单啊，直接搞定了