Ajax【6】 - Ajax学習中【5】

　Ajaxの学習経過報告 5

　ちょっと間が開いてしまいましたがサボってたわけではないです(笑)
まぁ、金・土・日は東京を満喫してきましたが(笑)

▲経過報告
・Ajaxを勉強しよう
　　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html
を使った学習を一旦終了。
　scriptaculous.jsやprototype.jsもサラっと学習。

　現在、自分が作ってみたと思っている簡単なゲームを実現するための技術を色々なところから習得中。
あまりにもJavaScriptの知識がないため、どのように実現するのがスマートなのか分からずに苦戦…。
　ぱっと見、タグにイベントハンドラを設定してやることで、オブジェクト指向プログラミングが実現しやすいのかなと思ったが、実際にやろうとすると「どこに全体の始点となるイベントを置くのが普通なのか」とか「オブジェクト指向っぽくプログラミングするにはクラスを使ったほうがいいのか」とか細かいところで悩む…。
　いっそ本格的にJavaScript勉強しちゃってもいいんだろうけど（苦笑）


▲学んだこと
●scriptaculous.jsの特徴について
　その問題点（ファイルサイズの増大や汎用関数の動作強制変更）などを学ぶ。
[はてな技術発表会日記 2005.11.11 テーマ script.aculo.us 発表者 d:id:aql]
　http://hatena.g.hatena.ne.jp/hatenatech/20051111/1131539607
[川o・-・）＜2nd life　script.aculo.us のファイルサイズを軽減する]
　http://d.hatena.ne.jp/secondlife/20060204
[123net :: 開発日記 » [雑記] 軽くした内容]
　http://www.123net.jp/dev//item/94

●各種入力イベントについて
　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/009/index.html
【マウス関連】
　click（クリックされた）
　dblclick（ダブルクリックされた）
　mousedown（マウスの左ボタンが押された）
　mouseup（マウスの左ボタンが離された）
　contextmenu（右ボタンがクリックされた）
　mouseover（マウスが重なった）
　mouseout（マウスが離れた）
　mousemove（マウスが動いた）
　など

★Internet Explorer以外でのW3Cに準拠したブラウザ
　→イベント名をそのまま。on はつかない。
　→addEventListener・removeEventListenerを利用する
★Internet Explorer
　→イベント名の先頭に on がつく。
　→attachEvent・detachEventを利用する


▲遭遇したエラー達
●画面に全く何も表示されなくなる
　→　JavaScriptの終了タグ </script> が <script> となりHTML全体がJavaScriptと認識されていたため

●CSSを記述しているにも関わらずCSSが適用されない
→CSSのミス

＜表示されない＞
<div id="test2"
style = "boder:dotted 1px #666666;
width:200px;">
マウスカーソルでなぞってください。
</div>

＜表示される＞
<div id="test2"
style = "border:dotted 1px #666666;
width:200px;">
マウスカーソルでなぞってください。
</div>

●全くJavaScriptが動作しない
→閉じ括弧忘れ
<!-- ライブラリの読み込み -->
<script language = "javascript"
charset = "Shift_JIS"
× src = "jslb_event.js"</script>

○ src = "jslb_event.js"> </script>

　ここまでは基本的にシンタックスエラー。以前から自覚はあったが、いかにVCに甘やかされてきたのかを露呈する結果に（苦笑）

●エラーが出て動作しない（prototype.js）
エラーメッセージ
「エラー: 'undefined' は NULL またはオブジェクトではありません。」
→tagIDは変数なので　""　をつけてはいけない。

function addEvent(tagID)
{
× $("tagID").attachEvent("onclick", check);
○ $(tagID).attachEvent("onclick", check);
}

●scriptaculous.jsが正しく動作しない
→scriptaculous.jsで利用されているprototype.jsはscriptaculous.jsに付属のもので、オリジナルとは別である。

●scriptaculous.jsが正しく動作しない
→独自のCSSでスタイルを指定しているものにはeffectを適用することができない？？（未確認）

●複数のオブジェクトに同時にエフェクトを発動させたいのに発動しない
→同じIDを持つオブジェクトが複数存在してはいけない
　個別にIDを設定する必要がある

●attachEventで引数つきの関数を渡したい
→無名関数を利用する

http://otd8.jbbs.livedoor.jp/javascript/bbs_tree?base=14072&range=1
http://allabout.co.jp/career/javascript/closeup/CU20050228A/index2.htm#6


▲ゲームの開発状況
　全体…15%
[問題点]
　イベントの保持方法・実現方法
　データ通信
　ルールの実現方法