RHG読書会

久野靖『入門JavaScript』の第1回。

本にあった例題を3通りに書き換えてみました。まずはオリジナル。

document.writeln('<table><tbody>');
for(var r=16; r<256; r+=32){
    for(var g=16; g<256; g += 32) {
	document.writeln('<tr>');
	for(var b=16; b<256; b+=32) {
	    var s = r.toString(16)+g.toString(16)+b.toString(16);
	    document.writeln('<td style="color: #'+s+'">'+s+'<\/td>');
	}
	document.writeln('<\/tr>');
    }
}
document.writeln('</tbody></table>');

次に、DOMを使った版。

t = document.createElement('table');
for(var r=16; r<256; r+=32){
    for(var g=16; g<256; g += 32) {
	tr = document.createElement('tr');
	for(var b=16;b<256;b+=32) {
	    var s = r.toString(16)+g.toString(16)+b.toString(16);
	    td = document.createElement('td');
	    td.appendChild(document.createTextNode(s));
	    td.style.color = s;
	    tr.appendChild(td);
	}
	t.appendChild(tr);
    }
}
hoge = document.getElementById('hoge');
hoge.appendChild(t);

最後、prototype.jsを使った版。テキスト埋め込みにはinnerHTMLも使ってみました。

t = document.createElement('table');
$R(0,7).each(function(r){
    $R(0,7).each(function(g){
        tr = document.createElement('tr');
	$R(0,7).each(function(b){
		var s = (r*32+16).toString(16) + (g*32+16).toString(16)+(b*32+16).toString(16);
		td = document.createElement('td');
		td.innerHTML = s;
		td.style.color = s;
		tr.appendChild(td);
	    });
	t.appendChild(tr);
	});
    });
$('hoge').appendChild(t);

んー、この程度のちょっとしたDOMではprototype.jsを使ってもあまり変わらないかも。$R(range)を使うのはやりすぎ感が。せいぜい$()関数くらいですかね。