实验三 Web基础-JavaScript
码农幻想梦 2024-10-13 16:03:02 阅读 95
实验三 Web基础-JavaScript
目的：
1、理解和掌握Javascript基本语法
2、掌握JavaScript操作表单对象的方法
3、理解和掌握JavaScript的函数与事件
4、理解JavaScript的内置对象
实验要求：
1、使用JavaScript语言实现实验要求
2、要求提交实验报告，将代码和实验结果页面截图放入报告中，附实验报告。文件命名规则”学号_姓名.rar”。
3、实验心得。
实验过程：
1、函数与事件的使用。
编写一个html页面，使用Javascript完成数字的平方计算。完成下面的JS代码，并验证你的程序。
<code><!DOCTYPE html>
<html>
<head>
<script type="text/javascript">code>
function sqrt()
{
// 获取用户输入的数字
let number = parseFloat(document.forms['f1'].elements['number'].value);
// 计算平方
let result = number * number;
// 将结果显示在结果输入框中
document.forms['f1'].elements['result'].value = result;
}
</script>
</head>
<body>
<form name="f1">code>
请输入一个数字：<input type="text" value="" name="number"/><br>code>
平方数：<input type="text" name="result"/>code>
<input type="button" value="求平方" onclick="sqrt()"/>code>
</form>
</body>
</html>
2、要求文本框中只能输入字母，参考如下：（可使用JavaScript内置对象String的方法测试数字和字母）
<code>
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<script type="text/javascript">code>
function validateInput() {
// 获取文本框的值
let inputValue = document.getElementById('text-input').value;
// 使用正则表达式测试输入值是否只包含字母，是返回true，否返回false
let isOnlyLetters = /^[a-zA-Z]+$/.test(inputValue);
// 如果不是只包含字母，则弹出提示框
if (!isOnlyLetters) {
alert('你输入的字符串只能是字母');
} else {
alert('输入合法')
}
}
</script>
</head>
<body>
<form name="f1">code>
请输入字母：<input type="text" id="text-input" name="letters" />code>
<input type="button" value="确定" onclick="validateInput()" />code>
</form>
</body>
</html>
3、在文本框分别输入两个数，实现两个数的+、-、*、/运算，点击“=按钮将”结果显示在文本框中。界面设计可参考下图。注意对文本框输入的数据是否是数字要进行判断。
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<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>
<input type="text" class="one" id="num1">code>
<select id="operation">code>
<option value="+">+</option>code>
<option value="-">-</option>code>
<option value="*">×</option>code>
<option value="/">÷</option>code>
</select>
<input type="text" class="one" id="num2">code>
<button onclick="calculate()">=</button>code>
<input type="text" class="one" id="result">code>
<script>
function calculate() {
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>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。