Ajaxの学習経過報告 4

▲経過報告
・Ajaxを勉強しよう
　　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html
を引き続き学習中。

　第一章から第三章の「3.ゲームのマップを表示する」までを学習。
そこから幾つか飛ばして、第五章へ。
　第五章の初めから、「5.HTMLへのアクセス方法 - その他のタグ -」までを学習。
スタイルシートに関する6〜8を飛ばして、「9.各種イベントについて」から再開。
　イベント処理とドラッグ処理を学習。

　次は「■特殊効果（エフェクト）」について学習予定。
その後は「prototype.js」にも興味あり。
　作りたいモノは決まったので、それに必要な知識を中心に学習を進める予定。


▲学んだこと
■関数について
●createElement("タグ名")
　タグオブジェクトを生成。
document.createElement("タグ名")

●setAttribute("属性", "値")
　HTMLの属性を設定するメソッド。
オブジェクト名.setAttribute("属性", "値")

●appendChild("オブジェクト名")
　IDで指定したタグにオブジェクトを挿入する
document.getElementById("ID").appendChild("オブジェクト名")


function outHTML()
{
imageObj = document.createElement("img");
imageObj.setAttribute("src","dog.jpg");
document.getElementById("subContent").appendChild(imageObj);
}


●hasChildNodes()
　子ノードがあるかどうか。
　返り値が true なら子ノードが存在する。
false なら子ノードは存在しない。
if(オブジェクト名.hasChildNodes() == false)
　http://allabout.co.jp/internet/javascript/closeup/CU20040830A/

●cloneNode(フラグ)
　対象となるノードのコピーを返す。
　フラグが true ならノード以下のツリー全てをコピー
false なら該当ノードのみをコピー（文字も含まない）
clone = document.getElementById(id).cloneNode(true)
　http://allabout.co.jp/internet/javascript/closeup/CU20040915A/

●replaceChild(置き換える新しいノード, 置き換えられる古いノード)
　ノードを置き換える。
　第二引数のノードrefChildを、第一引数のノードnewChildで置き換える。
this.replaceChild( newChild , this.firstChild )
　http://allabout.co.jp/internet/javascript/closeup/CU20040717A/


■ノードの構造確認方法
ノードが、どのようになっているかを確認したいのであればFirefoxのDOM Inspectorを利用すると良いでしょう。ツールメニューからDOM Inspectorを選択すればウィンドウが表示され、ページ内のノードの状況がわかります。

■イベントの名称について
＜Firefox, Safari, Operaなど　イベント名に on が付かない＞
addEventListener(イベント名, 実行する関数名, イベント伝達方向)
removeEventListener(イベント名, 実行する関数名, イベント伝達方向)

document.getElementById(tagID).addEventListener("click",funcName,false);


＜Internet Explorer用　イベント名に on が付く＞
attachEvent(イベント名, 実行する関数名)
detachEvent(イベント名, 実行する関数名)

document.getElementById(tagID).attachEvent("onclick",check);


■オブジェクトのドラッグの実現
　1. オブジェクト上でのマウスダウンを検知→ドラッグスタート
　　 オブジェクト上でのマウスアップを検知→ドラッグエンド
　　 オブジェクト上でのマウスムーブを検知→ドラッグフラグオンならドラッグ動作

　2. ドラッグスタート
　　ドラッグフラグをオン
　　処理対象オブジェクトの取得
　　マウス位置とオブジェクト位置からオフセットを計算

　3. ドラッグエンド
　　ドラッグフラグをオフ

　4. ドラッグ動作
　　ドラッグフラグがオフなら何もせず終了
　　ドラッグフラグがオンならオブジェクトの座標をマウス位置に応じて変更