link-log powered by fullsizeimage.inc

Jul  18,  2007

Web標準の日に行ってきました。その2　「DOMから始めるjavascriptモダンスクリプティングの基礎」編

4つのセッションしか受けなかったのですが、
かぶってたり、ちょっと書くのに調べたかったりするので、
先に最終日のfutomiの羽田野さんの講義に関して書いておきます。

いつもお世話になっている羽田野さんですが、
事前にこういうことも話をして欲しいとお願いしていたものも
追加で盛り込んでくれて、非常に参考になりました。
ライブラリを使って簡単にというのも、素敵なのですが、
こういった基礎をきちんと説明してくれるセミナーというのも
非常に貴重だなぁ〜と。

講義の後で、羽田野さんとごはん食べにいって、いろいろ聞けたし、
充実した2日間でした。
でも、さすがにちょっと、疲れた。。
さすがに半分徹夜明けの状態で、聴講はきついというのが身にしみて
わかった日でもありました。

■参加した講義
DOMから始めるjavascriptモダンスクリプティングの基礎
羽田野さん
futomi's cgi cafe


■内容
1.DOM
2.イベント
3.でしゃばるなJavaScript
4.コードは使い回せ

1.DOM
DOMの利点：
プラットフォームや言語に依存しない 。
クロスブラウザから解放される（IEはいかん）
誰でも完全な仕様が調べることができる
その他、高機能だよ。

ドキュメントツリー
基本は一緒だが、ブラウザによって異なる。
FireFoxだと空のオブジェクトがある。

DOMコーディング：
H1要素を書き換えるには
var h1 = document.getElementsByTagName("H1"),item(0); h1.firstChild.nodeValue="H1のテキスト"；

P要素を新たに追加するには
var p = document.createElement("P"); var txt = document.createTextNode("追加のP要素")； p.appendChild(txt); document.body.appendChild(p);


2.イベント
イベント・リスナ
イベントハンドラの代わりに、イベントリストを使う。
var div = document.getElementByID('box'); var popup = function(){alert("clicked!");}; div.addEventListener("click", popup , false);
どの要素で＝div
どのイベントが＝click
どんな処理を＝popup
どのフェーズで＝false
（ちなみにどのフェーズでの箇所でイベントの伝搬、
キャプチャーフェーズ／ターゲットフェーズ／バブリングフェーズの説明
IEにはキャプチャーフェーズが存在しないので独自のattachEventメソッドで代用）

イベントリスナのセット関数（attachEventでIEを判別）
var addListner =function(elm, type, func){ if(! elm){return false;} if(elm.addEventListener){/*W3C準拠ブラウザ用*/ elm.addEventListener(type, func, false); }else if(elm.attachEvent){/*Internet Explorer用*/ elm.attachEvent('on'+type, func); }else{ return false; } return true; }; var div =document.getElementByID('box'); var popup = function(){alert("clicked!");}; addListener(div, "click",popup);

HTMLとスクリプトの分離
/*イベントリスナのセット関数（上記のやつ）*/ var addListner =function(elm, type, func){...} /*HTMLがロードされたときに実行する処理*/ var init = function(){ var div = document.getElementByID('box'); var popup = function(){alet("clicked!");}; addListner(div, "click",popup); }; /*windowオブジェクトにloadイベントが発生したらinit関数を実行*/ addListener(window, "load", init);


3.でしゃばるなJavascript
とりあえず、Javascriptは完全に分離しましょうということ。
スタイルシートも先に定義だけしておいて、それをJSでclass制御しましょう。

JSがきかないブラウザでもコンテンツが読めなくなるようなscriptは書いてはいけません。


4.コードは使い回せ
この辺から難しくなってきた。自分的には要復習な感じです。
・名前空間の衝突に注意
・オブジェクトを活用しよう
1つのjsファイアルを機能単位で1つのオブジェクトにすべて格納し、パッケージ化しましょう。

このあたりはきちんと自分で理解できたら追記します。


あと、残り「Ajax/Flashでらくらく・わくわく・マッシュアップ」に関しては、
後日書きます。

Kawata ： 4:20 AM