スタートページJavascript外部ファイルの読込

スクリプトファイル(JSファイル)の読込

外部ファイルから配列データを読み込む最も単純な手段は、そのデータをスクリプトファイル(JSファイル)で記述しておく方法です。


外部JSファイルのデータをグローバル変数にする場合

外部JSファイは、called/called-script.js にあります。
  <script language="JavaScript" type="text/javascript" src="called/called-script.js"></script>

  var 学生番号 = new Array();
  var 学生氏名 = new Array();
  var 学生学部 = new Array();
  学生番号[0] = "123456";  学生氏名[0] = "鈴木太郎"; 学生学部[0] = "工学部";
  学生番号[1] = "987654";  学生氏名[1] = "佐藤花子"; 学生学部[1] = "文学部";
  学生番号[2] = "111111";  学生氏名[2] = "佐藤二郎";

外部JSファイルの記述で"~" の中で改行があると動作しません!

これが、グローバル変数として定義されています。それで親ファイルでは、次のスクリプトで表示できます。

<script type="text/javascript">
    function ケース1() {
        var 学生数 = 学生氏名.length;
        var 表示内容 = "学生数=" + 学生数 + "<br>";
        for (var i=0; i<学生数; i++) {
            表示内容 += "学生番号[" + i + "]=" + 学生番号[i]
                     +  " 学生氏名[" + i + "]=" + 学生氏名[i]
                     +  " 学生学部[" + i + "]=" + 学生学部[i] + "<br>";
        }
        document.getElementById('ケース1表示場所').innerHTML = 表示内容;
    }
</script>

▼▼▼▼▼ ここから ▼▼▼▼▼

ここに表示されます

▲▲▲▲▲ ここまで ▲▲▲▲▲

外部JSファイルを関数にする場合

学生番号などをグローバル変数にしたくないときは、JSファイル(called/called-script2.js)を次のようにfunctionにします。
配列定義は親ファイルで行うので、ここで記述できません。

function 学生配列(学生番号, 学生氏名, 学生学部) {
    学生番号[0] = "123456";  学生氏名[0] = "鈴木太郎"; 学生学部[0] = "工学部";
    学生番号[1] = "987654";  学生氏名[1] = "佐藤花子"; 学生学部[1] = "文学部";
    学生番号[2] = "111111";  学生氏名[2] = "佐藤二郎";
}

親ファイルのスクリプトは次にようになります。Aで配列を定義し、BでJSファイルの関数「学生配列」からその要素を得ます。

<script type="text/javascript">
    function ケース2() {
        var 学生番号 = new Array();               // A
        var 学生氏名 = new Array();
        var 学生学部 = new Array();

        学生配列(学生番号, 学生氏名, 学生学部);   // B

        var 学生数 = 学生氏名.length;
        var 表示内容 = "学生数=" + 学生数 + "<br>";
        for (var i=0; i<学生数; i++) {
            表示内容 += "学生番号[" + i + "]=" + 学生番号[i]
                     +  " 学生氏名[" + i + "]=" + 学生氏名[i]
                     +  " 学生学部[" + i + "]=" + 学生学部[i] + "<br>";
        }
        document.getElementById('ケース2表示場所').innerHTML = 表示内容;
    }
</script>

▼▼▼▼▼ ここから ▼▼▼▼▼

ここに表示されます

▲▲▲▲▲ ここまで ▲▲▲▲▲