外部のJSファイルの処理を呼び出す - 外部JSファイルの読み込み

外部のJSファイルを読み込んで処理を呼び出すコードを紹介します。

概要

外部のJavaScriptファイル (JSファイル)を読み込むには、script タグを利用します。scriptタグのsrc属性に読み込むJSファイルを指定します。

書式

プログラム例

コード

下記のコードを記述します。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="proc.js"></script>
</head>
<body>
  <input id="Button1" type="button" value="button" onclick="exec();"/>
  <div id="output"></div>
</body>
</html>

proc.js

function exec() {
    var elem = document.getElementById("output");
    var now = new Date();
    var hour = now.getHours();
    var min = now.getMinutes();
    elem.innerHTML = "ボタンがクリックされました。 (" + hour +":" + min + ")";
}

解説

Headセクションの下記のscriptタグで外部のJavaScriptファイルを読み込みます。

  <script src="proc.js"></script>

下記のコードでページにボタンを配置します。ボタンをクリックするとexec()関数を呼び出します。exec関数は外部のJSファイルに実装されています。

  <input id="Button1" type="button" value="button" onclick="exec();"/>

外部のproc.jsファイルに実装されているexec関数のコードが下記です。"output" のIDを持つ要素を取得し、「ボタンがクリックされました。」のメッセージと現在の時刻を表示します。

function exec() {
    var elem = document.getElementById("output");
    var now = new Date();
    var hour = now.getHours();
    var min = now.getMinutes();
    elem.innerHTML = "ボタンがクリックされました。 (" + hour +":" + min + ")";
}