■

研究 プログラミング

オプティカルフローのアニメプレーヤー機能がとりあえず完成。計算条件や描画条件を変えた例は未完。

私の JavaScript のポリシーは、できる限り HTML ファイルにコードを書かないこと、スクリプト(js)ファイルだけで何とかすることです。このポリシーは、なるべく文章構造とプログラムを分離するという流派のもので、スタイルシートでも文章構造と見た目の分離という形で知られてます。このようにファイルを分ける場合は、スクリプトファイルを src 属性で指定した script 要素を HTML の head 要素内に記述します。

<head>
 <!-- 中略 -->
 <meta http-equiv="content-script-type" content="text/javascript">
 <script type="text/javascript" src="hoge.js"></script>
</head>

しかし、クリック等のイベント時に実行する場合、HTML の要素に onclick などのイベント属性を付加してコードを記述する必要があります。こういう場合、以下のようなコードで要素にイベントを動的に付加しています。

function init(){
  elem = document.getElementByID("eve");
  elem.onclick = alert(); // elem はイベントを付加する要素(id="eve")
}

window.onload = init;

こうすれば、イベント属性も全てスクリプトファイルに記述できます。ここで、イベントを付加する要素には id などの特定可能な属性を付けるなどして、 JavaScript 側から指定できる必要があります。