JavaScript の書き方

目次

<script>～</script>

JavaScript は通常 <script>～</script> の間に記述します。

HTML
<script>
alert("Hello!!");
</script>

JavaScript 外部ファイル(src=...)

また、HTML とは別に、外部ファイルに記述した JavaScript ファイルを呼び出すこともできます。例えば、下記の内容を test.js など、拡張子が .js のファイルに記述しておきます。

test.js
function ohayou() {
  alert("Hello!");
}

これを、HTML ファイルから次のようにして読み込みます。

HTML
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sample</title>
<script src="test.js"></script>
</head>
<body>
   :
<input type="button" value="OK" onclick="ohayou()">
   :
</body>
</html>

外部ファイルを複数読みこませたい場合は、次のように <script> を2つ記述してください。

HTML
<script src="test1.js"></script>
<script src="test2.js"></script>

イベントハンドラ(on～)

上記の例でも使用していますが、次のようにして、ボタンをクリックしたとき（onclick）やマウスを乗せたとき（onmouseover）などに JavaScript を実行することができます。これを、イベントハンドラと呼びます。下記の例では、Click Me!! というボタンを押したときに、Hello! というダイアログを表示します。

HTML
<input type="button" value="Click Me!!" onclick="alert('Hello!!')">
実行

URL記述(javascript:...)

JavaScript を下記のように記述すると、リンクをクリックした際に JavaScript を実行することもできます。

HTML
<a href="javascript:alert('Hello!!')">Click Me!!</a>
実行
Click Me!!
Copyright (C) 1996-2019 杜甫々
改訂版初版：2001年5月20日、最終更新：2019年2月17日
https://www.tohoho-web.com/js/write.htm