FC2ブログ

スポンサーサイト

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

DOMを使ってHTMLを組んでみた

昨日ざっとDOMの基礎を眺めたところ、
document.getElementById で親ノード取ってきて、
document.createElement とプロパティ追加で子ノード作って、
親ノード.appendChild で子ノード追加
でHTMLを組めることがわかった。
簡単そうなので、ボタンのonclickで<body>の一部を組み換えるスクリプトを作ってみた。

とりあえず作ってみたが、動かない。
何が悪いのかわからない。
Firebugでデバッグしようとしたが、jsファイルをスクリプトとして認識しない。
JavaScriptの構文チェック方法を調べたところ、「jsファイルをダブルクリックすればいい」とあった。
エラーメッセージが一つしか出ないことを除けば、これは便利な構文チェック方法だ。
構文修正後、Firebugがjsファイルを認識したので、ブレークポイントを設定しつつデバッグ。
直感的にわかり易いインタフェースや、行き届いた説明文のおかげで、操作方法を一切調べずにデバッグできた。
実行とデバッグを繰り返して、何とか思った通りの動作をするようになった。

今日ちょっとハマったのは、addEventListener/attachEventメソッドに渡すfunctionに引数を設定する方法。
最初 addEventListener(type, func(arg), false) としたら、func(arg)のreturn値がaddEventListenerメソッドに渡されてしまった。
ネットで調べたら、var listener = function(){func(arg);} と新たなfunctionオブジェクトを作成して、
addEventListener(type, listener , false) とすれば良いとあった。
調べるとすぐに解決方法が出てくるなんて、便利になったものだなと改めて実感した。

明日は更に機能追加しよう。

<2010-06-29 追記>
var listener = function(){func(arg);};
のような無名関数を使用する場合の注意点と、それを考慮したソースをこのページに書いた。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。