外部のJSファイルを読み込んで処理を呼び出すコードを紹介します。
外部のJavaScriptファイル (JSファイル)を読み込むには、script タグを利用します。scriptタグのsrc属性に読み込むJSファイルを指定します。
下記のコードを記述します。
<!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>
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 + ")";
}
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[button]をクリックします。ボタンの下部に「ボタンがクリックされました。」のメッセージと現在の時刻が表示されます。
上記のコードで以下が確認できました。