C-log

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

'📒JS > ⚡ver.1' 카테고리의 다른 글

JS의 핵심! : 구조 분해 할당  (0) 2023.08.06
Js의 핵심! : TCP/IP  (0) 2023.05.28
JS의 핵심! Getter와 Setter만들기  (0) 2023.05.22
JS의 핵심 : ERD  (0) 2023.05.22
JS의 핵심! 프로토타입 prototype  (0) 2023.05.16
'📒JS/⚡ver.1' Related Articles more
Comments