HTML+CSS+Javascript入門！3回目

HTML Javascript CSS

本日は、javascriptで要素追加を実施しました！

私の中では結構感動しまして、
このような形でアプリケーションの実行がされているのかと納得しました。

簡単な実装、かつ、フロント部分しか見てないですが。
ここにバックエンド処理が加わると色々世界が広がるのか、とワクワクしました。

要素の追加については、「DOM操作」が必要になります。
ざっと以下が概要となります。

DOM(Document Object Model)とは？
htmlのスタイル変更やイベント設定が可能とする「API」です。

API(Application Programming Interface)とは？
ソフトウェアの内容を、他のソフトウェアへ利用することが可能にします。

それではいきましょう！

button.addEventListener("click", function () {
    const list = document.createElement("li");
    list.innerText = "TODO";
    lists.appendChild(list);
});


[addEventListener]でクリック処理を指定して、liの作成を実行しています。
f:id:challenger_soft:20200502231032p:plain
ボタンをクリックすると…
f:id:challenger_soft:20200502231035p:plain
無事、新しいリストが追加されました。

また、今回list.innerText = "TODO";としたのですが、
これを…

  1. フォームを作成

  2. フォームへテキスト入力

  3. ボタンを押す

  4. テキスト入力文字をリストへ追加する

このようにすることで、簡易TODOリストが作れるのでは？と想定しています。
私はスクールへ通ったりはしていない独学派ですが、
上記で作れそうな気がしています！（指摘や実現不可だよ！などご意見いただけると嬉しいです）

最後まで読んでいただきまして、ありがとうございました！