JavaScriptファイルの読み込み方を解説！

どうも皆さんこんにちは！kwです！

今回は、JavaScriptの読み込み方を紹介します！

また、HTML内にJavaScriptを記述する方法も解説していきます！

JavaScriptはHTMLやCSSよりも難しく、文法も全く違いますが、覚えておくだけでデザインの幅がものすごーーーーーーーーーーく広がるので、興味がある方は是非覚えてみてください！

※HTML内にJavaScriptを記述する人も途中まで同じ手順でやります。

まず初めに、フォルダを作成していきます。

今回私はフォルダ名を「JavaScriptの読み込み」としましたが、お好きな名前で大丈夫です。

↓

このように表示がされていたらOKです。

次に、エディタを開きます。

今回私はVScodeの方で記述していきますが、他のエディタでも可能です！

VScodeを使う方は、開いたらこのような画面になっていると思います↓

ここまでできたら、次に左上の二重になっていて手前がめくれている紙のマークをクリックします。

そうしたら、このような画面表記になります。

次に、画面左上の方にあるOpen Folderをクリックして、先ほど作成したフォルダを選択します。

選択して、このような画面になったら次に進みます。

↓

左上の自分だったら「JAVASCRIPTの読み込み」のところにカーソルを持っていくと

紙が捲れてるマーク？があるので、そこをクリックします。

そうすると、このような画面になると思うので、入力欄に「index.html」と入力します。↓

これでHTMLファイルの読み込みは完了です！

HTMLファイルに直接JavaScriptを書き込む方も、ここまでは手順通りに進めてください！

JavaScriptファイルを読み込むには、<body>要素の一番下に<script>タグを設置するのが一般的です。

※ソースコードは下の方に貼っておきました。

こんな感じです↓

※<head>タグ内はあらかじめ記述しておきましたが、なくても大丈夫です。

このようにできたら、ダブルクォーテーション→""　で囲ってある部分にカーソルを持っていくと、follow linkと出てくるのでクリックしてください。

クリックすると、警告文が出されますのでcreateを押してください。

そうすると、jsフォルダに入ったmain.jsファイルが作成されますのでこれにて読み込みは完璧です。

このような表記になっていれば成功です↓

こちらはものすごく簡単です。

なお、scriptタグの配置方法は先程と同じく、<body>タグの一番下に配置するだけです。

※ソースコードは下の方に貼っておきました。

こんな感じで記述します↓

JavaScriptファイルの読み込みのソースコード↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

HTMLに書く方法のソースコード↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

いかがでしたでしょうか？CSSの読み込みで似たような作業を行なった方も多いのではないのでしょうか？

この技術はウェブデザインをやっていく上では必須技術なので、是非この機会に覚えちゃってください！

今回も見てくれた方、ありがとうございました！