• 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Ajax(5) - Ajax学習中(4)

 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. ドラッグ動作
  ドラッグフラグがオフなら何もせず終了
  ドラッグフラグがオンならオブジェクトの座標をマウス位置に応じて変更
スポンサーサイト

コメント

コメントを投稿する

管理者にだけ表示を許可する

トラックバック

カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
ブログ内検索
プロフィール
2007年4月からゲーム業界の大手某社で働き始めた管理人 ねこきき が日々思うことの記録。業界に対する話や最先端技術的の話、プログラム話などをダラダラと書いています。

管理人のWebページ(就活の記録など)
足跡歓迎!ココをクリック!

ねこきき

最近の記事
月別アーカイブ
カテゴリー
最近のコメント
最近のトラックバック
Counter
ブロとも申請フォーム

この人とブロともになる

FC2ブログランキング

FC2Blog Ranking

ブログ内検索
RSSフィード
リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。