あーりーです。
JavaScriptを記述する場所は、3種類あります。
それがこちら
↓
- HTMLとは別の外部ファイルに記述して、HTML側から呼び出す
- HTMLの<head>タグ内に記述する
- HTMLの<body>タグ内に記述する
この3つのうち、下の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ファイルを作る手順
1.新規のエディタ(メモ帳など)を起動します
2.上の内容をエディタにコピペします
3.「page1.html」というファイル名で保存します
これでHTMLファイルは完成です。
外部ファイルを作る
つづいて、外部ファイルを作ります。
内容はこれです。
↓
javascript.js
alert("ようこそ!");
Javascriptの本文です。
では、手順です。
外部ファイルを作る手順
1.新規のエディタ(メモ帳など)を起動します
2.上の内容をエディタにコピペします
3.「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入門」にまとめてあります。よろしければご覧ください。