トモジJavaScriptを
HTMLで読み込む方法って
どうやるの？？
本記事は、
上記のような方に向けて記事を書いています。
こんにちは、トモジです。
私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。
本記事は、JavaScriptをHTMLで読み込む方法に関して要点をわかりやすく説明しております。
JavaScriptをHTMLで読み込む方法
JavaScriptをHTMLファイルに読み込む方法は
2種類あります。
また、読み込む場所によって
ファイルが開く速度に変化がありますので
以下の順番で説明していきます。
- HTML文書内にJavaScriptを記述
(基本スタイル) - scriptタグの記述場所での
読み込み速度の違いについて - 外部ファイルをインポート
HTML文書内にJavaScriptを記述
JavaScriptをHTMLファイルに読み込むには、
基本的にはscriptタグでJavaScriptのコード(ソースコード)を挟み
bodyタグ内に記述します。
scriptタグの読み込み速度の違いについて
scriptタグは、headタグ内やbodyタグの
直前や末尾など3パターンの記述方法があり
HTMLファイルの読み込み速度に違いが出ます。
その3パターンを順番に見てきましょう。
scriptタグ内の処理結果を、ページに直接出力するために利用します。
しかし、可読性や保守性が望ましくないので昨今ではあまり使われることはありません。
ページ読み込みの高速化として
scriptタグ末尾に記述します。
一般的なブラウザでは、スクリプト(JavaScript)の読み込みや実行が完了するまで、ページ描画を行いません。
bodyタグ内で呼び出す関数を定義したい場合など、事前に読み込んでおく必要がある時に記述します。
理由がなければ[パターン2]のbodyタグ内の末尾に記述しましょう。
外部ファイルをインポート
HTMLファイル内にJavaScriptを記述すると
ファイルが肥大化して可読性や保守性が
悪くなります。
アプリやサービス開発では、できる限りファイルを細分化し外部ファイル化する必要がありますので
外部ファイルのインポートに関して説明していきます。
※typeを記述する事によって事前にファイル形式の内容をHTMLファイルに伝える事ができる
ファイルパスの書き方
外部ファイルのインポートでは、HTMLファイルからJavaScriptファイルへのパスをsrcに記述する形になります。
まとめ
最後にこの記事のポイントをまとめておきます。
- 理由がなければbodyタグ内の末尾に
ファイルインポートを記述する - できる限りファイルを細分化し
外部ファイル化する
