サンプルをダウンロードしてください。

さて今回の講座でほとんどタイピングソフトが完成です。 前回の講座である程度できていたものに、時間制限やタイピングデータの表示などの 機能をつけ加えています。 HTML部分ではデータを入れるテキストを増やしているだけですので、解説はしません。

2-3-1.JavaScript解説

2-3-1-1.reset()

まずはタイピングがスタートした時に実行するreset()関数について解説します。
ここではテキストを初期化させているだけで、特に新しい事はありません。

2-3-1-2.startset()

次にstartset()関数内の変更点ですが、ここではタイピングデータの宣言と初期化を 行っている箇所を増やしています。 データの初期化が終了したらreset()関数を呼び出してテキストにそのデータを入れています。

startset()関数の最後の記述で

time=setInterval("count()",1000);

という部分がありますが、これは時間を計測する為のもので、JavaScriptですでに定義されている setInterval()という関数を使っています。 この関数は引数で与えられた時間を経過すると、引数で与えられた関数を実行します。 時間はいくつかセットすることができるので今回はこれにtimeという名前をつけて設定しています。

つまりこの記述は1000m秒（1秒）経過するごとに、count()という関数を呼び出し、その名前を timeという名前にしておく、ということになります。 このsetInterval()関数はclearInterval()関数と対になっておりセットしたタイマーをリセット（止める）のがclearInterval()関数になります。

2-3-1-3.typeend()

typeend()関数はタイピングが終了した時に呼び出す関数で、タイマーをリセットする為にclearInterval()関数の呼び出しと、タイピングソフトの実行が終了した事を知らせるendflagを1（終了）に設定して、結果を表示するkekka()関数の呼び出しを行っています。

2-3-1-4.kekka()

kekka()関数ではタイピング終了時に結果を表示しますが、なぜ終了時に正解数などのデータを 再度入れなおしているかというと、これはスクリプトの遅延によって、変数のデータとテキストに 入っているデータの違いをなくす為です。

ここで得点を表す変数tokutenに複雑な処理が加えられていると思います。

tokuten=sokudo*100+seikaisuu*2+parsent*5;
tokuten=String(tokuten);
tokutentmpichi=tokuten.indexOf(".",0);
tokutentmp="";
for(a=0;a<=tokutentmpichi+3;a++){
　tokutentmp=tokutentmp+tokuten.charAt(a);
}
tokuten=Number(tokutentmp);
document.text.tokuten.value=tokuten;

上の部分です。これは得点結果を小数点以下3位までに情報をおさえる為の処理です。 それでは詳しく見てみましょう。

まず最初の一行では得点結果をタイピングデータから算出して、それを得点を表す変数tokuten に入れています。 その後String(tokuten)というような記述があると思います。 これは数値データであるtokutenを文字列として扱うためにJavaScriptですでに定義されているString()関数を使用して、文字列データ に変換しています。
なぜ文字列として取り扱うかといいますと、小数点以下3位までを.（小数点）から3番目の文字 までという事が知りたい為です。
数値データであるとこれができないので、String()関数を使用して文字列データに変換しました。 次の、

tokutentmpichi=tokuten.indexOf(".",0);

は、tokutenの中で最初に.（小数点）が来る位置を変数に入れています。 indexOf()関数は
indexOf("探す文字列",何番目の文字から)という形になります。

つまりtokutenが890.353889だったとしたらさきほどのスクリプトではtokutentmpichiには3が 入る事になります。

さて、これで.（小数点）の位置がわかったので、tokutenを小数点以下3位までに切り詰める 作業を行います。それを行っているのがfor文でtokutenの最初の位置から.（小数点）がある 位置+3まで繰り返して得点結果を作成しています。

これで得点結果を小数点以下3位までにできたので、これを数値データに変換してテキストフィールドに入れています。
文字列データを数値データに変換するには、JavaScriptですでに定義されているNumber()関数を 使用して行います。

2-3-1-5.count()

さきほどsetInterval()関数がでてきましたが、この関数が呼び出しているのがcount()関数でした。 この関数は1秒毎に呼び出しているので、この関数が呼ばれる度にテキストに秒数を入れれば 時間経過を実現することができます。

それでは詳しく見てみましょう。

function count(){
　sec++;
　if(sec==60){
　　min++;
　　sec=0;
　}
　mintemp=min;
　sectemp=sec;
　if(mintemp*60+sectemp>=10){
　　typeend();
　}
　if(sectemp<10){
　　sectemp="0"+sectemp;
　}
　if(mintemp<10){
　　mintemp="0"+mintemp;
　}
　document.text.jikan.value=mintemp+":"+sectemp;
　putsokudo();
}

まず最初に行っているのが秒数を表す変数secに+1をしています。（startset()関数内でsecは0に 初期化してます）そしてこの秒数を表すsecが60になった時、つまり1分経過した時に分を表す minに+1して秒数secは0に戻しています。こうすることで分と秒とを切り分けることができます。

さて次に条件文が３つあります。最初の条件分はタイピングソフトの終了判定を行うもので、 今回は10秒立つとタイピングソフトを終了して結果へと移ります。 終了判定に合っていたらtypeend()関数を呼び出しタイピングソフトの終了となります。

次の条件文ですがこれは分や秒が10より下の時、0:5などと表示されるのをふせぐ為です。 実際に行っていることは分や秒が10より下の時に0という文字を足しているだけです。 これによって0:5と表示されていたものが00:05と表示されることになります。

最後に作成した分と秒を切りわける文字:（コロン）を足してテキストに入れ、最後に タイプ速度を計測するputsokudo()関数を呼び出して終了です。 タイプ速度は1秒毎に計測したいので、このcount()関数内で呼び出しています。

2-3-1-6.putsokudo()、putparsent()

さてputsokudo()関数はタイプ速度をテキストに入れる関数ですが、ここでもさきほどの tokutenの時のように小数点以下3位まで切り詰める作業を入れています。 putparsent()関数も同様の事を行っています。

2-3-1-7.checkword()

checkword()関数での変更点はタイピングソフトが終了しているかどうかを表す endflagが1（終了）でない時にタイピングのチェックを行い。
それ以外の時はタイピングのチェックは行わないようにしています。

2-3-1-8.seikai()、machigai()

seikai()関数とmachigai()関数ではそれぞれseikaisuu（正解数）、machigaisuu(失敗数） を+1する部分を追加し、それぞれの関数が実行される度にputparsent()関数を 呼び出す部分が追加されています。putparsent()関数は正解率を算出、出力する関数です。

今回の講座終了です。機能ごとの関数は前回の講座で作成していたので、 は処理する場所を考えていけばわかると思います。 これでほぼタイピングソフトの基礎が完成です。 あとはソフトの見栄えをよくしたり、クッキー機能を搭載して完成となります。