实验三 Web基础-JavaScript

news2024/10/10 4:35:25

实验三 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()
  {
  	 // 获取用户输入的数字  
      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">
    	请输入一个数字：<input type="text" value="" name="number"/><br>
    	平方数：<input type="text" name="result"/>
  		<input type="button" value="求平方" onclick="sqrt()"/>
  </form>
  </body>
</html>

在这里插入图片描述

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


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript">
    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">
    请输入字母：<input type="text" id="text-input" name="letters" />
    <input type="button" value="确定" onclick="validateInput()" />
  </form>
</body>
</html>

在这里插入图片描述

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="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>
  <input type="text" class="one" id="num1">
  <select id="operation">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">×</option>
    <option value="/">÷</option>
  </select>
  <input type="text" class="one" id="num2">
  <button onclick="calculate()">=</button>
  <input type="text" class="one" id="result">

  <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>