【JavaScript】 DOM:お気に入りの書籍

2008.06.06 Author: たわばがに

今回はネタが見つからないので趣向を変えて、お気に入り書籍をご紹介したいと思います。


羽田野太巳著の「標準DOMスクリプティング JavaScript+DOMによるWebアプリデザインの基礎」です。

この書籍では、DOM策定の歴史から概要、そして基礎的な技法に関して、
かなり分かり易く解説されています。
ある程度JavaScriptやCSSに関して知識のある方であれば、
内容がよりいい感じに浸透してくれるのではないでしょうか。
既に「そんなの分かってるよ」という中級者以上の方でも、
基礎内容の情報整理に、うっかり忘れてしまった場合等に役立ちます。
私も以前にいくつかDOM系のエントリーを書きましたが、
その時に、この書籍を何度か見返した憶えがあります。

HTMLやCSS、JavaScriptはある程度知ってるけど、
DOMってなんだっけ?というような方は、ぜひ読んでみることをお勧めします。
DOMスクリプティングを覚えることで、更に世界が広がるはずです。

そして、勢いでこんなもの↓を作ってみたくなるかもしれませんね。(ならないかもしれませんが‥‥)
※問題生成を押すと足し算の問題が作られます。
※テキストエリアに答えを入力し、フォーカスを外した時点で正解か不正解か教えてくれます。

 
<script type="text/javascript">
<!--
var ans = null;

/**
 *  問題生成
 */
function init080606() {
	var a = parseInt(Math.random() * 100);
	var b = parseInt(Math.random() * 100);
	ans   = a + b;
	
	var o_main = document.getElementById('main080606');
	o_main.innerHTML = "";

	// 問題
	var o_que    = document.createElement('span');
	var question = document.createTextNode(a+' + '+b+' = ');
	o_que.appendChild(question);
	o_main.appendChild(o_que);
	
	// 回答
	var o_ans  = document.createElement('input');
	o_ans.size = "5";
	o_ans.type = "text";
	o_ans.id   = "ans080606";
	o_main.appendChild(o_ans);
	
	// イベント
	if (o_ans.addEventListener) {
	    // IE以外
	    o_ans.addEventListener("blur", check080606, false);
	} else {
	    // IE
	    o_ans.attachEvent('onblur', check080606);
	}
}

/**
 * 解答
 */
function check080606() {
	if (ans == document.getElementById('ans080606').value) {
		alert("正解");
	} else {
		alert("不正解");
	}
}

//-->
</script>
<input type="button" name="button080606" onClick="init080606()" value="問題生成">
<span id="main080606"></span>
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ