ボタンや文字をクリックした時に JavaScript のアクションを実行するには、onclick を用います。
<input type="button" value="Click me!" onclick="alert('OK')">
<span onclick="alert('OK')">Click me!</span>
マウスを乗せた時に JavaScript のアクションを実行するには onmouseover、マウスを離したときに実行するには onmouseout を用います。
<a href="xx.htm" onmouseover="alert('IN')">☆☆</a>
<a href="xx.htm" onmouseout="alert('OUT')">☆☆</a>
☆☆ ☆☆
ページを開いたときに JavaScript のアクションを実行するには <script> を用います。
<script>
alert("Welcome my homepage!!");
</script>
ただし、上記の場合、ページの読み込みが完了しないうちに JavaScript が実行されてしまい、ページ内の要素にアクセスできないことがあります。window オブジェクトの onload を使用すると、ページをすべて読み終わった後でアクションが実行されるためこの問題を回避することができます。
<html>
<head>
<title>テスト</title>
<script>
window.onload = function() {
alert("Welcome to my homepage!!");
}
</script>
</head>
<body>
:
</body>
</html>
ただし、上記の場合、ページを表示した際に複数の処理を実行する場合、すべて、ひとつの関数に集約する必要があり、処理のモジュール化が難しくなります。addEventListener() を用いることにより、この問題を解決することができます。
<script>
window.addEventListener("load", function() {
// 初期化処理1
});
window.addEventListener("load", function() {
// 初期化処理2
});
</script>
一定時間毎に JavaScript のアクションを実行するには、setInterval() を用います。下記の例では、5000ミリ秒(5秒)毎に、Hello!! というアラートダイアログを表示します。
<script>
window.addEventListener("load", function() {
setInterval(function() {
alert("Hello!");
}, 5000);
});
</script>