JavaScript チュートリアル 初級編 05 外部ファイル

前回まではhtmlファイル内に記載していました。

JavaScript は .js ファイル内に記載して
.html ファイルから読込 という方法でも実行できます。

つまり、
ウェブサイトの内容は html ファイルに記載し、
動き(アクション)は js ファイルに記載することで
管理を容易にすることができるわけです。



大概のプログラムが、1つのファイルに全ての命令を記載するのでなく、
目的ごとのパーツとなるプログラムを作り、
表示の段階で統合する という考えをしています。

このページでは この外部ファイルの利用方法を紹介します。
前述したように外部ファイルを使うのですから、少なくとも2つのファイルが必要となります。

ここでは [ tut-05.html ] と [ gaibu.js ]の2つを使うことにします。

それぞれのファイルに以下のように記載してください。

[ tut-05.html ]
<html>
<head>
  <title>JavaScript 基本ルール 05</title>
<body>

<script src=”./gaibu.js”></script>
</body>
</html>



[ gaibu.js ]
alert(“外部ファイル読込成功しました”);

外部ファイルを読み込むためには、読込元の .html ファイルの<body>タグ内に
<script src=”./gaibu.js”> のように記載します。


(※ <script src=”./gaibu.js”>は</body>タグの直上に書くことが推奨されている様です。)


この意味は
読み込もうとしている .html ファイル と同じフォルダにある gaibu.js ファイル を読込む
という意味です。

.html では 画像を読み込むときにも src プロパティを使いますので、
慣れていなくても心配しなくていいです。そのうち覚えています。

そんなもんです。