DHTML -2-

No.03　Javascript の記述方法
02　タグからの Javascript 呼び出し

　さて、Javascript は単体でも無論動作しますが、ユーザーのサイト上の操作によってアクションを起こすためには、タグとの連携を取ることが必要となります。
　例えば、ハイパーリンク( <A href= "～" > )でクリックしたときにアクションを起こしたり、マウスの動きをトレースするといった行動は、連携を行わないと動作できない部分のひとつです。

ハイパーリンクからの呼び出し

　画面上のハイパーリンクをクリックした場合に Javascript を動作させる場合には、href="javascript:[命令]"　といった形式を取ります。　この [命令] の部分には、直接Javascript 命令を記述することが出来ますが、複数行のプログラムを動作させる場合は、ファンクションを指定するほうが、ソースも見やすくなりますしプログラム量も節約できます。

ハイパーリンクからの呼び出し　２

<Html>
<Head>
  <Script Language = "Javascript">
    function test(){
        document.write("TEST");
    }
  </Script>
</Head>

<Body>
  <A href="javascript:test()"> クリック～</a>
</Body>
</Html>

　具体的なアルゴリズムの呼び出しは上のようになります。
　ハイパーリンクをクリックすると、 <Script> ～ </Script>に記載された function test () { ～ } の命令が呼び出され、中のプログラムがアクションを起こすという流れになります。　この方法を用いることで、複雑なプログラムを発動させる場合であっても、タグ内に記載する量は少なくて済むことが出来ますし、　似たようなアクションを行うリンクがある場合、これらを統合することも可能になります。

ハイパーリンクからの呼び出し　３

<Html>
<Head>
  <Script Language = "Javascript">
    function test(number){
        document.write("TEST" + number);
    }
  </Script>
</Head>

<Body>
  <A href="javascript:test(1)"> クリック 「１」</a>
  <A href="javascript:test(2)"> クリック 「２」</a>
</Body>
</Html>

　上記のスクリプトの場合、複数のハイパーリンクから function test(){ ～ ] が呼び出されているわけですが、このファンクションに引数を受け渡しすることで、実際のアクションに変化を加えている点で、最初のスクリプトと異なります。

　タグからJavascriptを動作させるためのアクションは、この他に <A> タグのオプションコマンドを用いる方法があります。

ハイパーリンクからの呼び出し　４

　上記は、「OnMouseDown」というコマンドを使って、Javascriptを動作させた例です。
　これらのコマンドは、初めからJavascript連携の為に用意されたもので、「javascript:test()」のように、最初に「javascript:」を記述する必要が無いのが特徴です。　この命令は、マウスのボタンがクリックダウンした場合に、「test()」ファンクションを呼び出しています。

OnMouseOver	マウスが指定部に乗った場合
OnMouseOut	マウスが指定部から離れた場合
OnMouseDown	マウスが指定部でクリックダウンされた場合
OnMouseUp	マウスが指定部でクリックアップされた場合
OnMove	マウスが指定部で移動した場合

　ここに記載したのはイベントの一部ですが、この他にも特定タグなどでのみ動作するイベント(<Body> の OnLoad 等）もあるので、リファレンス等でチェックしてみると良いでしょう。

ページの最上段へ移動します