実行例

<html>
<head>
<title>イヌでもわかるJavaScript講座</title>
</head>
<body>
<script type="text/javascript"></script>

 


T a t s u y a' s H o m e P a g e
 

イヌでもわかるJavaScript講座
 

Presented by Tatsuya
 

<script type="text/javascript"></script>
</body>
</html>

サンプルだけの HTMLはこちらへ

説明

上記サンプルページのオープニング表示後に、location.href にて別ページへリンクする仕掛けです。

オープニングの仕掛けも単純です。ただ単に背景色を、黒から白へ変更しているだけです。

● document.bgColor

背景色の変更は、document.bgColor に、色コードをセットするだけです。セットすると背景色が変更されます。

サンプルは、黒から徐々に、白になります。つまり、「徐々に」とは、暗い灰色から明るい灰色を表示していっただけのことです。
その色コードを、myColor テーブルにセットして、順番に背景色にセットしていきます。
myColor = new Array(
"000000","101010","202020","303030",
"404040","505050","606060","707070",
"808080","909090","A0A0A0","B0B0B0",
"C0C0C0","D0D0D0","E0E0E0","FFFFFF"
);
↓
document.bgColor = "#" + myColor[myCnt];

「イヌでもわかるJavaScript講座」を白、「Presented by Tatsuya」を黒で表示しています。
最初、背景色は黒なので、タイトルは見えて、名前は見えません。
そして、徐々に白になるので、最後はタイトルが消えて、名前が浮き出てきたわけです。

● setTimeout()

myFade() が、メインルーチンです。黒から白の 16色分の背景色を変更していきます。

いままで、setInterval() を使って関数を時間周期に呼んでループさせていました。
もう1つ、setTimeout() というものがあります。

setTimeout( "関数名" , 起動するミリ秒 );

パラメータも、setInterval() と同じです。
なにが違うかというと、setTimeout() は、指定した時間に関数を 1回呼ぶだけです。
setInterval() は、指定した時間周期に関数を呼び続けるでした。

この setTimeout() を myFade() の中で、
setTimeout( "myFade()", myTime );
と設定しています。パラメータには自分自身である myFade() を呼んでいます。
myFade() が、myFade() を呼ぶ。これでは結局、setInterval() と同じループになってしまいますが、

今回のサンプルの仕様は、
背景色の変更タイミングを 50ミリ秒間隔にします。しかし、最初と最後だけ 1秒間表示させます。
myTime = ( myCnt==0 || myCnt==15 ) ? 1000 : 50;

このように、myFade() 内で時間調整するために、 setTimeout() でループさせました。

16色すべて表示（変更）したら、このページへリンクさせています。
location.href = "fade.htm";

参考ステップ
Step.2 あいさつ文を表示してみましょう　※ Array()
Step.3 現在の日付と時間を表示してみましょう　※ 三項演算子
Step.5 フォームを使って日付と時間をリアルタイムに表示してみましょう　※ setInterval()
Step.7 履歴移動ボタンをつくってみましょう　※ location.href

▲TOP

おまけ

● 色コードと１６進数講座

色コードに A0A0A0 や CCFFCC やら使っています。これは、16進数です。

私たちが日常使っている数字は 10進数です。
0から始まり、9の次で繰り上がります。つまり、一桁は 0～9 の 10通りです。これが 10進数です。
なんか、子供に算数を教えてるようですが・・・ (^^;

しかし、コンピュータは 16進数です。
つまり、一桁は 16通りなのです。0からはじまり、9では繰り上がらず、9の上、つまり、9+1 は A です。(^^;
0123456789ABCDEF、 F の次で、繰り上がります。

10進数は、9+1 = 10
16進数は、F+1 = 10
なのです。

10進数の 10 は「じゅう」と読みますが、16進数の 10 は「いちゼロ」と読みます。

コンピュータは 10進数が使えないわけではありません。
現に、いままでのステップはすべて 10進数を使っています。
といっても、やっぱり内部では 16進数で処理されているのです。
極論は2進数ですが (^^;

ただ、表現の違いで、16進数の 10（いちゼロ）は 10進数の 16（じゅうろく）です。どちらも同じ値です。

画面の解像度に 256色とか 65536色とか、やけにハンパな数字がでてきますよネ
16進数の 2桁の最大値、つまり、FF は、10進数に表現すると 255 です (1バイトの最大値です)。
16進数の 4桁の最大値、つまり、FFFF は、10進数に表現すると 65535 です (2バイトの最大値です)。

16進数を 10進数の表現に変えたければ、
10進数 188 は、(1*10*10)+(8*10)+8 = 188 のように、
16進数 BC は (11*16)+12 = 188 と計算するだけです。

色コードに使う、A0A0A0 や CCFFCC やらも、16進数です。
赤、緑、青の３原色を２桁の 16進数で並べて設定します。

00 が最も暗い色、FF が最も明るい色、つまり 1色 256通りあります。
最も暗い色、00 は本当に真っ暗です。ですから、赤も緑も青も 0 でしたら（000000)、黒になります。
青色にしたければ、0000FF とすれば、もっとも明るい青ができるわけです。

今回のオープニングは 16 とばしでカウントして 16回（16色）表示したので、表示がギザギザしています。
これを 1 ずつカウントして 256回（256色）表示させれば、なめらかになるかもしれません。ひまな方はどうぞ。

【色コード一覧】　イヌでも特製カラーコード表

▲TOP

Q&A

[Q] サンプルをコピーすると文字化けしてしまうのですが
[A] ご使用のＯＳの言語設定を <META>タグで指定してください。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

EUC	euc-jp
JIS	iso-2022-jp
SHIFT-JIS	Shift_JIS
UTF-8	UTF-8

▲TOP

実行例

リスト

説明

おまけ

Q&A