JavaScript Eyes


Javascript Eyes That Follow


* original contents → http://oopstudios.com/ask_me/009_javascript_eyes_that_follow/index.html



我が社ナレッジデザインの女性講師Yさんの"はじめてのJavaScript"コースを受講し、その後、JavaScriptを触り始めたのですが、ネットでX Window Systemのプログラムxeyes のJavaScript版といった感じのプログラムを見つけたので、それを拝借し、若干の変更をして動かしてみました。


以下、JavaScriptの解説書を参照しながら調べたプログラムの中身です。

・DOM(Document Object Model)の階層構造を操作するため、Windowsオブジェクトの中のDocumentオブジェクトを使用する。
・以下の4つのメソッドを使用する。
  document.attachEvent    - onmousemoveイベント処理用のハンドラの追加。IE, Opera用。
  document.addEventListener  - onmousemoveイベント処理用のハンドラの追加。IE, Opera以外(Firefoxなど)。
  document.getElementById   - 引数に指定した値をid属性に持つエレメントを取得する。
  getElementsByTagName    - 引数に指定したエレメントのリストを取得する。
                  このプログラムの場合は、getElementByIdで取得したエレメントの1つ下位のエレメント。
・イベントハンドラonmousemoveはマウスがエレメント内で移動した時に呼び出される。
・CSSの以下のプロパティを使用する。
  moz-border-radius      - 画像の角を丸くする。Firefox用。
  webkit-border-radius     - 画像の角を丸くする。Firefox以外?