Js의 핵심! : CRUD & event & DOM

📒JS/⚡ver.1

Js의 핵심! : CRUD & event & DOM

4:Bee 2023. 5. 28. 18:13

728x90

Link
	JavaScript CRUD Application - CRUD Operations With JavaScript
	https://youtu.be/KiRKUTDYlG8

Event 객체

event객체를 사용해서 클릭버튼을 구현하는 방식의 코드는 아래와 같다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="student-list">
    <button class="student">Student 1</button>
    <button class="student">Student 2</button>
    <button class="student">Student 3</button>
  </div>
  <script src="test.js"></script>
</body>

</html>

//test.js
document.querySelector("#student-list").addEventListener("click", (e) => {
  if (e.target.classList.contains("student")) {
    console.log("학생 버튼 클릭");
  }
});

event객체를 매개변수로 사용 할 수 있으며 이벤트 객체를 조작할 수 있는 여러 함수들이 존재한다.

이벤트 객체(Event object)는 JavaScript에서 이벤트가 발생했을 때, 이벤트와 관련된 정보를 담고 있는 특별한 객체이다. 이벤트는 웹 페이지에서 발생하는 다양한 상황(예: 클릭, 마우스 움직임, 키보드 입력 등)을 나타내며, 이벤트 객체는 이러한 이벤트에 대한 세부 정보를 포함하고 있다. 이벤트 리스너는 addEventListener 메서드를 사용하여 DOM 요소에 등록할 수 있습니다.

DOM

DOM(Document Object Model)은 웹 페이지의 구조와 콘텐츠를 표현하고 조작하는 객체 기반의 인터페이스이다. DOM은 문서의 각 요소(Element), 속성(Attribute), 텍스트 등을 객체로 표현하며, 이러한 객체들은 부모-자식 관계를 가지며 트리 형태로 구성된다. 가장 상위에는 document 객체가 있고, 이 객체를 통해 문서 전체에 접근할 수 있다. document 객체를 Js를 통해 HTML 요소를 선택하고, 새로운 요소를 생성하거나 기존 요소를 수정, 삭제할 수 있다.

Create

document.querySelector("#student-form").addEventListener("submit", (e) => {
  e.preventDefault();

  //Get Form Values
  const firstName = document.querySelector("#firstName").value;
  const lastName = document.querySelector("#lastName").value;
  const rollNo = document.querySelector("#rollNo").value;

  //validate
  if (firstName == "" || lastName == "" || rollNo == "") {
    showAlert("Please fill in all fields", "danger");
  }
  else {
    if (selectedRow == null) {//?
      const list = document.querySelector("#student-list");
      const row = document.createElement("tr");//?
      // clearFields();
      row.innerHTML =
        `<td>${firstName}</td>
        <td>${lastName}</td>
        <td>${rollNo}</td>
        <td>
          <a href="#" class="btn btn-warning btn-sm edit">Edit</a>
          <a href="#" class="btn btn-danger btn-sm delete">Delete</a>
        </td>
      `;
      list.appendChild(row);
      selectedRow = null;
      showAlert("Student Added", "success")
    }
    else {
      selectedRow.children[0].textContent = firstName;
      selectedRow.children[1].textContent = lastName;
      selectedRow.children[2].textContent = rollNo;
      selectedRow = null;
      showAlert("Student Info Edited", "info");
    }

    clearFields();
  }
});

Update

document.querySelector("#student-list").addEventListener("click", (e) => {//parent searching
  // e.preventDefault();
  //document.querySelector("#student-list")에 있는 버튼들을 지정하는 방식에대한 코드...
  console.log("edit")
  target = e.target;
  if (target.classList.contains("edit")) {//child searching
    selectedRow = target.parentElement.parentElement;
    document.querySelector("#firstName").value = selectedRow.children[0].textContent;
    document.querySelector("#lastName").value = selectedRow.children[1].textContent;
    document.querySelector("#rollNo").value = selectedRow.children[2].textContent;

  }
});

Delete

document.querySelector("#student-list").addEventListener("click", (e) => {
  // e.preventDefault();
  target = e.target;
  if (target.classList.contains("delete")) {
    target.parentElement.parentElement.remove();//?
    showAlert("Student Data Deleted", "danger");//=>Bootstrap
    clearFields();
  }

});

728x90