タスクリスターLiteを理解する

7011 ワード
codenewbie flatiron beginners javascript テキストリンク
私は、私が私の次の数つのポストでMVCをカバーすると言いました.今日、私はうそつきです.
私は今週FrutironのMOD - 3を始めました、そして、タスクListerは私に若干のトラブルを与えました.これはJavaScriptの私たちの最初の週であり、私はこのブログは物事を壊すのを助けることを願っています.
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を読み込む必要があります.
いくつかの方法でこれを行うことができます.

延期する


あなたのインデックスで.HTMLを追加できますdefer スクリプトセクションには次のようになります.
#index.html
<script src="./src/index.js" defer></script>

DomConstrentLoaded


あなたの/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>
長い話短い、あなたは1つまたは他を選択し、それを実行することを学びます.スクリプトを実行する前にHTMLを読み込む必要があります.これらのメソッドは、JSが始まる前にHTMLファイルを完全に読み込むことができます.
インデックスを開くことができます.拡張子を持つブラウザのHTMLファイルLive Server .
今、一度それが完了すると、ここにどのように見えるはずです.(色が変化する場合があります).

あなたがクリックするならば、あなたは何も働くと気がつきません!JavaScriptが入っている場所です.

それを得ましょう


起動するには、フォームを識別する定数を作成する必要があります.
#index.html
      <form id="create-task-form" action="#" method="post">
我々は、ドキュメントを行うことによって、これにアクセスすることができます.QuerysElector ("ChortCreate task form ");
#index.js
const taskForm = document.querySelector("#create-task-form");

なぜ、我々はこれをしていますか？


主な成果物は、ユーザーがタスクベースの説明をオフに追加し、送信を送信することができます.次に、以下のように設定します.
今、我々はtaskForm 変数.もう2、3人必要だ.TaskFormからデータを取得し、このセクションをHTMLに追加します.
#index.html
      <div id="list">
        <h2>My Todos</h2>
        <ul id="tasks"></ul>
別のドキュメントを使ってこれを行うことができます.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を設定します.
だから今私たちが入力したタスクの値を持って、我々は我々にそれを追加する必要があります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 .
新しいタスクをブラウザに入力し、次のようになります.

あなたは新しいタスクを作成することができた!Note :いったん送信を押すと、作成されたタスクはまだフォームフィールドにあります.以下を追加することで削除できます.
#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();
});
これはタスクフォームを受け取り、タスクが提出されるたびにリセットされます.
最後に、削除ボタンを作成します.どうやってこれをやるの?簡単!
#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> 完全なリスト項目となるボタンの親要素を削除します.

指定された要素が指定されていない場合は、ボタンを削除して、完全なタスクではない.
それを試してみてください!
数値桁数の追加
21.10.14 TIL20