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)を使うのはやりすぎ感が。せいぜい$()関数くらいですかね。