我发现了有些人喜欢静静看博客不聊天呐，
但是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表达式）又复杂又不行，一行多简单啊，直接搞定了
