ボタンや文字をクリックした時に 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> の中に処理を記述します。

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

上記だと、処理の中でグローバル変数を定義した場合、他のスクリプトに影響を与えてしまう可能性がある(グローバル変数を汚染してしまう)ため、即時実行関数という仕組みを用いて下記の様に記述したりします。これだと、グローバル変数を汚染することがありません。

<script>
(function() {
  alert("Hello world!");
})();
</script>

これらのスクリプトが HTML 内の要素(DOM)を参照する場合、<script>～</script> をコンテンツの最後に記述しないと、JavaScript が実行されるタイミングでまだ要素にアクセスできないことがあります。この問題を解決するために昔は windows.onload を用いていました。

<script>
window.onload = function() {
  alert("Hello world!");
}
</script>

ただし、window.onload はページにつきひとつしか指定できないため、外部ライブラリなど window.onload を使用する機能が複数あった場合、最後に設定したものだけが有効となり、他のものは無視されてしまいます。addEventListener() を用いることにより、この問題を解決することができます。

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

load だと画像などすべてのコンテンツのロードが完了した時点で呼び出されますが、DOMContentLoaded を使用すると HTMLファイルの読み込みが完了した時点で呼び出されます。

<script>
window.addEventListener("DOMContentLoaded", function() {
  alert("Hello world!");
});
</script>

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

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