|
|
|
|
|
１文字ずつ表示するメッセージ |
| キーボードから入力するような感覚で、メッセージを左から１文字ずつ表示していきます。 |
| 難易度：★★★☆☆☆☆☆☆☆ |
| 【実行例】 |
【リスト】
<SCRIPT language="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 language="JavaScript"><!--
setInterval("myFunc()",200);
// --></script>
|
| 【説明】 文字をタイプしているように表示させるには、次のような方法が考えられます。 ・表示する文字列を用意する。 ・まずは空白。 ・左から１文字を取り出して表示。 ・次に２文字取り出して表示。 ・３文字…。 ・全部表示したら最初からの繰り返し。 イメージができたらプログラムにしてみましょう。 文字列の入った変数に何文字入っているかを調べるには、length を使用します。 変数.length のようにmyString.length とすれば、その変数 myString にセットされている文字数を取得することができます。 myMsg = "いらっしゃい"; myLength = myMsg.length; とすると、myLength には 6 がセットされます。 注意 : NS4.0 は、12がセットされます。このバージョンでは文字数ではなく、文字コード数が返ってきますが、2002/11 にてこのバージョンの対応を外しました。NS4.5以降では6がセットされます。 現在のあなたのブラウザのバージョンでは、『いらっしゃい』の文字長は、 です。 次に、ここからここまでの文字を取り出したいというときは substring( ) を使います。 変数.substring( ) のように文字を取り出す変数を指定することで任意の文字列を取り出すことができます。 どこからどこまでの文字を取り出すかの範囲を substring( ) のカッコ内にパラメータとして受け渡します。 myString.substring( 開始位置 , 終了位置+1 ) となります。 開始位置は、文字列の先頭をゼロから数えて何番目の文字から取り出すかを指定します。 終了位置は、文字列の先頭をゼロから数えて何番目の文字までを取り出すかを指定します。終了位置には指定した位置に1を足します。（要するに終了位置は先頭を１から数えた方がはやいですね。^^; ） myMsg = "こんにちは" ; 『こんにちは』の『ちは』を抜き出したければ、 myMsg.substring( 3 , 5 ) ; となります。 では、やっと本題であるスクリプトの流れを説明します。(^^; myMsg = "いらっしゃいませ こんにちは！" ; myMsg に、表示するメッセージをセットします。 myCnt = 0 ; myCnt は、いま何個目の文字までを表示しているかのカウンターです。最初に、0 をセットしておいて、１文字表示するたびに、1を加算していきます。 では、function の中を説明します。 document.myForm.myFormMes.value = myMsg.substring( 0 , myCnt ) + "_"; myCnt = ( myCnt == myMsg.length ) ? 0 : myCnt + 1; 表示は先頭から何文字抽出して表示するかなので、substring( ) の第１パラメータは いつも 0番目 （先頭）です。 第２パラメータに myCnt を使います。 substring ( ) の2つのパラメータが等しいときはnull (カラの文字列) が返ってきます。 myCnt は最初は 0 の値ですので substring(0,0) は null、 つまり、最初は空白イメージです。それから１回表示するたびに、myCnt に 1 を足して文字を取り出していきます。 myCnt = ( myCnt == myMsg.length ) ? 0 : myCnt + 1; ｉｆ 文で表現すれば、 if ( myCnt == myMsg.length ) myCnt = 0; else myCnt = myCnt + 1; と同じことです。 myCnt が、myMsg.length と等しいか？ つまり、最後の文字まで表示していれば、myCnt に 0 をセット、つまり、先頭（空白）に戻します。 myCnt が、myMsg.length と等しくなければ、つまり、最後の文字まで表示していなければ、myCnt に 1 を加算、つまり、次の文字位置にカウンタを移動させます。 この関数を フォームができたら（フォーム定義が終わった後で）、 setInterval ( "myFunc()" , 200 ) ; を実行して 0.2秒周期に過酷に呼んであげます。 参考ステップ Step.38 ブラウザのバージョンを取得してみましょう 【リファレンス】 ● substring メソッド Stringオブジェクト内の範囲で指定された文字列を返します。 【書式】 文字列変数.substring ( 開始位置 , 終了位置 ) ; "文字列リテラル".substring ( 開始位置 , 終了位置 ) ; 【パラメータ】 開始位置 : ゼロから数えた開始文字位置 終了位置 : ゼロから数えた終了文字位置 + 1 開始位置もしくは終了位置が数値以外であれば、ゼロに置き換えられる。 substring(10 , 2) は substring(2 , 10) として処理する。 【戻り値】 範囲で指定された文字列 開始位置、終了位置が等しい場合は、null ● length プロパティ (String) Stringオブジェクトの文字長を返します。 【書式】 文字列変数.length ; "文字列リテラル".length ; |
