实验三 Web基础-JavaScript
目的：
1、理解和掌握Javascript基本语法
2、掌握JavaScript操作表单对象的方法
3、理解和掌握JavaScript的函数与事件
4、理解JavaScript的内置对象
实验要求：
1、使用JavaScript语言实现实验要求
2、要求提交实验报告，将代码和实验结果页面截图放入报告中，附实验报告。文件命名规则”学号_姓名.rar”。
3、实验心得。
实验过程：
1、函数与事件的使用。
编写一个html页面，使用Javascript完成数字的平方计算。完成下面的JS代码，并验证你的程序。
<!DOCTYPEhtml><html><head><scripttype="text/javascript">functionsqrt(){// 获取用户输入的数字 let number =parseFloat(document.forms['f1'].elements['number'].value);// 计算平方 let result = number * number;// 将结果显示在结果输入框中
document.forms['f1'].elements['result'].value = result;}</script></head><body><formname="f1">
请输入一个数字：<inputtype="text"value=""name="number"/><br>
平方数：<inputtype="text"name="result"/><inputtype="button"value="求平方"onclick="sqrt()"/></form></body></html>
2、要求文本框中只能输入字母，参考如下：（可使用JavaScript内置对象String的方法测试数字和字母）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scripttype="text/javascript">functionvalidateInput(){// 获取文本框的值 let inputValue = document.getElementById('text-input').value;// 使用正则表达式测试输入值是否只包含字母，是返回true，否返回false let isOnlyLetters =/^[a-zA-Z]+$/.test(inputValue);// 如果不是只包含字母，则弹出提示框 if(!isOnlyLetters){alert('你输入的字符串只能是字母');}else{alert('输入合法')}}</script></head><body><formname="f1">
请输入字母：<inputtype="text"id="text-input"name="letters"/><inputtype="button"value="确定"onclick="validateInput()"/></form></body></html>
3、在文本框分别输入两个数，实现两个数的+、-、*、/运算，点击“=按钮将”结果显示在文本框中。界面设计可参考下图。注意对文本框输入的数据是否是数字要进行判断。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Simple Calculator</title><style>.one{width: 70px;margin: 5px;text-align: center;}select{height: 20px;margin: 5px;}button{margin: 5px;padding: 5px 10px;}</style></head><body>
请输入两个数进行简单的运算<br><br><inputtype="text"class="one"id="num1"><selectid="operation"><optionvalue="+">+</option><optionvalue="-">-</option><optionvalue="*">×</option><optionvalue="/">÷</option></select><inputtype="text"class="one"id="num2"><buttononclick="calculate()">=</button><inputtype="text"class="one"id="result"><script>functioncalculate(){let num1 =+document.getElementById('num1').value;let num2 =+document.getElementById('num2').value;let operation = document.getElementById('operation').value;let resultInput = document.getElementById('result');let result;// 执行运算 switch(operation){case'+':
result = num1 + num2;break;case'-':
result = num1 - num2;break;case'*':
result = num1 * num2;break;case'/':// 检查除数是否为零 if(num2 ===0){alert('除数不能为零！');
resultInput.value ='';return;}
result = num1 / num2;break;default:
result ='未知操作';}// 显示结果
resultInput.value = result;}</script></body></html>
本文转载自: https://blog.csdn.net/2301_76979886/article/details/142728041
版权归原作者 码农幻想梦 所有， 如有侵权，请联系我们删除。
版权归原作者 码农幻想梦 所有， 如有侵权，请联系我们删除。