21、カラ−


前項で背景色や文字色を指定したが「#FF8800」のようなカラーコードがわからない人も多いと思う。
これはJavaScriptと言うよりもHTMLのルールですが説明しておきます。


1、光の3原色を16進数で表記

色の3原色は「赤、青、黄色」ですが、光の3原色は「赤、緑、青」です。
パソコンでは赤・緑・青の濃さの割合でいろんな色を表現しています。
それぞれの色の「濃さ」は16進数という数字で表現されています。
時計は60秒になると繰り上がって1分に、60分になると1時間に繰り上がりますので60進数です。
16進数と言うのは16になると1桁繰り上がる数の数え方です。
表示は
0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
のように書きます。
桁上がりすると
10、11、12、13、14、15、16、17、18、19、1A、1B、1C、1D、1E、1F
のようになります。
2桁の最大値は
FF
で、これは10進数の255で、0を入れると256種類が2桁で表現できます。
各3原色の濃さを2桁の16進数を使って
#赤緑青
のように表記したものがカラーコードです。
各色256段階に指定できますので
256*256*256=168,000色の組合せの表現できるのです。

2、体験してみよう

ボタンをクリックして色を調合して、カラーコードとの関係を体験してください。




調合した色

カラーコード



3、シャドーイン

背景色を変化させられれば、暗闇から浮き出す「シャドウイン」のページもできそうですね!
背景色は前項で説明したように

document.bgColor=カラーコード置場;

で指定できます。
そして、カラーコード置場に入っているカラーコードを

から〜までの
for( )

を使って、少しづつ変化させれば実現できるはずです。

それでは次のボタンをクリックしてみてください。



暗闇から、ページが現れたことと思います。

ソースは下記の通りですので解読してください。
なお、ソースのbodyの中に
onLoad="disp()"
という記述がありますが
HTMLの読み込みが完了してから、disp()という命令を実行せよ!という意味です。

<html> <head> <title>Javascript入門21</title> <script langage="javascript"> <!-- //16進変換テーブル hx = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); //シャドウイン(128段階) function disp(){ for(i=0;i<16;i++){ for(j=1;j<16;j=j+2){ col="#"+hx[i]+hx[j]+hx[i]+hx[j]+hx[i]+hx[j]; document.bgColor=col; } } //--> </script> </head> <body onLoad="disp()"> </body> </html>