あーりーです。
JavaScriptを記述する場所は、3種類あります。
それがこちら
↓
- HTMLとは別の外部ファイルに記述して、HTML側から呼び出す
- HTMLの<head>タグ内に記述する
- HTMLの<body>タグ内に記述する
この３つのうち、下の2つについては、こちらの記事に書きました。
今日は残りのひとつ、「HTMLとは別の外部ファイルに記述して、HTML側から呼び出す」方法を見ていきますね。
外部ファイルのメリット
JavaScriptを外部ファイルに記述すると、いろいろな良いことがあります。
メリット1 すっきり
HTMLファイルのソースがスッキリします。
HTMLとJavaScriptが混在している状態だと、ゴチャゴチャしちゃいますよね。それが分離されることでスッキリした見た目になります。
メリット2 使い回し
JavaScriptを外部ファイルにしておけば、それを複数のHTMLファイルから呼び出すことができます。
つまり、1つのJavaScriptを複数のHTMLファイルで使い回せるんです。
メリット3 変更
変更が簡単です。
JavaScriptが1つのファイルにまとまっていると、それを変更するだけで、すべてのページに反映されます。
楽ちんです。
デメリット
逆にデメリットは…
慣れないうちは「わざわざ分離するのがちょっと面倒」っていう気持ちになる、といったところでしょうか。
サンプル
それでは、さっそくいきましょう～。
JavaScriptを外部ファイルに記述する方法です。
題材にするJavaScriptは、いつものこれです。
<html>
<head>
<script>
alert("ようこそ！");
</script>
</head>
<body>
</body>
</html>
↑これは<head>タグ内に記述している状態です。
この内容をメモ帳などのエディタにコピペして、HTML形式で保存し、ダブルクリックで開くと…
ダイアログボックスで「ようこそ！」というアラートが表示されます。
そういうJavaScriptです。
でも、今回はJavaScriptの内容はどうでもいいんです。
外部ファイルに記述するって具体的にどうやるの？っていう話がメインです。
2つのファイルに分離する
いまは、HTMLとJavaScriptが一体となっている状態です。
これを「HTMLファイル」と「外部ファイル」（JavaScriptだけが記述されたファイル）に分離します。
どこをどう分離するかというと…
黒い部分はそのままHTMLファイルに残し、赤い部分を外部ファイルに引っ越しします。
<html>
<head>
<script>
alert("ようこそ！");
</script>
</head>
<body>
</body>
</html>
赤い部分というのは、JavaScriptの本文ですね。
では、実際にやってみます。
HTMLファイルを作る
まず、HTMLファイルを作ってみます。
これです
↓
page1.html
<html>
<head>
<script src="javascript.js"></script>
</head>
<body>
</body>
</html>
HTMLファイルの名前は何でもいいんですけど、ここでは仮に「page1.html」としてみました。
緑色の部分が、外部ファイルを呼び出す指令です。
この中の「javascript.js」の部分が、外部ファイルの名前です。
HTMLファイルを作る手順
１．新規のエディタ（メモ帳など）を起動します
２．上の内容をエディタにコピペします
３．「page1.html」というファイル名で保存します
これでHTMLファイルは完成です。
外部ファイルを作る
つづいて、外部ファイルを作ります。
内容はこれです。
↓
javascript.js
alert("ようこそ！");
Javascriptの本文です。
では、手順です。
外部ファイルを作る手順
１．新規のエディタ（メモ帳など）を起動します
２．上の内容をエディタにコピペします
３．「javascript.js」というファイル名で保存します
ファイル名は、さっきHTMLファイル（page1.html）の緑の部分に書いたのと同じ名前にします。（そうしないと呼び出されないので）
2つのファイルがそろった
これで、HTMLファイル（page1.html）と、外部ファイル（javascript.js）の2つが完成しました。
これを同じフォルダ（ウェブ上ならディレクトリ）内に置きます。
おまけ
2つのファイルを同じフォルダ内に置かないときは、どうすればいいのか？
そういうときは、HTMLファイル（page1.html）の一部をちょっと変えます。
外部ファイル（javascript.js）を相対パスで呼び出すようにするんです。
たとえば、外部ファイル（javascript.js）の置き場所を、HTMLファイルがある階層の直下の「aaa」フォルダにしたい場合…
HTMLファイルはこうなります。
↓
<html>
<head>
<script src="aaa/javascript.js"></script>
</head>
<body>
</body>
</html>
実行
では、実行してみます。
HTMLファイル（page1.html）を開くと…
「ようこそ！」というアラートが表示されました。
JavaScript成功です。
今日はこれで、おしまい。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
