2-3 一文字ずつメッセージを表示する

キーボードから入力するような演出で、メッセージを左から１文字ずつ表示するよう設定してください。

ファイル名は js2-3.html としてください。

実行例

サンプル

：省略

1: <SCRIPT language="JavaScript">
2: 
11: </SCRIPT>

   ：省略

15: <form name="myForm">
16: <input type="text" size="60" name="myTextbox">
17: </form>

18: <SCRIPT language="JavaScript">
19 : 
22: </SCRIPT>

解説

おおまかな流れ

文字をキーボードから入力しているように表示させるには、以下の様な手順で処理を行います。

画面に表示したい文字列を用意する。
左から１文字めを取り出して表示。
左から２文字めまでを取り出して表示。
左から３文字めまでを〃
全部表示したら、また1文字目を表示にもどる。

文字列の長さを数えるには

変数に入っている文字列が何文字ぶんなのかを調べるには、length を使用します。
変数名.length のように、変数の名前の後ろに .length と追記すると、変数に入っている文字数が得られます。取得することができます。
(例)
char = "こんにちは";
nagasa = char.length;
を実行すると、nagasa には 5 が代入されます。

文字列の先頭からX文字目までを取り出すには

文字列の中から一部の文字を取り出すときは、 substring( ) を使います。
変数名.substring(開始位置、終了位置) のように書くと、変数に入っている文字列のなかから開始位置～終了位置の範囲の文字を取り出すことができます。
開始位置は、取り出したい文字の最初の位置を、先頭をゼロから数えた文字数で指定します。
終了位置は、取り出したい文字の最後の位置を、先頭をゼロから数えた文字数＋１で指定します。
(例)
『私は作者です。』という文字列の『作者』の部分を取り出すには、
char = "私は作者です。" ;
bubun = char.substring( 2 , 4 );
とすることで、変数 bubun に『作者』という文字が取り出せます。

プログラム本体の解説

3行目：
myMsg = "ようこそいらっしゃいませ。ゆっくりしていってください！";
画面に表示したいメッセージを、myMsg 変数に格納しています。

4行目:
myCnt = 0;
先頭から何文字目までを画面に表示するかを記憶しておくための変数 myCnt です。
関数 printMoji() を実行するたびに1ずつ増やします。

6行目：
function printMoji(){
新しい関数 printMoji() を定義しています。
この関数を定期的に実行することで、テキストボックスに文字列が表示されます。
なので、上のサンプルには、setInterval( ); を使って関数を定期的に実行する処理が追加で必要です。

7行目：
document.myForm.myTextbox.value = myMsg.substring( 0 , myCnt )+"_";
テキストボックス（myForm.myTextbox）の中に、myMsgの文字列の一部分を表示します。
文字列の0文字目（先頭）から myCnt文字目までを表示しています。
myCnt は次の8行目の処理で、1文字ずつ増えていくので、
この処理を何度も実行すると、文字が先頭から順に入力されているかのような表現になります。

8行目：
if( myCnt < myMsg.length ){ myCnt = myCnt+1; } else { myCnt = 0; }
myCnt を 1ずつ増やす処理です。 ( myCnt = myCnt+1 )
ただし、myCnt が myMsgに入っている文字の長さ（myMsg.length）以上になると、myCntを0にリセットします。 ( myCnt = 0 )

参考

myMsg にセットするメッセージは自由に変更できます。
メッセージの長さが変わっても、 myMsg.length が正しく文字数を計算するので問題ありません。

ただし、長いメッセージを書きたい場合は、テキストボックスの長さをメッセージに合わせて長くしたほうが良いでしょう。
テキストボックスの長さを指定する size 属性：
<input type="text" size="60" name="myTextbox">

テキストボックスの長さが短いと、長いメッセージを画面に表示しきれないかもしれません。