작업 목록 Lite 이해

7384 단어 codenewbieflatironbeginnersjavascript
다음 몇 개의 게시물에서 MVC를 다루겠다고 말했습니다. 오늘 나는 거짓말쟁이입니다.

이번 주에 Flatiron의 mod-3를 시작했는데 Task Lister가 문제를 일으켰습니다. 자바스크립트 첫 주인데 이 블로그가 문제를 해결하는 데 도움이 되기를 바랍니다.

HTML부터 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flatiron Task Lister</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="main-content">
      <h1>Task Lister Lite™️</h1>

      <form id="create-task-form" action="#" method="post">
        <label for="new-task-description">Task description:</label>
        <input
          type="text"
          id="new-task-description"
          name="new-task-description"
          placeholder="description"
        />
        <input type="submit" value="Create New Task" />
      </form>

      <div id="list">
        <h2>My Todos</h2>
        <ul id="tasks"></ul>
      </div>

      <script src="./src/index.js" defer></script>
    </div>
  </body>
</html>

이 실습의 요점은 작업을 만들고 목록에 추가할 수 있도록 하는 것입니다.

시작하려면 javascript 텍스트 전에 HTML을 로드해야 합니다.

다음과 같은 몇 가지 방법으로 이 작업을 수행할 수 있습니다.

연기하다



index.html에서 스크립트 섹션에 defer를 추가하면 다음과 같이 표시됩니다.

#index.html
<script src="./src/index.js" defer></script>

DOMContentLoaded



/src/index.js 파일에서 다음과 같아야 합니다.

#index.js
document.addEventListener("DOMContentLoaded", () => {
  // your code here
});

또는 스크립트를 본문 맨 아래로 이동합니다. 다음과 같이 표시됩니다.

#index.html
//a bunch of previous code
    </div>
    <script src="./src/index.js" ></script>
  </body>
</html>

간단히 말해, 둘 중 하나를 선택하고 실행하는 방법을 배우게 됩니다. 스크립트를 실행하기 전에 HTML을 로드해야 하며 이러한 방법을 사용하면 JS가 시작되기 전에 HTML 파일을 완전히 로드할 수 있습니다.

브라우저에서 Live Server 확장자로 index.html 파일을 열 수 있습니다.
이제 완료되면 다음과 같이 표시됩니다. (색상은 다를 수 있습니다).



주위를 클릭하면 아무것도 작동하지 않는다는 것을 알 수 있습니다! 자바스크립트가 들어오는 곳입니다.

가서 잡자



시작하려면 양식을 식별하는 상수를 만들어야 합니다.

#index.html
      <form id="create-task-form" action="#" method="post">

document.querySelector("#create-task-form");를 수행하여 이에 대한 액세스 권한을 얻을 수 있습니다.

#index.js
const taskForm = document.querySelector("#create-task-form");

왜 이러는 거지?



주요 산출물은 사용자가 설명에 작업 기반을 추가한 다음 제출을 누를 수 있어야 한다는 것입니다. 그런 다음 아래에 채워져야 합니다.

이제 taskForm 변수가 있습니다. 몇 개가 더 필요합니다. taskForm에서 데이터를 가져와서 html의 이 섹션에 추가하려고 합니다.

#index.html
      <div id="list">
        <h2>My Todos</h2>
        <ul id="tasks"></ul>

다른 document.querySelector를 사용하여 이를 수행할 수 있습니다. 다음과 같이 표시됩니다.const taskList = document.querySelector("#tasks");
아주 멋진!

일반적으로 양식 데이터의 경우 제출을 누르면 post 요청이 이루어집니다. 기본 동작은 우리가 방지할 것입니다. 어떻게?

이를 통해서:

#index.js
taskForm.addEventListener("submit", function (event) {
  event.preventDefault();

이렇게 하면 제출을 누를 때 일반적으로 발생하는 일이 중지됩니다!

그래서 큰. 일반적인 동작을 중지했지만 이제 수신한 양식 데이터로 무엇을 하시겠습니까? 양식을 통해 전달되는 내용을 살펴볼 수 있습니다.

#index.html
<form id="create-task-form" action="#" method="post">
        <label for="new-task-description">Task description:</label>
        <input
          type="text"
          id="new-task-description"
          name="new-task-description"
          placeholder="description"
        />

웹 사이트에서 데이터를 채우는 위치에 응답하는 섹션입니다. 제출을 누르면 이 입력 필드에는 실제로 value가 있습니다. 다음을 수행하여 액세스할 수 있습니다.

#index.js
  const newTask = document.querySelector("#new-task-description").value;

이것은 newTask를 new-task-description 필드의 값으로 설정합니다.

이제 입력한 작업의 값을 얻었으므로 이를 추가해야 합니다taskList..

#index.js
TaskForm.addEventListener("submit", function (event) {
  event.preventDefault();
  const newTask = document.querySelector("#new-task-description").value;

## NEW CODE ##
  taskList.innerHTML += `<li> ${newTask}
  </li>`;

});
#new-task-description에서 *값을 가져와 taskList.innerHTML에 추가합니다.

브라우저에 새 작업을 입력하면 다음과 같이 표시됩니다.


새 작업을 만들 수 있었습니다! 제출을 누르면 생성된 작업이 여전히 양식 필드에 있습니다. 다음을 추가하여 삭제할 수 있습니다.

#index.js

const taskForm = document.querySelector("#create-task-form");

const taskList = document.querySelector("#tasks");

taskForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const newTask = document.querySelector("#new-task-description").value;

  taskList.innerHTML += `<li> ${newTask}
  </li>`;
###NEW CODE###
  // taskForm.reset();
});

이는 taskForm을 가져오고 작업이 제출될 때마다 재설정합니다.

마지막으로 삭제 버튼을 만들겠습니다. 어떻게 할까요? 단순한!

#index.js

taskForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const newTask = document.querySelector("#new-task-description").value;

  taskList.innerHTML += `<li> ${newTask}
###NEW CODE###
  <button data-action = "delete"> X </button>
  </li>`;
##############
  taskForm.reset();
});

작업을 추가할 때마다 "X"레이블이 있는 버튼을 추가합니다. 이것은 당신이 원하는 무엇이든 될 수 있습니다. 이제 버튼이 있지만 버튼을 눌러도 아무 일도 일어나지 않습니다. 클릭을 "수신"하는 함수를 하나 더 만들어야 합니다.

#index.js
taskList.addEventListener("click", function (e) {
  if (e.target.dataset.action === "delete") {
    e.target.parentElement.remove();
  }
});

사용자가 x를 클릭하기를 기다리는 또 다른 이벤트 리스너를 만듭니다. 그렇게 하면 함수의 삭제 작업이 <button data-action>와 일치하는지 확인하고 전체 목록 항목이 될 버튼의 상위 요소를 제거합니다.



parentElement를 지정하지 않으면 전체 작업이 아닌 버튼만 삭제할 수 있습니다.

사용해 보세요!
Base64 문자열 바이너리 흐름으로 파일을 서버에 저장
Ruby on Rails로 어플리케이션을 만들어 보세요.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage