いくつかのメッセージを一文字ずつ表示させよう
表示の例
 あなたのお好きなメッセージが、一文字ずつ表示されます。
プログラムＡのソースをコピーして、メッセージを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムＡのソース
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="425" height="15">
<tr>
<td>
<SCRIPT LANGUAGE="JavaScript">
<!--
if(document.all){
document.write("<span id='M1' style='width:425;height:15;font-size:15px;color:#666666'></span>");
}else if(document.layers){
document.write("<ilayer name='Lay1' width='425' height='15'>");
document.write("<layer name='Lay2'></layer></ilayer>");
}
//-->
</SCRIPT>
</td>
</tr>
</table>
</div>
メッセージの長さや文字の大きさなどによって、表示部分の調整をする箇所があります。この例のメッセージの場合、横幅を４２５ピクセル、縦幅１５ピクセルにしています。このメッセージは表の中に表示されますので、上から２行目の width="425" で表の横幅を、height="15" で表の縦幅を設定します。
次にInternet Explorer用の設定をします。上から８行目のところで表示部分と文字の大きさと色を設定しています。表示部分は、先ほどの表と同じサイズを width:425;height:15; のところに設定します。文字の大きさと色は font-size:15px;color:#666666 のところで、15 や #666666 をかえてください。
さらにNetscape用の設定をします。上から１０行目のところで表示部分の設定をしています。この場合も表やInternet Explorer用の設定と同じサイズを、width='425' height='15' のところに設定します。
Netscape用の文字の大きさと色はプログラムＢで行ないます。
プログラムＢのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムＢのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
var mes6=new Array(5);
mes6[0]="+++ ようこそ「５・６年生にもわかるやさしいＪａｖａＳｃｒｉｐｔ」へ！+++";
mes6[1]="このサイトは、小学校の高学年くらいでも理解ができるように・・・";
mes6[2]="使いやすい「ＪａｖａＳｃｒｉｐｔ」をできるだけやさしく解説しています。";
mes6[3]="初めてやってみる方や、うまくいかない方にも心強いサイトですよ。";
mes6[4]="お気に入りのメニューをあなたのページで使ってみてくださいね。";
var i=0,n=0;
function msg6(){
if(i<=mes6[n].length){
mymsg6=mes6[n].substring(0,i);
if(document.all){
M1.innerText=mymsg6;
}else if(document.layers){
LAY=document.layers["Lay1"].document.layers["Lay2"];
LAY.document.open();
LAY.document.write("<font style='font-size:15px; color:#666666'>");
LAY.document.write(mymsg6);
LAY.document.write("</font>");
LAY.document.close(); 
}
i++;
setTimeout("msg6()",100);
}else{
i=0;
n++;
setTimeout("msg6()",2000);
}
if(n==mes6.length){
n=0;
}
}
//-->
</SCRIPT>
プログラムＡの上から４行目〜８行目に、一文字ずつ表示されるコメントが書いてあります。
mes6[0]="+++ ようこそ「５・６年生にもわかるやさしいＪａｖａＳｃｒｉｐｔ」へ！+++"; などの部分のコメントを、あなたの好きな文章にかえてください。
例では mes6[0] から mes6[4] まで、５つのメッセージが設定してあります。もしメッセージの数を増やすなら、mes6[5] 、mes6[6] 、というようにソースの追加をしてください。その場合には、プログラムＡのソースの var mes6=new Array(5); のところの 5 をメッセージの数にかえてください。
一文字ずつ表示するスピードは、下から１２行目の setTimeout("msg6()",100); の 100 で設定をしています。数字が大きいほどおそくなっていきますから、あなたのお好みにかえてください。
ひとつのメッセージ表示されると、一時停止するようになっています。停止している時間は、下から８行目の setTimeout("msg6()",2000); の 2000 で設定をしています。この例では２秒間停止させていますので 2000 となっています。５秒なら 5000 というようにしてください。
Netscape用の文字の大きさと色を設定する部分があります。プログラムＡで設定したInternet Explorer用と同じ文字の大きさと色を、上から１８行目の font-size:15px; color:#666666 のところに設定してください。
プログラムＣのソースをコピーして、HTMLソースの<body の y のすぐうしろに半角スペースをひとつ入力してから貼り付けしましょう。
プログラムＣのソース
onload="msg6()"
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
５・６年生にもわかるやさしいJavaScriptのTOPへ