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は選択して書き換えましょう。