分散して記述されたスクリプトの扱い

広告

スクリプトはXHTMLファイル内の複数の箇所に記述することが出来ます。

次の例を見てください。 

<p>XHTMLの文1</p>

<script type="text/javascript">
document.write("<p>スクリプトの文1</p>");
</script>

<p>XHTMLの文2</p>

<script type="text/javascript">
document.write("<p>スクリプトの文1</p>");
</script>

<p>XHTMLの文3</p>

それぞれのスクリプトは<srcipt>要素が読み込まれた時点で都度実行されることになります。

このように複数のスクリプトを(X)HTMLページ内に記述することが出来ますが、スクリプトは<script>要素の単位で完結しているわけではなくスクリプトが記述されている(X)HTMLページ単位でまとめて扱われます。

よってページ内の複数の箇所にスクリプトが分散していたとしても、それぞれのスクリプトは1つにまとめて記述されたかのように実行されます。その為、ヘッダ内で定義した関数を後から呼び出したり、あちこちで計算した結果を最後に出力するといったことが可能になります。 

<p>XHTMLの文1</p>

<script type="text/javascript">
var num = 10;
</script>

<p>XHTMLの文2</p>

<script type="text/javascript">
num = num * 10;
</script>

<p>XHTMLの文3</p>

<script type="text/javascript">
document.write("<p>結果は" + num + "です</p>");
</script>

上記ではスクリプトは3つに分かれて記述されていますが、実際には次のようにまとめて記述されているかのように扱われます。 

<script type="text/javascript">
var num = 10;
num = num * 10;
document.write("<p>結果は" + num + "です</p>");
</script>

このように(X)HTMLページ内で分散してスクリプトを記述されていても全体として1つのスクリプトのように動作しますので、例えばあるスクリプトで行った処理の結果を、それ以降のスクリプトでも利用することが可能となります。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<p>変数の宣言と初期値の設定</p>

<script type="text/javascript" src="./js/script3_1.js">
</script>

<p>別の変数の宣言と初期値の設定</p>

<script type="text/javascript" src="./js/script3_2.js">
</script>

<p>加算した結果の出力</p>

<script type="text/javascript" src="./js/script3_3.js">
</script>

</body>
</html>

var num1 = 10;
document.write("<p>num1 = " + num1 + "</p>");

var num2 = 24;
document.write("<p>num2 = " + num2 + "</p>");

var sum = num1 + num2;
document.write("<p>sum = " + sum + "</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p3-1

( Written by Tatsuo Ikura )