JavaScriptを習得したい

on Note

JavaScriptの記述に関して

HTMLファイル上にJavaScriptのコードを直接記述する際は、JavaScriptのコードを<script>タグで囲みます。script要素には、JavaScriptをHTMLファイルに組み込むという役割があります。

<script type="text/javascript">
    JavaScriptの、変数や関数などのコードをここに書く。
</script>

type属性でスクリプトの種類を明記しています。基本、「text/javascript」以外を指定することはなく、script要素におけるtype属性の値は「text/javascript」がデフォルトになっている為、type属性を省略しても動作します。

script要素を記述する場所

script要素は、head要素の配下とbody要素の配下のどちらに記述しても構いません。ただ、script要素の記述に望ましい場所があります。

ブラウザはHTMLファイルを上から読み込んでページの描画を行います。途中にscript要素があると、そのスクリプトの読み込み及び処理が完了するまで以降の描画を行わないことになります。

HTMLの描画を早く完了させたいはずなのに、途中にscript要素があったのでは描画に遅れが生じます。スクリプトが大規模なものになればその分遅れます。

その為、一般的にscript要素は</body>(body要素の閉じタグ)の直前に記述します。これで、描画を終えてからのスクリプトの読み込みとなります。

JavaScriptの処理は、基本的に描画を終えてから行うべきものなので、script要素をページの末尾に記述しても弊害は特にありません。

head配下に記述すべき場合もある

script要素はページの末尾に記述するのが望ましいのですが、head要素の配下に記述すべき場合もあります。

例えばスクリプトからスタイルシートを出力する場合です。スクリプトからのスタイルを反映させた状態で本文を出力したい為、本文の出力の前にスクリプトの読み込みをさせたいものです。こういった場合はhead要素の配下にscript要素を記述するべきです。

script要素は、基本的には</body>(body要素の閉じタグ)の直前に記述するべきですが、それでまかなえない場合にhead要素の配下に記述する、という認識で良いでしょう。

JavaScriptを別ファイルで用意することもできる

JavaScriptのコードを外部ファイルとして別に定義し、HTMLファイルからそれを呼び出して適用させることもできます。

JavaScriptとHTMLを分離しておけばHTMLの見通しも良くなるので、JavaScriptは別ファイルで用意するのが一般的です。

JavaScriptのコードが非常に短い場合は、外部化するとかえって不便になるのでHTMLファイルに直接記述するのが良いでしょう。

別に用意したJavaScriptファイルを呼び出して適用するには以下のように記述します。

<script type="text/javascript" src="JavaScriptのファイルパス"></script>

src属性を付け足せば外部のJavaScriptファイルを呼び出すことになります。この時script要素のコンテンツは空にします。

JavaScriptファイルは拡張子を「js」で作成します。よってJavaScriptのファイルパスは「〇〇.js」となります。

外部とインラインの両方を使用する場合

JavaScriptを外部ファイルとして呼び出す形とHTMLファイルに直接記述する形を、1つのHTMLファイルに同時に使用したい場合があったとします。その場合、以下のような書き方はできません。

<script type="text/javascript" src="JavaScriptのファイルパス">
    JavaScriptのコード      //無視される
</script>

上記は、src属性を指定して外部のJavaScriptファイルを呼び出そうとしており、同時に、script要素の中にJavaScriptのコードを書こうとしています。この場合、script要素の中に記述したJavaScriptは適用されません。src属性を指定した時点でscript要素配下のコンテンツは無視される為です。

外部とインライン、両方の形でJavaScriptを適用する場合、以下のように記述する必要があります。

<script type="text/javascript" src="JavaScriptのファイルパス"></script>
<script type="text/javascript">
    JavaScriptのコード
</script>

外部ファイルとして呼び出す為のscript要素とHTMLに直接記述する為のscript要素、それぞれのscript要素を記述する必要があります。src属性を指定したscript要素で外部ファイルを呼び出し、インラインで記述する際はその都度script要素でJavaScriptを定義する、ということです。

1つのHTMLファイルにscript要素が複数存在しても構いません。