CSS HTML Javascript

要素を取得する

JavaScriptを読み込む設定と、要素の取得をしていきます。

  • main.jsの作成
  • 要素の取得

main.jsの作成

・では前回の続きをしていきます。

マスクとモーダルを非表示にする

・前回まででHTMLとCSSを完成させたので今回からはJavaScriptを書いていきます。JavaScriptでは取得したクラスをつけ外ししていきます。

・今回はmain.jsの作成から要素の取得をしていきます。

・まずはmain.jsの作成の作成方法ですがHTMLの中にmain.jsのファイルを作っていきます。

・一般的にbodyの閉じタグの直前に書くのが一般的です。これはJavaScriptは容量が重くなりやすくユーザーが使いやすいためにまずHTMLやCSSを読み込んだあとにJavaScriptを読み込んでもらうためです。

・JavaScriptはscriptタグを使って書くことができるので<script src="js/main.js"></script>というように書いていきましょう。

・次にVS Codeを使っている方はリンクをマウスホバーしてCommand +クリックで新しいファイルを作ることができます。Creae Fileと進んで行けばいいでしょう。

・jsフォルダの下にmain.jsがあればおkです。

要素の取得

・JavaScriptのフォルダができたらまず一番上に'use strict’;を書いていきましょう。これはエラーをチェックしてくれるので最初に設定しておくといいです。あと全体を{}で囲っておきましょう。

・では要素を取得していきます。今回使うのはidをつけた要素なのでopen, close, modal, maskの要素を取得していきます。

・constで名前をつけていきますが同じでいいでしょう。

・document.getElementById(‘’)と書いてidを取得していきます。’’の中にそれぞれのidを入れていけばいいです。これを計4つ作っていきます。

・こんな感じです。

{

  const open = document.getElementById('open');

  const close = document.getElementById('close');

  const modal = document.getElementById('modal');

  const mask = document.getElementById('mask');

}

・同じようなことを書いていく場合は一つ書いたあとにShift +option +下矢印でコーピーペーストができるショートカットキーが用意されています。

・またcommand +Dで同じ単語を選択できるのでclose, modal, maskは選択して書き換えましょう。

-CSS, HTML, Javascript