JavaScript：色見本の作成
◆ 表（<table>）を用いて色見本を作成する。
◆ 色の指定方法は #abcdef であり、# に続けて６文字の16進数で記述する。
◆ 16進数とは 0123456789abcdef の16個の記号で表す数値である。0123456789 は日常使っている10進数と同じであり、16進数の a, b, c, d, e, f はそれぞれ10進数の 10,11,12,13,14,15 になる。10進数での 16 は、16進数では f の次であるので桁上げされて 10 となる。16進数での ab は、10進数では 10×16＋11＝171 となり、２桁16進数の最大値 ff は 15×16＋15＝255 となる。
◆ 色指定 #abcdef での abcdef は、２文字ずつ分けられており、最初の２文字が赤色（Red）、次の２文字が緑色（Green）、最後の２文字が青色（Blue）の明るさを示す。光の三原色赤緑青（RGB）の明るさをそれぞれ変えて色を表している。それぞれの色の明るさは、２桁の16進数で表されるので、00 から ff まで、すなわち 0 から 255 までの 256段階に変えられる。したがって、256×256×256＝16,777,216色が使用できる。ちなみに #abcdef は、赤をab=10×16＋11=171、緑を cd=12×16＋13=205、青を ef=14×16＋15=239 の明るさにした色である。
◆ 色見本を作成するとき、16,777,216色すべてを表示することは難しいので、間引いて表示することにする。ここでは、３色ともに 00, 33, 66, 99 ,cc, ff の６段階に変えた場合の 6×6×6=216色の色見本を作成する。
◆ 色見本の表示方法は、表を用いて次のように、１行に青色だけを変えた６色を表示し、上段に色指定番号、その下に指定された色を表示する。
| #000000 | #000033 | #000066 | #000099 | #0000cc | #0000ff |
| | | |
| | |
| #003300 | #003333 | #003366 | #003399 | #0033cc | #0033ff |
| | | |
| | |
◆ 上の表を表示するHTMLは、次のようになる。
<TABLE BORDER>
<TR>
<TD>#000000</TD><TD>#000033</TD><TD>#000066</TD>
<TD>#000099</TD><TD>#0000cc</TD><TD>#0000ff</TD>
</TR>
<TR>
<TD BGCOLOR=#000000> </TD><TD BGCOLOR=#000033> </TD>
<TD BGCOLOR=#000066> </TD><TD BGCOLOR=#000099> </TD>
<TD BGCOLOR=#0000cc> </TD><TD BGCOLOR=#0000ff> </TD>
</TR>
<TR>
<TD>#003300</TD><TD>#003333</TD><TD>#003366</TD>
<TD>#003399</TD><TD>#0033cc</TD><TD>#0033ff</TD>
</TR>
<TR>
<TD BGCOLOR=#003300> </TD><TD BGCOLOR=#003333> </TD>
<TD BGCOLOR=#003366> </TD><TD BGCOLOR=#003399> </TD>
<TD BGCOLOR=#0033cc> </TD><TD BGCOLOR=#0033ff> </TD>
</TR>
</TABLE>
|
◆ 12色を表示するだけでこのようになり、216色すべてを表示するためには、この18倍の記述が必要になる。JavaScriptを用いれば、非常に簡潔に記述することができるので、以下に考え方を順に説明する。
◆ HTML命令を詳細に見れば
<TR>
<TD>#000000</TD><TD>#000033</TD><TD>#000066</TD>
<TD>#000099</TD><TD>#0000cc</TD><TD>#0000ff</TD>
</TR>
<TR>
<TD BGCOLOR=#000000> </TD><TD BGCOLOR=#000033> </TD>
<TD BGCOLOR=#000066> </TD><TD BGCOLOR=#000099> </TD>
<TD BGCOLOR=#0000cc> </TD><TD BGCOLOR=#0000ff> </TD>
</TR>
|
を１セットにした命令を、色番号を変えて繰り返せばよいことがわかるであろう。このセットは赤緑共に00とした場合のものであるが、これらをそれぞれ６段階に変化させた36回の繰り返しとなる。
◆ とりあえず、このHTML命令群をJavaScriptのdocument.write命令で記述すれば、次のようになる。
<script language="JavaScript">
document.write("<TR>");
document.write("<TD>#000000</TD><TD>#000033</TD><TD>#000066</TD>");
document.write("<TD>#000099</TD><TD>#0000cc</TD><TD>#0000ff</TD>");
document.write("</TR>");
document.write("<TR>");
document.write("<TD BGCOLOR=#000000> </TD><TD BGCOLOR=#000033> </TD>");
document.write("<TD BGCOLOR=#000066> </TD><TD BGCOLOR=#000099> </TD>");
document.write("<TD BGCOLOR=#0000cc> </TD><TD BGCOLOR=#0000ff> </TD>");
document.write("</TR>");
</script>
|
◆ 色番号として、00,33,66,99,cc,ff が頻繁に使用されるので、配列ｃを用意し、その第１要素から順にこれらの色番号を文字列として保存する。このためのJavaScript命令は
var c=new Array("00","33","66","99","cc","ff");
となる。このとき、配列ｃの各要素は次のようになる。
| c[0] c[1] c[2] c[3] c[4] c[5] |
| "00" | "33" |
"66" | "99" |
"cc" | "ff" |
|
表の上の記号は各要素の名前である。第１要素の名前がc[0]であることに注意。
◆ 配列ｃを用いたとき、上の命令は次のようになる。
<script language="JavaScript">
var c=new Array("00","33","66","99","cc","ff");
document.write("<TR>");
document.write("<TD>#"+c[0]+c[0]+c[0]+"</TD>");
document.write("<TD>#"+c[0]+c[0]+c[1]+"</TD>");
document.write("<TD>#"+c[0]+c[0]+c[2]+"</TD>");
document.write("<TD>#"+c[0]+c[0]+c[3]+"</TD>");
document.write("<TD>#"+c[0]+c[0]+c[4]+"</TD>");
document.write("<TD>#"+c[0]+c[0]+c[5]+"</TD>");
document.write("</TR>");
document.write("<TR>");
document.write("<TD BGCOLOR=#"+c[0]+c[0]+c[0]+"> </TD>");
document.write("<TD BGCOLOR=#"+c[0]+c[0]+c[1]+"> </TD>");
document.write("<TD BGCOLOR=#"+c[0]+c[0]+c[2]+"> </TD>");
document.write("<TD BGCOLOR=#"+c[0]+c[0]+c[3]+"> </TD>");
document.write("<TD BGCOLOR=#"+c[0]+c[0]+c[4]+"> </TD>");
document.write("<TD BGCOLOR=#"+c[0]+c[0]+c[5]+"> </TD>");
document.write("</TR>");
</script>
|
◆ 配列の要素番号を示す [ ] 内の数値の代わりに変数を使用することができる。
変数としてｂを使用することにする。ｂに数値 0 が代入されているとき、c[0]とc[b]は同じものとなる。
◆ 変数に自動的に変化する数値を代入させる命令としてfor文がある。
としたとき、変数ｂは0から5まで変化し、それぞれの数値のときに「命令群」
を繰り返すことになる。したがって、この命令は右のように、変数ｂに数値を
代入し、「命令群」を実施することと同じになる。
b=0;b<=5;b++ の意味は、変数ｂを最初に 0 にし(b=0)、5 になるまで(b<=5)、
１増しずつ(b++)に変化させよということである。b=0;b<=5;b++ は b=0;b<6;b++
と記してもよい。
「命令群」が１行であるときは、命令群前後の { と } が省略可能である。
◆ for文を用いたとき、先のJavaScript命令は次のようになる。
|
b=0;
命令群
b=1;
命令群
b=2;
命令群
b=3;
命令群
b=4;
命令群
b=5;
命令群
|
|
<script language="JavaScript">
var c=new Array("00","33","66","99","cc","ff");
document.write("<TR>");
for(b=0;b<=5;b++)
document.write("<TD>#"+c[0]+c[0]+c[b]+"</TD>");
document.write("</TR>");
document.write("<TR>");
for(b=0;b<=5;b++)
document.write("<TD BGCOLOR=#"+c[0]+c[0]+c[b]+"> </TD>");
document.write("</TR>");
</script>
|
◆ これまでの説明は、緑色を00とした場合のみであったが、これを６段階に変えるために変数ｇを用い、for文で記述すれば次のようになる。
<script language="JavaScript">
var c=new Array("00","33","66","99","cc","ff");
for(g=0;g<=5;g++){
document.write("<TR>");
for(b=0;b<=5;b++)
document.write("<TD>#"+c[0]+c[g]+c[b]+"</TD>");
document.write("</TR>");
document.write("<TR>");
for(b=0;b<=5;b++)
document.write("<TD BGCOLOR=#"+c[0]+c[g]+c[b]+"> </TD>");
document.write("</TR>");
}
</script>
|
すなわち、c[0]の部分をc[g]に書き換え、c[0]のときの命令群を for(g=0;g<=5;g++){ と } で囲めばよいことになる。
◆ 最後に赤色を変化させるために変数ｒを用い、for文で記せば次のようになる。
<script language="JavaScript">
var c=new Array("00","33","66","99","cc","ff");
for(r=0;r<=5;r++){
for(g=0;g<=5;g++){
document.write("<TR>");
for(b=0;b<=5;b++)
document.write("<TD>#"+c[0]+c[g]+c[b]+"</TD>");
document.write("</TR>");
document.write("<TR>");
for(b=0;b<=5;b++)
document.write("<TD BGCOLOR=#"+c[0]+c[g]+c[b]+"> </TD>");
document.write("</TR>");
}
}
</script>
|
for文の命令群を記すとき、先頭にスペースを入れているが、この例のようにfor文が長くなったときその範囲を明らかにするために必要であるので、習慣化してもらいたい。
◆ 全文を記せば、次のようになる。
<html>
<head><title>color</title></head>
<body>
<table border>
<script language="JavaScript">
var c=new Array("00","33","66","99","cc","ff");
for (r=0;r<=5;r++){
for (g=0;g<=5;g++){
document.write("<TR>");
for (b=0;b<=5;b++)
document.write("<TD>#"+c[r]+c[g]+c[b]+"</TD>");
document.write("</TR><TR>");
for (b=0;b<6;b++)
document.write("<TD BGCOLOR=#"+c[r]+c[g]+c[b]+"> </TD>");
document.write("</TR>");
}
}
</script>
</table>
</body>
</html>
|
◆
document.write("</TR>");
document.write("<TR>");
|
が
document.write("</TR><TR>");
と同じであることは明らかであろう。
|