なんか記事書くこと自体が久しぶりな気がするな。まあいいやｗ
「DOM Scripting標準ガイドブック」読んでみた。
内容はjavascriptとDOMについて。DOMを中心に詳しく書いてあります。
「javascriptは一通り読み書きできるけど、DOMがよくわかんないよ！」
「ページを動的に変更する方法、なんとなく分かるけど独学だからぬるぽ！」
「HTMLとCSSはほぼ分かったよ！次はjavascriptでうねうね動かしたいお！」
といった感じの人にめっちゃオススメ。
・・・あー、javascriptを全然やったことない人も対象となってるけど、
それだとちょっと厳しいかもしれない(・ω・)。
本の後半になってくると、配列やループがガンガン使われるんだけど
その辺が直感的に理解できてないと、読むのに時間かかるかも？
※あ、配列やループの説明は一通り書いてあります。
自分の場合、javascriptの読み書きは一通りＯＫ。
既に存在している要素の変更はできるんだけど、DOMのappendChildやcreateElementを使って新しい要素を追加する方法がよく分かってナイ。
独学でそれなりに処理できるけど、「本当にこの理解でええのかなぁ(-ω-)」という感じですた。
この本では要素を新しく生成、追加する方法が具体例を交えて詳しく載ってるので非常にわかりやすかったデス。あと、処理方法が自然言語とScriptの両方で説明されてるのもポイント高かった。
- 段落要素ノードを作る
- この段落をドキュメントの要素ノードに付加する
- テキストノードを作る
- このテキストノードを段落に付加する
という感じで説明した後、「これをscriptに翻訳するとこうなります」的な流れ。
scriptを直接見た方が勉強になるのは確かなんだけど、単純に読み物として見た場合、処理手順は自然言語で説明されているほうが読みやすい。特に寝っ転がりながら読んでる場合、Script部分は後日PCと向かい合ってじっくりやることにして、処理の手順だけササッと理解したかったので非常にありがたかった(・ω・)
とにかくこれで、DOMでの操作バッチリだよ！
DOMを使って動的変化を行いたい人は読むといいよ(・∀・)！
こっから下は汎用的なスクリプトをメモ代わりに置いておきマス。
Simon Willison (http://simon.incutio.com/)さんが書いた、ページ読み込み時に実行するファンクション。
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
window.onloadにファンクションがセットされていなければ、引数をそのまま実行。
セットされている場合、既にセットされてるファンクションの後に、引数を実行するように。
･･･時々、「あれ、これどうやるんだっけ」となるんだよねｗ