メッセージを一文字ずつ表示させよう
表示の例
 あなたのお好きなメッセージが、一文字ずつ表示されます。
プログラムＡのソースをコピーして、メッセージを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムＡのソース
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="360" height="15">
<tr>
<td>
<SCRIPT LANGUAGE="JavaScript">
<!--
if(document.all){
document.write("<span id='M1' style='width:360;height:15;font-size:15px;color:#666666'></span>");
}else if(document.layers){
document.write("<ilayer name='Lay1' width='360' height='15'>");
document.write("<layer name='Lay2'></layer></ilayer>");
}
//-->
</SCRIPT>
</td>
</tr>
</table>
</div>
まずは表示するメッセージの長さや文字の大きさを決めてください。それよって、表示部分の調整をしなければなりません。この例のメッセージの場合、横幅を３６０ピクセル、縦幅１５ピクセルにしています。このメッセージは表の中に表示されますので、上から２行目の width="360" で表の横幅を設定し、height="15" で表の縦幅を設定しています。
次にInternet Explorer用の設定をします。上から８行目のところで表示部分と文字の大きさ・色を設定しています。表示部分は、先ほどの表と同じサイズを width:360;height:15; のところに設定します。文字の大きさと色は font-size:15px;color:#666666 のところで、大きさなら 15 を、色なら #666666 をあなたのお好みに設定します。
さらにNetscape用の設定をします。上から１０行目のところで表示部分の設定をしています。この場合も表やInternet Explorer用の設定と同じサイズを、width='360' height='15' のところに設定します。
Netscape用の文字の大きさと色はプログラムＢで行ないます。
プログラムＢのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムＢのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
var mes5="ようこそ「５・６年生にもわかるやさしいＪａｖａＳｃｒｉｐｔ」へ！";
var i=0;
function msg5(){
if(i<=mes5.length){
mymsg5=mes5.substring(0,i);
if(document.all){
M1.innerText=mymsg5;
}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(mymsg5);
LAY.document.write("</font>");
LAY.document.close(); 
}
i++;
setTimeout("msg5()",150);
}else{
i=0;
setTimeout("msg5()",2000);
}
}
//-->
</SCRIPT>
上から３行目の、var mes5="ようこそ「５・６年生にもわかるやさしいＪａｖａＳｃｒｉｐｔ」へ！"; の部分のメッセージを、あなたの好きな文章にかえてください。
メッセージを一文字ずつ表示するスピードは、下から８行目の setTimeout("msg5()",150); の 150 で設定をしています。数字が大きいほどおそくなっていきますから、あなたのお好みにかえてください。
メッセージがすべて表示されると、一時停止するようになっています。停止している時間は、下から５行目の setTimeout("msg5()",2000); の 2000 で設定をしています。この例では２秒間停止させていますので 2000 となっています。５秒なら 5000 というようにしてください。
Netscape用の文字の大きさと色を設定する部分があります。プログラムＡで設定したInternet Explorer用と同じ文字の大きさと色を、上から１３行目の font-size:15px; color:#666666 のところに設定してください。
プログラムＣのソースをコピーして、HTMLソースの<body の y のすぐうしろに半角スペースをひとつ入力してから貼り付けしましょう。
プログラムＣのソース
onload="msg5()"
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
５・６年生にもわかるやさしいJavaScriptのTOPへ