JavaScriptを基本から見つめ直すことにした

reactとかvueとか今までに触ってきたが、やはり根本から理解することは大事なのでは？と思い立った。

やったこと

シンプルにTODOリスト作成をやった。（まだできてない）

参考サイト

■todoリスト参考サイト
https://qiita.com/__init__/items/d1c59c87808fc180c871
TODOリストのほぼ、答えを書いてくれている。3段階にわけて勉強。
1.写経
2.コードの読み解き
3.自力
解説をかなり詳しく入れてくれているわけではなかったので、それはそれで
自分で調べて学ぶいい機会になった。

■今どきのJSの書き方
https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9
文章に勢いあるし、わかりやすい。

以下、落書き

querySelector(.a)

html側にあるform中のclass = a の要素を取得する。（オブジェクト型？）
このままだとオブジェクトのままなので、必要な値は取り出す必要がある。
変数 = [オブジェクト変数].[inputのname属性の名前].value;
で取得できる。

この関数の引数側に検索文字列を入力するが、なぜか前に.を入れないとうまくいかない。

イベントリスナ

ナウいやつは以下。アロー関数型が流行りらしい
[要素を取得した変数].addEventListener('[メソッド]', e => {
e.preventDefault();
});
大体こんな関数作ればいける。

関数の作り方

const [変数名1] = 引数 => {
const 変数名2 =htmlの書式;
変数名1.innerHTML += 変数名2;
}

最近の書き方では、この形が一般的らしい。
functionで記述する時代は終わった？
htmlテンプレを生成して埋め込む準備をするのに使うと思う。
その際、バッククォートで囲むことに注意。
3行目みたいにするとこの変数を呼び出すだけで埋め込むことができる。
この中に入力された文字列を埋め込みたい場合、${引数}で表示可能。

e.target

イベントターゲット。クリックの場合クリックされた対象のこと。

classList

上のやつと合わせて使える。対象の要素をリストで取得する。

contains

キーワード検索。includesとか

これから忙しくなるかもしれないので、現状までできている部分をここに記す。更新はできたらしたい。