もりけん塾 JS課題13 に挑戦

もりけん塾にて、JavaScriptの課題に挑戦しています。
こちらで挑戦した課題を備忘録としてまとめていきます。

今回挑戦した課題は課題13です

1つ前の課題で挑戦したコードに

• ボタンをクリックしたらモーダルを表示する
• モーダルのボタンを押したらリクエストされ表示する

この機能を追加していきます。

コード

今回やったこと

1. HTMLファイルにモーダルを作成
2. モーダルのボタンをクリック日たらリクエストして、モーダルを削除する

HTMLファイルにモーダルを作成

modalBtn.addEventListener("click", () => {
  modal.style.display = "block";
  modalBtn.parentElement.remove();
});

モーダルボタンをクリックしたら、モーダルを表示するようにする。

モーダルボタンをクリックしたらモーダルボタンを削除する。

モーダルのボタンをクリックしたらリクエストして、モーダルを削除する

requestBtn.addEventListener("click", () => {
  init();
  modal.remove();
});

今回は、この機能を追加しました。

いただいたレビューについて

関数式とアロー関数の違いについて

関数式とアロー関数は書き方が違うだけではなく、性質も違いました。(ここまでの課題では、書き方が違うくらいでいいと考えています)
関数式とアロー関数の違い で細かく書かれているので参考にさせていただきました。

• thisが指すものの違い
• thisオブジェクトを指定するcall,apply,bind の振る舞いが違う
• アロー関数ではnewすることができない→コンストラクタになれない

など、これ以外にも多く違いがあるようでした。

要素の挿入としてinsertBefore()…やappend(),prepend(),…がある

要素の挿入としてappendChild()をよく使用していたのですが、他にもあるとのことだったので色々調べてみました。

• 全部言えたらDOMマスター！　HTML+DOMでノードを挿入する方法大全
• DOM

最近は、append,prepend,before,afterを使用するようですが、IEは非対応でした。

なので、汎用性の高い、insertAdjacentElement()も使用するようです。

さえさん@sae_prog
むーさん@MoomoochanP

お二人にレビューをいただきました。

ありがとうございます。

---

もりけん先生ツイッター(@terrace_tec)

もりけん先生ブログ↓
https://kenjimorita.jp/