JavaScriptで学ぶ
文系の人にもわかるプログラミング入門

第10章以降は現在改訂作業中です。少し古い内容が入っていますので、注意してお読みください。問題なく動作はしますので、プログラミングの学習としては無駄にはなりません。 ただし、現在は「よい」とはみなされていない表記方法などが、その旨の注意書きなしで使われている箇所があります。

実践のプログラムを書かれる際には『初めてのJavaScript 第3版』などをご覧になって、よりよい方法を身につけられることをおすすめします。

第12章   プログラムの別ファイルへの保存

次の章で作る「採点機能付き計算練習ページ」はかなり大きなプログラムになります。 このための準備として, もうひとつ便利な機能を学んでおきましょう。 別ファイルへのプログラム(スクリプト)の保存機能です。

別のファイルにスクリプトを保存 ── <script ... src="filename.js">

計算練習のプログラムもだいぶ長くなってきましたが, 計算問題を生成する部分はいつも同じでここのところまったく変更していません。 そこで, この部分をいつもリストするのは面倒なので, ほかのファイルに入れて参照するだけにしたいと思います。

<script>タグにsrc属性を指定し, ここにファイル名を書くことにより, JavaScriptのプログラムを, ブラウザにアドレスを指定するHTMLのファイルとは別のファイルに保存しておくことができます。

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

src属性への指定は<a>タグと同様で, 相対的にファイルを指定することも, URLを使って http://... と絶対的に指定することもできます。

プログラム12-1 example12-01.html 計算練習11

一方keisansub.jsのほうは次のようになります。

プログラム12-2 keisansub.js 計算練習ファイル2

こちらはJavaScriptのファイルなので, keisansub.htmlのように拡張子をhtmlとする必要はありません。 keisansub.jsなどと, .jsという「拡張子」をつけてJavaScriptのファイルであることを表します。

このように別のファイルにしておくと, まちがってさわる必要のない部分を変更してしまう危険もなくなります。 また, randomInt()などkeisansub.jsに入っている関数を自分用の「ライブラリ」として, 簡単に使うことができるようにもなります。

メモ

グローバル変数の名前をgKeisanSubMondaiKiokuとgKeisanSubMondaiBangouと変更しました。 gを付けたのは, gKanjiYomiと同じ流儀にするためです。 なぜ, こんなに長くしたかは, 次の章で説明します。

まとめ

この章では, プログラムの一部を別のファイルに保存する方法を紹介しました。

JavaScript関連のタグ

JavaScriptで学ぶ
文系の人にもわかるプログラミング入門
第12章 次の章へ