JavaScript的DOM作业

用户4129178170971
66 阅读5分钟

1.JavaScript 作业完成过程

1.1表单校验

页面素材

HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>表单</title>
    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }

        input {
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn {
            width: 150px;
        }

        .tip {
            color: #ff0000;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <h1>用户注册</h1>
        <form>
            用户名：
            <input type="text" id="username" name="username" placeholder="必须是 3 - 20 个字符，且只能包含字母、数字和下划线">
            <span class="tip" id="name_msg"></span> <br>
            密码：
            <input type="password" id="pwd" name="pwd" placeholder="密码必须是 6 - 20 个字符，且至少包含一个大写字母、一个小写字母和一个数字">
            <span class="tip" id="pwd_msg"></span>
            <br>
            确认密码：
            <input type="password" id="rePwd" name="rePwd" placeholder="确认密码与密码保持一致">
            <span class="tip" id="rePwd_msg"></span>
            <br>
            邮箱：
            <input type="text" id="email" name="email" placeholder="必须符合邮箱格式">
            <span class="tip" id="email_msg"></span>
            <br>
            年龄：
            <input type="text" id="age" name="age" placeholder="年龄必须在 1 - 120 之间">
            <span class="tip" id="age_msg"></span>
            <br>
            <input type="submit" value="提交" class="btn">
            <input type="reset" value="重置" class="btn">
        </form>
    </div>
    <script></script>
</body>
</html>

完成的代码

1.1.1 HTML代码

<!DOCTYPE html>
<html>
<head>
  <title>表单</title>
  <style>
    label {
      display: inline-block;
      width: 80px;
      text-align: right;
      margin-right: 10px;
    }

    input {
      width: 250px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .btn {
      width: 150px;
    }

    .tip {
      color: #ff0000;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div>
    <h1>用户注册</h1>
    <form id="myForm">
      用户名：
      <input type="text" id="username" name="username" placeholder="必须是 3 - 20 个字符，且只能包含字母、数字和下划线">
      <span class="tip" id="name_msg"></span> <br>

      密码：
      <input type="password" id="pwd" name="pwd" placeholder="密码必须是 6 - 20 个字符，且至少包含一个大写字母、一个小写字母和一个数字">
      <span class="tip" id="pwd_msg"></span>
      <br>
      确认密码：
      <input type="password" id="rePwd" name="rePwd" placeholder="确认密码与密码保持一致">
      <span class="tip" id="rePwd_msg"></span>
      <br>
      邮箱：
      <input type="text" id="email" name="email" placeholder="必须符合邮箱格式">
      <span class="tip" id="email_msg"></span>
      <br>
      年龄：
      <input type="text" id="age" name="age" placeholder="年龄必须在 1 - 120 之间">
      <span class="tip" id="age_msg"></span>
      <br>
      <input type="submit" value="提交" class="btn">
      <input type="reset" value="重置" class="btn">
    </form>
  </div>
  <!-- src="./JS/user.js" type="module" -->
  <script src="./JS/user.js" type="module">
  </script>
</body>
</html>

1.1.2 javascript部分代码

user.js文件代码

import {checkUsername,checkPassword,checkPassword2,checkeAge,checkeEmail} from './userFn.js';

document.querySelector("#username").addEventListener('blur', checkUsername);
document.querySelector("#pwd").addEventListener('blur', checkPassword);
document.querySelector("#rePwd").addEventListener('blur', checkPassword2);
document.querySelector("#email").addEventListener('blur', checkeEmail);
document.querySelector("#age").addEventListener('blur', checkeAge);
document.querySelector("#myForm").addEventListener('submit', (event) => {
  let flag1 = checkUsername();
  let flag2 = checkPassword();
  let flag3 = checkPassword2();
  let flag4 = checkeEmail();
  let flag5 = checkeAge();
  if (!(flag1 && flag2 && flag3 && flag4 && flag5)) {
    event.preventDefault();
  }
}
);

userFn.js文件代码

export function checkUsername() {
  let value = document.querySelector("#username").value;
  document.querySelector("#name_msg").innerText = '';
  let flag = true;
  let name = /^[A-Za-z0-9_]{3,20}$/;
  if (!name.test(value)) {
    document.querySelector("#name_msg").innerText = '必须是3-20个字符且必须是数字、字母和_';
    flag = false;
  }
  return flag;
}

export function checkPassword() {
  let value = document.querySelector("#pwd").value;
  document.querySelector("#pwd_msg").innerText = '';
  let flag = true;
  let pwd = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{6,20}$/;
  if (!pwd.test(value)) {
    document.querySelector("#pwd_msg").innerText = '密码必须是 6 - 20 个字符，且至少包含一个大写字母、一个小写字母和一个数字';
    flag = false;
  }
  return flag;
}

export function checkPassword2() {
  let value = document.querySelector("#rePwd").value;
  document.querySelector("#rePwd_msg").innerText = '';
  let flag = true;
  let pwd = document.querySelector("#pwd").value;
  if (!checkPassword()) {
    document.querySelector("#rePwd_msg").innerText = '密码必须是 6 - 20 个字符，且至少包含一个大写字母、一个小写字母和一个数字';
    flag = false;
  } else if (pwd !== value) {
    document.querySelector("#rePwd_msg").innerText = '确认密码要与密码保持一致';
    flag = false;
  }
  return flag;
}

export function checkeAge() {
  let value = document.querySelector("#age").value;
  document.querySelector("#age_msg").innerText = '';
  let flag = true;
  let age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;;
  if (!age.test(value)) {
    document.querySelector("#age_msg").innerText = '年龄必须在 1 - 120 之间';
    flag = false;
  }
  return flag;
}

export function checkeEmail() {
  let value = document.querySelector("#email").value;
  document.query
  Selector("#email_msg").innerText = '';
  let flag = true;
  let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!email.test(value)) {
    document.querySelector("#email_msg").innerText = '必须符合邮箱格式';
    flag = false;
  }
  return flag;
}

1.2关键知识点

（1）使用document.querySelector("#btn1")找到按钮id为'btn1'的按钮

（2）使用addEventListener("click",()=>{ }为按钮添加了点击的事件监听

document.querySelector("#btn1").addEventListener("click",()=>{ alert("你点击了按钮1") }

（3）使用innerText = '';设置文本内容

document.querySelector("#age_msg").innerText = ""

1.3常见的事件类型

常见事件.png

2.1学生表格的实现

2.1.1页面素材

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格数据操作</title>
</head>

<body>
  <h2>学生信息表</h2>
  <table id="studentTable">
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 这里将通过JavaScript动态添加数据行 -->
    </tbody>
  </table>

  <h3>添加学生信息</h3>
  <label for="studentId">学号：</label><input type="text" id="studentId" placeholder="请输入学号">
  <label for="studentName">姓名：</label><input type="text" id="studentName" placeholder="请输入姓名">
  <label for="studentAge">年龄：</label><input type="text" id="studentAge" placeholder="请输入年龄">
  <button id="addButton">添加学生</button>

  <h3>修改学生信息</h3>
  <label for="editStudentId">要修改的学号：</label><input type="text" id="editStudentId" placeholder="请输入要修改的学号">
  <label for="newStudentName">新姓名：</label><input type="text" id="newStudentName" placeholder="请输入新姓名">
  <label for="newStudentAge">新年龄：</label><input type="text" id="newStudentAge" placeholder="请输入新年龄">
  <button id="editButton">修改学生</button>

  <h3>删除学生信息</h3>
  <label for="deleteStudentId">要删除的学号：</label><input type="text" id="deleteStudentId" placeholder="请输入要删除的学号">
  <button id="deleteButton">删除学生</button>

  <script>
  
  </script>
</body>

</html>

完成的代码

（1）HTML代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格数据操作</title>
  <link rel="stylesheet" href="./CSS/student.css">

</head>

<body>
  <h2>学生信息表</h2>
  <table id="studentTable">
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="studentTableTbody">
      <!-- 这里将通过JavaScript动态添加数据行 -->
    </tbody>
  </table>

  <h3>添加学生信息</h3>
  <label for="studentId">学号：</label><input type="text" id="studentId" placeholder="请输入学号">
  <label for="studentName">姓名：</label><input type="text" id="studentName" placeholder="请输入姓名">
  <label for="studentAge">年龄：</label><input type="text" id="studentAge" placeholder="请输入年龄">
  <button id="addButton">添加学生</button>

  <h3>修改学生信息</h3>
  <label for="editStudentId">要修改的学号：</label><input type="text" id="editStudentId" placeholder="请输入要修改的学号">
  <label for="newStudentName">新姓名：</label><input type="text" id="newStudentName" placeholder="请输入新姓名">
  <label for="newStudentAge">新年龄：</label><input type="text" id="newStudentAge" placeholder="请输入新年龄">
  <button id="editButton">修改学生</button>

  <h3>删除学生信息</h3>
  <label for="deleteStudentId">要删除的学号：</label><input type="text" id="deleteStudentId" placeholder="请输入要删除的学号">
  <button id="deleteButton">删除学生</button>

  <script type="module" src="./JS/student.js" >
  
  </script>
</body>

</html>

（2）JS代码 student.js代码

import {addStudent,editStudent,deleteStudent} from "./studentFn.js"
document.querySelector("#addButton").addEventListener("click", addStudent);
document.querySelector("#editButton").addEventListener("click", editStudent);
document.querySelector("#deleteButton").addEventListener("click", deleteStudent);

studentFn.js代码

const INPUT_STUDENT_ID = document.querySelector("#studentId");
const INPUT_STUDENT_NAME = document.querySelector("#studentName");
const INPUT_STUDENT_AGE = document.querySelector("#studentAge");

const INPUT_EDINT_STUDENT_ID = document.querySelector("#editStudentId");
const INPUT_NEW_STUDENT_NAME = document.querySelector("#newStudentName");
const INPUT_NEW_STUDENT_AGE = document.querySelector("#newStudentAge");

const INPUT_DELETE_STUDENT_ID = document.querySelector("#deleteStudentId");


const TABLE_BODY = document.querySelector("#studentTableTbody");



let students=[];
export function addStudent() {
  let studentId = INPUT_STUDENT_ID.value;
  let studentName = INPUT_STUDENT_NAME.value;
  let studentAge = INPUT_STUDENT_AGE.value;

  let student = {
    studentId: studentId,
    studentName: studentName,
    studentAge: studentAge,
  };
 /*  students.unshift(student);
  updateTable(); */
  let index = -1;
  for (let i = 0; i < students.length; i++) {
    if (students[i].studentId === studentId) {
      index = i;
      break;
    }
  }
 if(!checkID(INPUT_STUDENT_ID)){
    alert("学生的学号只能是5位数字");
  }else if(index>=0){
    alert("学生的学号不能重复");
  }else  if(!checkUsername(INPUT_STUDENT_NAME)){
    alert("学生名字不合法");
  } else if(!checkAge(INPUT_STUDENT_AGE)){
    alert("学生年纪不合法");
  }else{
    students.unshift(student);
    updateTable(); 
    INPUT_STUDENT_ID.value = '';
    INPUT_STUDENT_NAME.value = '';
    INPUT_STUDENT_AGE.value = '';
  }

}
export function deleteStudent() {
  let deleteStudentId = INPUT_DELETE_STUDENT_ID.value;
  let index = -1;
  for (let i = 0; i < students.length; i++) {
    if (students[i].studentId === deleteStudentId) {
      index = i;
      break;
    }
  }
  
  if(index>=0){
    students.splice(index,1)
    updateTable();
    INPUT_DELETE_STUDENT_ID.value = ''
  }else{
    alert("没有找到该学号的学生");
  }
  
}
export function editStudent(){
  let editStudentID = INPUT_EDINT_STUDENT_ID.value;
  let newStudentName =INPUT_NEW_STUDENT_NAME.value;
  let newStudentAge = INPUT_NEW_STUDENT_AGE.value;
  let index = -1;
  for (let i = 0; i < students.length; i++) {
    if (students[i].studentId === editStudentID) {
      index = i;
      break;
    }
  }
  if(!checkID(INPUT_EDINT_STUDENT_ID)){
    alert("学生的学号只能是5位数字");
  }else if(!checkUsername(INPUT_NEW_STUDENT_NAME)){
    alert("要修改的学生名字不合法");
  } else if(!checkAge(INPUT_NEW_STUDENT_AGE)){
    alert("要修改的学生年纪不合法");
  }else if(index>=0){
    students[index].studentName = newStudentName;
    students[index].studentAge = newStudentAge;
    updateTable();
    INPUT_EDINT_STUDENT_ID.value = '';
    INPUT_NEW_STUDENT_NAME.value = '';
    INPUT_NEW_STUDENT_AGE.value = '';
  }else{
    alert("没有找到该学号的学生");
  }
}

export function updateTable() {
  TABLE_BODY.textContent = ''; // 清空表格内容
  students.forEach(student => {
    const row = createTableRow(student);
    TABLE_BODY.appendChild(row);
  });
}

function createTableRow(student) {
  let row = document.createElement('tr');

  let idCell = document.createElement('td');  
  idCell.textContent = student.studentId;
  row.appendChild(idCell);  

  let nameCell = document.createElement('td');
  nameCell.textContent = student.studentName;
  row.appendChild(nameCell);

  let ageCell = document.createElement('td');
  ageCell.textContent = student.studentAge;
  row.appendChild(ageCell);

  return row;
}

export function checkUsername(url) {
  let value = url.value;
  let flag = true;
  let name1 = /^[\u4e00-\u9fa5]{2,20}$/;
  let name2 = /^[A-Za-z\s]{2,20}$/;
  if (!(name1.test(value) || name2.test(value))) {
    flag = false;
  }
  return flag;
}
export function checkID(url) {
  let value = url.value;
  let flag = true;
  let id = /\d{5}/;
  if (!id.test(value)) {
    flag = false;
  }
  return flag;
}
  
export function checkAge(url) {
  let value =url.value;
  let flag = true;
  let id =  /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;;
  if (!id.test(value)) {
    flag = false;
  }
  return flag;
}

2.2关键知识点

（1）使用 document.createElement('tr')添加表格行

（2）使用document.createElement('td')添加单元格

let row = document.createElement('tr');

let idCell = document.createElement('td');  
  idCell.textContent = student.studentId;
  row.appendChild(idCell);
  
let nameCell = document.createElement('td');
  nameCell.textContent = student.studentName;
  row.appendChild(nameCell);

let ageCell = document.createElement('td');
  ageCell.textContent = student.studentAge;
  row.appendChild(ageCell);
avatar
文章
阅读
粉丝