ところが、「鯛の絵が骨の絵に変わる」方は、ジッと待っていても何も変化しません。ページを閲覧している人がマウス(ポインタ)を動かして、鯛の絵のところにマウスポインタをもって行くことで、骨の絵に変わります。その後、マウスポインタが骨の絵から離れると、再び鯛の絵に戻ります。つまり、これらの処理は、Webページを閲覧している人の行う「特定の操作を契機として処理が始まる」のです。

これから分かるように、JavaScriptで記述した処理を起動するタイミングには、以下の2つがあることになります。

Webページが表示されると同時に起動する処理
閲覧者の特定の操作により起動する処理

JavaScript処理を適用するには、定義した(定義されていた)処理の名前をHTMLファイルの実行したい場所に記述することになりますが、上記のタイミングの違いにより、HTMLファイルの中に記述する方法も違ってくることになります。

1.Webページが表示されると同時に起動する処理

1.の場合は、表示したい部分に単に処理の名前を書くだけです。ただし、HTMLファイル中に記述しますが、HTML要素では無く、 JavaScript言語ですので、それと分かるように記述する必要があります。

そこで、このような場合のJavaScriptは、以下のようにscript要素の内容として記述するということになっています。以下は、 myscript.jsの中で定義している、now_time()という処理を適用する場合の例です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="./myscript.js"></script>
    <title>
      第11回　サンプルHTML
    </title>
  </head>

  <body>
    <script type="text/javascript">
    <!--
      now_time();
    //-->
    </script>
  </body>

</html>

→　【ブラウザで結果を見る】

scriptタグ中のtype属性で、内容がJavaScriptであることを宣言します。
また、JavaScriptに対応していない古いWebブラウザでもエラーにならないように、 script要素の内容は、すべてコメントにしておきます。(「//」は、 JavaScriptでコメントをつくる記号です。)

2.閲覧者の特定の操作により起動する処理

次に、2.の場合です。こちらは1.とは異なりちょっとしたテクニックが必要となります。なぜなら、皆さんの作ったWebページを見てくれている人が、マウスを動かしたりクリックしたことを検知する必要があるからです。これには「イベント処理」という概念が必要になりますので、まずはそれについて次の節で説明します。

処理の適用(1) ～起動するタイミング

起動するタイミングの違い

1.Webページが表示されると同時に起動する処理

2.閲覧者の特定の操作により起動する処理

処理の適用(1)　～起動するタイミング