見出し画像

やっぱり。JavaScript！- ToDoリスト - 1

donguri

丁寧に解説されているサイト(YouTube)を参考にしながら作っていきます。

HTML、JavaScriptを使って文字の入力ができて、入力欄の下にリスト表示されるようになります。保存、削除、取り消し線が付けられるようになります。

見た目。こんな感じになります。

HTML と、Scriptファイル(index.js)を別に作って読み込ませます。CSSは手軽なBootstrapを使っての実装です。これも読み込ませて使います。<header>内に以下のように書きます。BootstrapのサイトにあるCDNを記述しています。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

HTMLはBootstrapを使いながら体裁を整えます。

<div class="container w75">
  <h1 class="text-center text-info my-4" >Todo</h1>
  <form id="form" class="mb-4">
  <input type="text" id="input" class="form-control" placeholder="todoを入力" autocomplete="off">
  </form>
</div>

<script src="index.js"></script>

HTMLの中の以下の部分をJavaScript読み込んで操作していきます。

<form id="form" class="mb-4">

<input type="text" id="input" class="form-control" placeholder="todoを入力" autocomplete="off">

const form = document.getElementById("form");
const input = document.getElementById("input");


"document"という命令とHTMLの中でで指定した"id"を目印に読み込んで定数formとinputに代入しています。

この変数を使って入力したデータを入力欄の下にリスト形式で表示させるとともにブラウザの保存領域(localStorage)に保存してブラウザを更新しても消えないようにします。

まず入力欄に入力してキーボードのreturn(enter)を押すとその入れた文字が入力欄の下にリスト表示されるというものを実装します。

キーボードを押したということを伝えるために"addEventListener"という命令を使います。

何らかのタイミングで何かの動作をさせるこをイベントと言い、この命令を使って動作の意味づけをしていきます。入力欄にこの動作を発生させるので、そのフォームのHTMLを操作するので、変数宣言した

const form = document.getElementById("form");

を使います。"form"に命令"addEventListener"を付けて操作できるようにしていきます。

form.addEventListener("submit", function (event) {
  event.preventDefault();
  add();
});

formのデータを取得する方法ですが、"submit"でキーボードのreturn(enter)を押すタイミングで以下、関数add()が動くように命令しています。

function (event) {
  event.preventDefault();
  add();
}

event.preventDefault()に関しては、"submit"するとブラウザが勝手にリロードしてしまうのでリロードを勝手にしてしまうのを防ぐために書いています。

Event.preventDefault()

Event インターフェースの preventDefault() メソッドは、ユーザーエージェントに、イベントが明示的に処理されない場合にその既定のアクションを通常どおりに行うべきではないことを伝えます。このイベントは通常、イベントリスナーの1つが stopPropagation() または stopImmediatePropagation() を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。
以下にある通り、preventDefault() をキャンセル不可のイベントのために呼び出すと、例えば EventTarget.dispatchEvent() をcancelable: true の指定なく呼び出した場合、効果がありません。

この記事が気に入ったらサポートをしてみませんか？