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

さて上のサンプルのように、ランダムに選んだ文字列をタイピングして成功したら次の文字を 打たすようにタイピングの基礎を完成させます。

2-1-1.HTML解説

まずはHTML部分ですが漢字出力用、ローマ字出力用、入力が成功した時に入れるテキストを それぞれ作成しています。 またスタートボタンを押す事でタイピングがスタートするようにボタンを作成し、クリックしたら startset()関数を呼び出します。

2-1-2.JavaScript解説

関数を機能別にわけてありますので簡単に見ていきます。

startset() スタートした時の初期設定などを行う
puttext()　問題を出力する
checkword()　打ったキーが正解かどうか判定する
seikai()　タイピング正解時に実行
machigai()　タイピング失敗時に実行
empty()　テキストを空にする

2-1-2-1.startset()関数

まずは初期設定などを行うstartset()関数を解説します。 この関数はタイピングを始める時に呼び出しますので、使用するデータなどを初期化する為に 使います。

function startset(){

　ichi=0;

　kanjiword="明るい,暗い,未来,過去,現在";
　ro_maword="akarui,kurai,mirai,kako,gennzai";
　kanjilist=new Array();
　ro_malist=new Array();

　kanjilist=kanjiword.split(",");
　ro_malist=ro_maword.split(",");
　puttext();
}

上のスクリプトを見てもらえればわかる通り現在何番目の文字を指しているかを表すichi変数を 0に初期化しています。配列の要素や文字列などは0番目から始まるからです。

それ以外は漢字、ローマ字を配列として作成しています。 その後テキストに文字列を入れる関数puttext()を呼び出しています。

データなどを初期化する場合は基本的にこのstartset()関数内で行うようにします。

2-1-2-2.puttext()

puttext()関数はランダムに選んだ文字列をテキストフィールドに入れる処理を入れます。

function puttext(){
　randomchi=Math.floor(Math.random()*kanjilist.length);

　kanji="";
　ro_ma="";

　kanji+=kanjilist[randomchi];
　ro_ma+=ro_malist[randomchi].toUpperCase();

　document.text.kanji.value=kanji;
　document.text.ro_ma.value=ro_ma;
}

この関数で使うものは以前の講座でやったものとほとんど同じです。 問題の文字列からランダムに文字列を取り出しそれをテキストフィールドに入れています。 この関数は出力された問題の文字列が打ち終わったあと、新しい問題を 出力する時に呼び出されます。

2-1-2-3.checkword()

function checkword(){
　if(ro_ma.charAt(ichi)==String.fromCharCode(event.keyCode)){
　　seikai();
　}else{
　　machigai();
　}
}

この関数はキーを打ったときに毎回呼び出される関数で、打ったキーが、問題の文字列の現在指している文字と合っているかどうかを判定する関数です。

最初にif文で打ったキーと、現在指している文字が等しいかどうか判定していますが、 ここで

ro_ma.charAt(ichi)

というのが『問題の文字列の現在さしている文字』を表しています。ichiというのは変数で、 現在指している文字を表しています。 ro_maというのは問題のローマ字が入っている変数で、charAt(ichi)というのはその文字列のichi 番目の文字列を取り出すJavaScriptですでに定義されている関数です。 例えばro_ma変数に『ohayou』という文字列が入っていて、ichi変数（現在指している文字）が2だったとすると、
ro_ma.charAt(ichi)というのは『a』を指す事になります。

String.fromCharCode(event.keyCode)は最後に打ったキーのキーコードを文字に変換したものです。 （前回の講座で出てきました）

if文で等しかった場合、正解となりますので、正解後の処理を行う関数seikai()を呼び出します。
等しくなかった場合は失敗後の処理を行うmachigai()関数を呼び出しています。
実際のタイピング後の処理はそれを行う関数を呼び出して実行する事に注目してください。 こうすることで同じ処理を呼び出すだけで何度も使用することができ、かつ改造なども簡単になっていきます。

2-1-2-4.seikai()

それでは実際に正解後の処理を実行するseikai()関数を見てみましょう。

function seikai(){
　document.text.input.value+=String.fromCharCode(event.keyCode);
　ichi++;
　if(ichi==ro_malist[randomchi].length){
　　empty();
　　puttext();
　}
}

まず最初に実行しているのが最後に打ったキーをテキストに追加しています。 次にichi変数（現在指している文字）に+1しています。 こうすることで次の文字を指す事ができます。

さて次のif文では何をしているのでしょうか？

これはichi変数が問題の文字列の長さと同じになった時に新しい問題を出力するようにしてます。 例えば問題の文字列のローマ字が『ohayou』だった時はro_malist[randomchi].lengthは6になります。 問題の文字列の最後の文字を指すには5を指定しますが、その前にichi変数を+1していますので、 最後の文字が正解して、このif文に来る頃にはichi変数は6になっています。

少し気になる点があります。
それはなぜro_malist[randomchi].lengthで問題のローマ字を打ち終えたかどうかを判定しているか？ ですが、これはdocument.text.ro_ma.value.lengthでもかまわないです。

これで問題を打ち終えた後、新しい文字列を出力することができます。

2-1-2-5.machigai()

次にタイピングを失敗した時に実行するmachigai()関数ですが、これは次回講座以降に 使用する為に作成した関数で、今回はここでは何もしていません。

2-1-2-6.empty()

empty()関数はテキストフィールドを空にする処理をしています。

これで今回の講座終了です。講座の解説は長いですが、説明が細かいだけです・・・。 実行する処理ごとに関数にわけてあるのでスクリプトを見るとわかるかと思います。 タイピングソフトを完成するにはまだいくつかやることがありますが、 この時点で結構感動しませんか？え？してない？・・・ いろいろ改造してよりよいスクリプトを組んでみてください。