JavaScript の書き方

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!!

目次

<script>～</script>

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

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

URL記述(javascript:...)