scriptダグ/JavaScript定義

<script>タグはスクリプトを動作させたり、読み込む外部ファイルを指定するための定義です。

説明

 <script>タグはJavaScript等のスクリプトの定義です。例えば、HTMLファイルに直接記述する事も出来ますし、外部ファイルを指定して読み込む事で動作させる事も可能です。

scriptタグの利用例

 外部ファイルはJavaScriptであれば.js拡張子を付けて保存します。

構文

 <script>タグはHMTLヘッダーとHTMLボディー内のどちらでも記述出来ます。JavaScriptを動作させる場合でHTMLファイルに直接記述する場合の構文は以下の通りです。

<script language="javascript">
<!--
JavaScriptを記述します。
// -->
</script>

 複数記述するとその度にJavaScriptが実行されます。

 外部ファイルを指定して読み込む場合の構文は以下の通りです。

<script language="javascript" src="外部ファイル名"></script>

 外部ファイル名は例えばtest.jsと記述します。jsディレクトリ配下にあればjs/test.js、親ディレクトリにあれば../test.jsといった記述になります。

 複数行記述する事で外部ファイルを複数読み込めます。

直接HTMLファイルに記述する利用例

 JavaScriptをHTMLファイルに直接記述する場合の利用例は以下の通りです。

<script language="javascript">
<!--
a = 1 + 2;
document.write(a);
// -->
</script>

 上記はaに1+2の結果を代入し、document.writeでその結果を表示するスクリプトです。これを表示すると以下になります。

 上記は計算結果を表示しているため、HTMLボディー内で結果を表示したい位置に記述する必要があります。

外部ファイルから読み込んで実行する利用例

 JavaScriptを外部ファイルから読み込ませる利用例ですが、まずは先ほどのスクリプトをscript.jsというファイルに保存します。

function test(){
a = 1 + 2;
document.write(a);
}

 最初と最後の行の赤字部分が追加になっていますが、これは関数の定義です。testという関数を作っています。

 作成したscript.jsファイルを読み込ませるためにHTMLファイルでは以下を記述します。

<script language="javascript" src="script.js">"></script>

 通常、読み込みはHTMLヘッダーにまとめて記述しますが、HTMLボディー内に記述しても動作します。これでHTMLファイル上でtestという関数が読み込まれます。

 この関数を実行したい場所で以下のように記述します。

<script language="javascript">
<!--
test();
// -->
</script>

 上記はJavaScriptをHTMLファイルで直接記述する方法ですが、先ほど定義したtest関数を実行しています。

 つまり、script.jsファイルでtest関数を作成し、HTMLファイルではscript.jsファイルを読み込んで、その後test関数を実行しています。

 上記を表示すると以下になります。

 上記の通り、HTMLファイルに直接JavaScriptを記述したのと結果は同じです。

 このため、簡単なJavaScriptは直接記述した方が手間が省けますが、長いJavaScriptになるとHTMLファイルがJavaScriptだらけで分かり辛くなるため、外部ファイルの利用がお奨めです。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加