JavaScriptを外部ファイルに記述する方法

JavaScript

あーりーです。

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入門」にまとめてあります。よろしければご覧ください。

タイトルとURLをコピーしました