JavaScriptの外部ファイルJavaScript入門

更新日:2020.10.10
  1. HOME
  2. JavaScript入門
  3. JavaScriptの外部ファイル

このページではJavaScriptを外部ファイルで指定する方法について解説します。外部ファイルにソースを書いておくと複数のページから参照することができるので、良く使う関数などを記入しておくと非常に便利です。

外部ファイルの使用方法

外部ファイルを作成する

外部ファイルはJavaScript専用のファイルになります。 従って、HTMLの中にJavaScriptを埋め込む時に使った<script>~</script>記入する必要はありません。 直接JavaScriptのソースを書いていきます。

外部ファイルを保存する時に、拡張子を.jsにします。 こうすることによって、JavaScript専用ファイルになります。

外部ファイルを読み込む

外部ファイルを読み込む場合、以下のように記述します。

<script type="text/javascript" src="JSファイルのパス"></script>
外部JSファイルを読み込みます。

外部ファイルを読み込むのは、bodyタグの中の一番最後に書くのが良いとされています。

外部ファイルを用いたサンプル

今日の曜日を複数のページで表示してみます。

外部ファイルに記入

var yobi = new Array("日","月","火","水","木","金","土");
var today = new Date();
var week = today.getDay();

document.write( yobi[week] + "曜日です。");

上記のように記入して、「week.js」というファイル名で保存します。

JSファイルと同じ場所にsample1.html,sample2.html,sample3.htmlという3つのファイルを作ります。 そして各htmlファイルの中で、下のように記述して「week.js」を読み込みます。

<script type="text/javascript" src="week.js"></script>

サンプル1サンプル2サンプル3(各別窓)

どのファイルからも同じ処理が行なえます。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers