アクション

トップ > 逆引きリファレンス > アクション

マウスをクリックした時○○するには

ボタンや文字をクリックした時に JavaScript のアクションを実行するには、onclick を用います。

HTML
<input type="button" value="Click me!" onclick="alert('OK')">
<span onclick="alert('OK')">Click me!</span>
表示
Click me!

マウスを乗せた時に○○するには

マウスを乗せた時に JavaScript のアクションを実行するには onmouseover、マウスを離したときに実行するには onmouseout を用います。

HTML
<a href="xx.htm" onmouseover="alert('IN')">☆☆</a>
<a href="xx.htm" onmouseout="alert('OUT')">☆☆</a>
表示
☆☆
☆☆

参考:「リンクにマウスを乗せたときに色を変えるには

ページを開いたときに○○するには

ページを開いたときに JavaScript のアクションを実行するには <script> を用います。

HTML
<script>
alert("Welcome my homepage!!");
</script>

ただし、上記の場合、ページの読み込みが完了しないうちに JavaScript が実行されてしまい、ページ内の要素にアクセスできないことがあります。window オブジェクトの onload を使用すると、ページをすべて読み終わった後でアクションが実行されるためこの問題を回避することができます。

HTML
<html>
<head>
<title>テスト</title>
<script>
window.onload = function() {
  alert("Welcome to my homepage!!");
}
</script>
</head>
<body>
 :
</body>
</html>

ただし、上記の場合、ページを表示した際に複数の処理を実行する場合、すべて、ひとつの関数に集約する必要があり、処理のモジュール化が難しくなります。addEventListener() を用いることにより、この問題を解決することができます。

HTML
<script>
window.addEventListener("load", function() {
  // 初期化処理1
});
window.addEventListener("load", function() {
  // 初期化処理2
});
</script>

定期的に○○するには

一定時間毎に JavaScript のアクションを実行するには、setInterval() を用います。下記の例では、5000ミリ秒(5秒)毎に、Hello!! というアラートダイアログを表示します。

HTML
<script>
window.addEventListener("load", function() {
    setInterval(function() {
        alert("Hello!");
    }, 5000);
});
</script>

Copyright (C) 2003-2017 杜甫々
初版: 2003年10月17日、最終更新:2017年12月17日
http://www.tohoho-web.com/how2/action.htm