HTMLなどでJavaScriptを読み込ませると、Webサイトに様々な便利機能を追加させてくれます。なので便利なJavaScriptを見つけるといくつも導入してみたくなるものです。
しかし、複数のJavaScriptを読み込ませようとすると、HTML内の記述が煩雑になり見にくくなってしまいます。
そこで、JavaScriptの読み込み(ロード)を1つのファイルにすべてまとめて実行する方法を紹介します。
これでHTMLの記述がすっきりし、またJavaScriptの管理もしやすくなります。
いくつか方法はあると思いますが、この記事では2つの方法を紹介します。
「document.write」を使う方法
「document.write()」は括弧内に記述されている内容をHTMLに出力するJavaScriptの関数です。
つまり、「document.write()」の括弧内に「<script type=”text/javascript” src=”../js/AAA.js”></script>」といった感じに記述すれば、HTMLに出力されJavaScriptファイルが読み込まれるということになります。
また、「document.write()」は複数同時に利用できる関数なので、ひとつのJavaScriptファイル(.js)にまとめて記述することができます。
document.write('<script type="text/javascript" src="../js/AAA.js"></script>');
document.write('<script type="text/javascript" src="../js/BBB.js"></script>');
document.write('<script type="text/javascript" src="../js/CCC.js"></script>');
document.write('<script type="text/javascript" src="../js/DDD.js"></script>');
...
テキストファイルを作成後、以上のように「document.write()」を複数使ってJavaScriptを読み込ませるよう記述します。保存したら拡張子を「.js」に変更してアップロードします。ファイル名は任意ですが、今回は「import.js」という名前にします。
<script type="text/javascript" src="../js/import.js"></script>
最後にHTMLで先ほど作成・アップロードしたJavaScriptファイルを読み込ませれば完了です。
JavaScriptの読み込み(ロード)を1つのJavaScriptファイルにすべてまとめることができました。
for文を使う方法
for文を使って「document.write()」を使ったHTML出力によるJavaScriptの読み込みをループさせます。
function importJS() {
if (! new Array().push) return false;
var scripts = new Array(
'../js/AAA.js',
'../js/BBB.js',
'../js/CCC.js'
);
for (var i=0; i<scripts.length; i++) {
document.write('<script type="text/javascript" src="' +scripts[i] +’"></script>’);
}
}
importJS();
ひとつの関数に読み込ませたいJavaScriptファイルを書き、for文を使って「document.write()」をループさせることで順にHTMLへ出力させ、読み込ませます。(詳しい関数の解説は省きます。)
これも同じようにテキストファイルへ記述した後、拡張子を「.js」に変更してアップロード、HTMLでアップロードしたJavaScriptファイルを読み込ませればOKです。
<script type="text/javascript" src="../js/import.js"></script>
これで複数のJavaScriptファイルの読み込みをひとつのJavaScriptファイルにまとめ実行させることができました。
どちらの方法を使うかはお任せします。コード的にみるとfor文を使った方が美しいのでできればこちらが推奨です。
HTMLの見た目を気にする方は挑戦してみてはいかがでしょうか。
コメント
コメント欄を開く