sugulogの日記

JavaScriptとHTML。HTMLからscriptタグを使用しJavaScriptを読み込もう。

スポンサードリンク

f:id:sugulog:20220124214831p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、HTMLからscriptタグを使用しJavaScriptを読み込もうということで

について簡単に解説します!!

その為このブログを読むことで、JavaScriptとHTMLの関係性について理解できるのはもちろん、HTMLからscriptタグを使用しJavaScriptを読み込めるようにもなります。

是非最後までご愛読ください。

 

今回は、

・scriptタグ

・scriptタグと属性

の順で解説していきます。

では早速、みていきましょう!!

・scriptタグ

scriptタグとはスクリプトを文書内に埋め込んだり外部スクリプトを読み込んだりするために使用するタグのことです。

scriptタグを使用することでHTMLでJavaScriptを直接記述した読み込んだりすることがでます。

まずは直接記述してみましょう。

f:id:sugulog:20220124204528p:plain

コードは上から順に読まれます。

そのためHTML読み込み後のhtmlタグの下にscriptタグを記述し、その中に直接JavaScriptを記述するのが一般的です。

しかし今回のように少しのコードを記述するぐらいなら問題ないですが、コードが長くなるにつれ可読性が低くなります。

そのためscriptタグを使用し別途用意したJavaScriptファイル(拡張子:js)を読み込ませることも可能です。

f:id:sugulog:20220124205549p:plain

<script src='読み込みたいJavaScriptファイルのパス'></script>で読み込むことが可能です。

今回は同じディレクトリ配下にあるb.jsファイルを読み込んでいます。

一般的にJavaScriptファイルを読み込む際のscriptタグはheadタグ内にまとめて記述し、一目でどのファイルを読み込んでいるのかわかるようにします。

ただコードは上から順に読まれるため今のままではHTMLより先にJavaScriptが読み込まれてしまいます。

そのためHTMLを操作するような処理を読み込むJavaScriptファイル内で定義している場合は正常に処理されません。

そこでscriptタグには読み込むタイミングを制御する属性が用意されています。

・scriptタグと属性

scriptタグには読み込むタイミングを制御する属性としてasync、deferが用意されています。

asyncはJavaScriptファイルを非同期で読み込み、読み込み後即座にJSファイルを実行します。

deferはJavaScriptファイルを非同期で読み込み、HTMLの解析完了後にJSファイルを実行します。

asyncは読み込まれたタイミングでの実行なので、HTMLや他のJavaScriptファイルと独立した処理を記述したJavaScriptファイル読み込みに向いています。

deferはHTMLの解析完了後順に読み込まれるので、HTMLや他のJavaScriptファイルと連携した処理を記述したJavaScriptファイル読み込みに向いています。

記述の仕方はscriptタグにそれぞれasync、deferを属性として記述するだけです。

今回はdeferを付与しています。

f:id:sugulog:20220124214237p:plain

 

以上、今回のブログでした。

JavaScriptとHTMLの関係性について理解でき、HTMLからscriptタグを使用しJavaScriptを読み込めるようにもなりましたか??

HTMLでJavaScriptを扱うために確実に押せていきましょう。

今回のToDo

HTMLからJavaScriptを読み込んでみましょう(≧∀≦)/

sugulog.hatenadiary.jp

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度読者登録お願いします!

最後までご愛読いただきありがとうございました!!