我发现了有些人喜欢静静看博客不聊天呐，
但是ta会点赞。
这样的人呢帅气低调有内涵，
美丽大方很优雅。
说的就是你，
不用再怀疑哦
实验三 Web基础-JavaScript
目的：
1、 理解和掌握Javascript基本语法
2、 掌握JavaScript操作表单对象的方法
3、 理解和掌握JavaScript的函数与事件
4、 理解JavaScript的内置对象
实验要求：
1、 使用JavaScript语言实现实验要求
2、 要求提交实验报告，将代码和实验结果页面截图放入报告中，附实验报告。文件命名规则”学号_姓名.rar”。
3、 实验心得。
实验过程：
1、函数与事件的使用。
编写一个html页面，使用Javascript完成数字的平方计算。完成下面的JS代码，并验证你的程序。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function sqrt()
{
}
</script>
</head>
<body>
<form name="f1">
请输入一个数字：<input type="text" value="" name="number"/><br>
平方数：<input type="text" name="result"/>
<input type="button" value="求平方" οnclick="sqrt()"/>
</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表达式）又复杂又不行，一行多简单啊，直接搞定了
