Step.9 - 1文字ずつ表示するメッセージ


キーボードから入力するような感覚で、メッセージを左から１文字ずつ表示していきます。


Step テーマ
● substring (文字列の切り取り)
● length (文字列の長さの取得)

実行例




リスト


<script type="text/javascript"><!--
 myMsg = "いらっしゃいませ　こんにちは！";
myCnt = 0;

function myFunc(){
     document.myForm.myFormMes.value = myMsg.substring( 0 , myCnt ) + "_";
     myCnt = ( myCnt == myMsg.length ) ? 0 : myCnt+1;
}
// --></SCRIPT>
<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
 <script type="text/javascript"><!--
 setInterval("myFunc()",200);
// --></script>

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

説明


文字をタイプしているように表示させるには、次のような方法が考えられます。
・表示する文字列を用意する。
・まずは空白。
・左から１文字を取り出して表示。
・次に２文字取り出して表示。
・３文字…。
・全部表示したら最初からの繰り返し。
イメージができたらプログラムにしてみましょう。


文字列の入った変数に何文字入っているかを調べるには、length を使用します。
書式 は
result = 変数.length
です。

myMsg = "いらっしゃい";
myLength = myMsg.length;
であれば、myLength には 6 がセットされます。
※ 古臭いブラウザ NS4.0 は、12がセットされます。このバージョンでは文字数ではなく、文字コード数が返ってきます。NS4.5以降では6がセットされます。


次に、ここから ここまで の文字を取り出したいというときは substring() を使います。
どこから どこまで の文字を取り出すかの範囲を substring() のカッコ内に パラメータで指定します。
書式は
myString = 変数.substring( 開始位置 , 終了位置+1 )
となります。

開始位置は、文字列の先頭を ゼロから数えて 何番目の文字から取り出すかを指定します。
終了位置は、文字列の先頭をゼロから数えて 何番目の文字までを取り出すかを指定します。終了位置には指定した位置に 1を足します。
※ 要するに終了位置は先頭を１から数えた方がはやいですね。^^;

"こんにちは" の "ちは" を取り出したければ、
myMsg = "こんにちは" ;
myString = myMsg.substring( 3 , 5 );
となります。


では、やっと本題であるスクリプトの流れを説明します。(^^;

myMsg に、表示するメッセージをセットします。
myMsg = "いらっしゃいませ　こんにちは！" ;

myCnt は、いま何個目の文字までを表示しているかのカウンターです。最初に、0 をセットしておいて、1文字表示するたびに、1 をカウントしていきます。
myCnt = 0 ;

では、function の中を説明します。

document.myForm.myFormMes.value = myMsg.substring( 0 , myCnt ) + "_";
 表示は先頭から何文字抽出して表示するかなので、substring() の第1パラメータは いつも 0 番目(先頭から) です。
第2パラメータに myCnt を使います。

substring() の2つのパラメータが等しいときは "" (カラの文字列) が返ってきます。
myCnt は最初は 0 なので substring(0,0) は ""、 つまり、最初は空白イメージです。
それから1回表示するたびに、myCnt に 1 をカウントしていって 文字を取り出していきます。

myCnt = ( myCnt == myMsg.length ) ? 0 : myCnt + 1;
 ※ 三項演算子は Step.3 参照。
if 文で表現すれば、
if ( myCnt == myMsg.length ) myCnt = 0;
else myCnt = myCnt + 1;
 と同じことです。

myCnt が、myMsg.length と等しいか？ つまり、最後の文字まで表示していれば、myCnt に 0 をセット、つまり、先頭(空白) に戻します。
myCnt が、myMsg.length と等しくなければ、つまり、最後の文字まで表示していなければ、myCnt に 1 を加算、つまり、次の文字位置にカウンタを移動させます。


この関数を setInterval にて、0.2秒周期に過酷に呼んであげます。
setInterval ( "myFunc()" , 200 ) ;


▲TOP

リファレンス


● substring メソッド

Stringオブジェクト内の範囲で指定された文字列を返します。

【書式】
文字列変数.substring ( 開始位置 , 終了位置 )
"文字列リテラル".substring ( 開始位置 , 終了位置 )

【パラメータ】
開始位置 : ゼロから数えた開始文字位置
終了位置 : ゼロから数えた終了文字位置 + 1

開始位置もしくは終了位置が数値以外であれば、ゼロに置き換えられる。
substring(10 , 2) は substring(2 , 10) として処理する。

【戻り値】
範囲で指定された文字列
開始位置、終了位置が等しい場合は、null
▲TOP

リファレンス


● length プロパティ (String)

Stringオブジェクトの文字長を返します。

【書式】
文字列変数.length
"文字列リテラル".length
▲TOP