Ｊａｖａ Ｓｃｒｉｐｔの解説
５．ホームページを飾る小道具
１．バックの色が変わる
背景の色が少しづつ変わります。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例１＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
var r1,r2,g1,g2,g,b1,b2,c,c1,c2,i,j,k;
r2="0",r1="f";
g2="f",g1="0";
b2="0",b1="0";
c1="fedcba9876543210";
c2="fedcba9876543210";
ｆｕｎｃｔｉｏｎ ｃｏｌｏｅ（）｛
r=r2+r1;
g=g2+g1;
for (i=0;i<16;i=i+2){
b2=c2.substring(i,i+1);
for (j=0;j<16;j=j+2){
b1=c1.substring(j,j+1);
b=b2+b1;
c=r+g+b;
ｗｉｎｄｏｗ．ｓｔａｔｕｓ＝ｃ；
ｄｏｃｕｍｅｎｔ．ｂｇＣｏｌｏｒ＝ｃ；
for (k=0;k<500;k=k+1){}
}
}
}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ onload="color();" BGCOLOR="#0ff0ff"＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例１表示 ここをクリックして下さい。例が表示されます。
＜解説＞
1.色は赤（ｒ），緑（ｇ），青（ｂ）の三色により決まります。それぞれの色は１６進法の２桁の数字で表されます。
例えばｒ＝１ａ，ｇ＝ｆ０，ｂ＝９ｄ。そして全体ではｃ＝１ａｆ０９ｄとなります。このプログラム例は，青の部分だけを変化させています。
赤でも緑でもどこでもいいですので自分で色々変えて下さい。
ｒ２は赤の二桁目，ｒ１は赤の一桁目です。以下ｇ２，ｇ１，ｂ２，ｂ１も同じです。
この例ではｒ＝０ｆ，ｇ＝ｆ０，ｂ＝００となってます。ｃ＝０ｆｆ０００。
ｃ１，ｃ２は１６進法の数字を取り出すためのものです。大きな数字から小さい数字へと順番に並べた文字列です。
ｃ１＝”０１２３４５６７８９ａｂｃｄｅｆ”;この順に並べれば小さな数字から大きな数字に変化する事になります。
2.ｆｏｒ文 （ループ命令）
for (i=0;i<16;i=i+1) ｛ ｝
ｉ＝０は，ｉの初期値が０；ｉ＜１６は，この条件式を満たす間｛ ｝を実行する事になります。
最後のｉ＝ｉ＋１は，１回実行するとｉの数字に１増加させることです。ですからｉは０，１，２，３，と｛ ｝を実行する度の増えます。
例のようにｉ＝ｉ＋２は，２づつ増える事を意味します。０，２，４，６，．．となります。
for (i=0;i<16;i=i+1) ｛for (j=0;j<16;j=j+1)｛Ａ｝Ｂ｝
このように２重ループもできます。ｉ＝０の時，ｊは０から１５まで変化します。次にｉ＝１となりまたｊが０から１５まで変化します。
最後ｉ＝１５でｊが０から１５まで変化して，終了となります。ですから｛Ａ｝は１６×１６回｛Ｂ｝は１６回実行されます。
3.ｆｕｎｃｔｉｏｎ ｃｏｌｏｅ（）｛
r=r2+r1;g=g2+g1; 赤と青の色を代入します。
for (i=0;i<16;i=i+2){b2=c2.substring(i,i+1);
ｃ２．ｓｕｂｓｔｒｉｎｇ（ｉ，ｉ＋１） ｃ２の文字列から１文字づつ取り出す。ｆｏｒ文が（ｉ＝０；ｉ＜１６；ｉ＝ｉ＋１）であれば
ｆ，ｅ，ｄ，ｃ，ｂ，ａ，９，８，７，６，５，４，３，２，１，０と順に取り出すことになります。ここではｉ＝ｉ＋２ですので
ｆ，ｄ，ｂ，９，７，５，３，１となります。なぜこうしたかというとｉ＝ｉ＋１では色の変化が遅いためです。ただこれは，パソコンの性能により違いますので
どういう条件がよいか異なります。
for (k=0;k<500;k=k+1){} これは，ＮＳでのチラツキ防止のためです。これを入れるといくらかチラツキません
青の下一桁（ｂ１）が先に変化します。ｂ１とｂ２を入れ替えると変な色の変化します。それが面白いという人もいるかもしれません。
b=b2+b1;c=r+g+b; 青の色を決めて，最後にｃに色の数字を代入します。
ｄｏｃｕｍｅｎｔ．ｂｇＣｏｌｏｒ＝ｃ；背景をｃの数字の色に変えます。
色の初期値は何でもいいです。ｒ＝０ｆ，ｇ＝ｆ０になってますが，色々変えてみて下さい。ｒ１，ｒ２，ｇ１，ｇ２の数値を変えるだけでも
色々な色になります。
色の変化は，赤でも緑でもかまいません。ｂのかわりにｒとかｇにすればいいです。不思議なことをするのであれば，
ｂ２とｒ２だけ変化させることも面白いかもしれません。私は確認してませんので，どの様になるかわかりません。
また，どの様な色からどの様な色に変化させたいか見たい時は
Ａｐｐｌｅｔの部屋に色を見るプログラムがありますので見て下さい。
２．マウスが通過すればメーセージ表示
絵の上にマウスがくれば，メッセージを表示します。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例２＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｖａｒ ｓ；
ｆｕｎｃｔｉｏｎ ｍｓｇ（ｓ）｛
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．Ｍｏｕｓｅ．ｖａｌｕｅ＝ｓ；
ｗｉｎｄｏｗ．ｓｔａｔｕｓ＝ｓ；
}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜FORM NAME="MyForm"＞
＜TEXTAREA NAME="Mouse" ROWS="3" COLS="30"＞
＜/TEXTAREA＞＜/FROM＞＜ＢＲ＞
＜A HREF="JavaScript:" onMouseOver="msg('ＪａｖａＳｃｒｉｐｔの解説'); return true;"＞
＜IMG SRC="../image/script1.gif"＞＜/A＞
＜A HREF="JavaScript:" onMouseOver="msg('Ｊａｖａ Ａｐｐｌｅｔの解説'); return true;"＞
＜IMG SRC="../image/applet1.gif"＞＜/A＞
＜A HREF="JavaScript:" onMouseOver="msg('ＶＲＭＬのテスト'); return true;"＞
＜IMG SRC="../image/vrml1.gif"＞＜/A＞＜ＢＲ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例２表示 ここをクリックして下さい。例が表示されます。
1.ｆｕｎｃｔｉｏｎ ｍｓｇ（ｓ）
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．Ｍｏｕｓｅ．ｖａｌｕｅ＝ｓ； ｍｓｇ（ｓ）関数ｍｓｇの（）の中のｓという情報を受けとって
テキストエリアにｓを表示する。
2.＜A HREF="JavaScript:" onMouseOver="msg('ＪａｖａＳｃｒｉｐｔの解説'); return true;"＞．．．
onMouseOver マウスが通過すればｍｓｇ関数を実行する。その際，「ＪａｖａＳｃｒｉｐｔの解説」という情報を渡します。
関数は渡された情報をテキストエリアに表示します。
３．時間，曜日などで表示を変える
＜パターン１＞
１時間とか１日は待てませんので，６０秒の３分割して，ページを開いた時間によってメッセージを変えて表示するプログラムです。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例３＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
var s;
ｆｕｎｃｔｉｏｎ ｍｓｇ（）｛
today=new Date();
s=today.getSeconds();
if (s<=19){ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜H3＞０−１９秒です。＜/H3＞");}
if (20<=s && s<=39) {ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜H3＞２０−３９秒です。＜/H3＞");}
if (40<=s && s<=59) {ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜H3＞４０−５９秒です。＜/H3＞");}
window.status=s;
}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｍｓｇ（）；
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例３表示 ここをクリックして下さい。例が表示されます。
1.ｆｕｎｃｔｉｏｎ ｍｓｇ（）
today=new Date();s=today.getSeconds();これは「３．時間表示」で解説済みです。ｓには秒が代入されます。
if (s<=19){ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜H3＞０−１９秒です。＜/H3＞");}
if (20<=s && s<=39) {ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜H3＞２０−３９秒です。＜/H3＞");}
if (40<=s && s<=59) {ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜H3＞４０−５９秒です。＜/H3＞");}
ｓの数字により表示させる文が変わります。ｓが１９以下，２０から３９以下，４０から５９以下の３パターンです
該当するところｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ文を実行してメッセージを表示します。
h=today.getHours(); 実際に使う時は，時間を使った方がいいでしょう。１時間毎とか午前，午後で表示を変える。
ｈには０から２３という数字が入ります。１時間毎であれば，ｉｆ（ｈ＝＝１）｛ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ＊＊＊｝
午前，午後であれば，ｉｆ（ｈ＜＝１１）｛ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ＊＊＊｝，ｉｆ（ｈ＞＝１２）＊＊
というような感じで作ればいいです。
この例ではページが読み込まれた時間だけしか表示しません。違う応用として，テキストエリアに，
何秒か毎に表示を変える事もできます。
例４表示 ここをクリックして下さい。例が表示されます。
＜パターン２＞
曜日により，表示するページが変わります。
日曜日，火曜日，木曜日，土曜日は，このページ「例１表示」と同じ所が開きます。
月曜日，水曜日，金曜日は，このページ「例２表示」と同じ所が開きます。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例５＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｖａｒ ｔｏｄａｙ，ｄａｙ，ｔ；
ｆｕｎｃｔｉｏｎ ｐａｇｅ（）｛
today=new Date();
day=today.getDay();
t=day%2;
if (t==0){location="script86.html";}
if (t==1){location="script87.html";}
｝
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜A HREF＝"JavaScript:page()"＞例５表示＜/A＞ここをクリックして下さい。例が表示されます。＜ＢＲ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例５表示 ここをクリックして下さい。例が表示されます。
この例題は，このページそのものにあります。
１．ｆｕｎｃｔｉｏｎ ｐａｇｅ（）
today=new Date();day=today.getDay(); これは「３．時間表示」で解説済みです。ｄａｙには０から６の数字が入ります。
日曜日が０、土曜日が６で１づつ増加します。例ではt=day%2;とｄａｙを２で割った余りをｔに代入してます。
ですから，１日おきにｔ＝０の時は「例１表示」ｔ＝１の時「例２表示」と交互に変わります。
if (t==0){location="script86.html";} ｔが０の時，ｓｃｒｉｐｔ８６．ｈｔｍｌのページを開くという意味です。
if (day==0){location="script0.html";}
−−−−−−−−−−−−−−−−−−−
（ｄａｙ＝＝１），２，３，４，５と増やし，ｌｏｃａｔｉｏｎ＝対応するページ
−−−−−−−−−−−−−−−−−−−
if (day==6){location="script6.html";}
上記のように，曜日毎に開くページを変える方が面白いでしょう。書くのが面倒なので例のように２つのページにしただけです
2.＜A HREF＝"JavaScript:page()"＞例４表示＜/A＞
"JavaScript:page()" クリックされるとＪａｖａＳｃｒｉｐｔで書かれた，ｐａｇｅ（）という関数を呼び出す
娯楽室の各部屋
