|
サンプル例
サンプルをダウンロードしてください。
1-2-1.HTMLタグ解説
HTMLタグを見ていきます。
<form name="text">
漢字：<input type="text"name="textfield1"size="20"onFocus="this.blur()">
ひらがな：<input type="text"name="textfield2"size="20"onFocus="this.blur()">
</form>
<form name="button">
ランダムに文字列を表示：<input type="button"value="ランダム発生"onClick="textlist()">
</form>
前回の講座とそれほど変更点はありません。
漢字出力用のテキストフィールドtextfield1とひらがな出力用のテキストフィールドtextfield2
を作成して、５つの文字列からランダムに選んで出力までする関数textlist()を呼び出すボタン
の作成をしています。
1-2-2.JavaScriptの解説
<script language="JavaScript">
<!--
function textlist(){
kanjiword="明るい,暗い,未来,過去,現在";
hiraganaword="あかるい,くらい,みらい,かこ,げんざい";
kanjilist=new Array();
hiraganalist=new Array();
kanjilist=kanjiword.split(",");
hiraganalist=hiraganaword.split(",");
randomtext(Math.floor(Math.random()*kanjilist.length));
}
function randomtext(rand){
document.text.textfield1.value=kanjilist[rand];
document.text.textfield2.value=hiraganalist[rand];
}
-->
</script>
それではJavaScript部分を見ていきます。
まず関数が二つ定義してあります。文字列のリストを作るtextlist()関数とランダムに選んだ文字列をテキストフィールドに
出力するrandomtext()関数です。
まずtextlist()関数から見ていきます。
function textlist(){
kanjiword="明るい,暗い,未来,過去,現在";
hiraganaword="あかるい,くらい,みらい,かこ,げんざい";
kanjilist=new Array();
hiraganalist=new Array();
kanjilist=kanjiword.split(",");
hiraganalist=hiraganaword.split(",");
randomtext(Math.floor(Math.random()*kanjilist.length));
}
最初にkanjiwordという変数に"明るい,暗い,未来,過去,現在"という文字列を代入しています。
実際に文字列をいくつも格納しているように見えますが"から"までで一つの文字列として扱っています。
これは問題数の増加によって"でいくつも繋ぐよりも楽に問題作成が可能な為です。
次のhiraganawordも同じようにしてありますが、漢字とひらがなの順序は同じにしておきます。
次にこの文字列を分割して配列に入れる為に配列の宣言
kanjilist=new Array();
hiraganalist=new Array();
をしています。配列というのは同じ型（数値型や文字型など）のデータを一つの名前でアクセスできる変数です。
配列を使用する為には宣言を必要とし、
上記のkanjilist=new Array();のように配列の宣言が必要になります。
配列のデータにアクセスするにはkanjilist[0]、kanjilist[1]のようにしてできます。
配列は0番目から始まるので注意してください。
配列の宣言が終わったらさきほどの文字列を,（カンマ）で区切ってそれぞれのデータを順番に配列に入れていく作業を行います。
それを行うのが、
kanjilist=kanjiword.split(",");
の部分です。これは
配列=文字列.split("区切り文字");
という形になっており、文字列を区切り文字で分割して配列に順番にデータを入れる作業をします。split()はJavaScriptで
すでに定義されている関数です。
この処理が終わると、配列kanjilistのそれぞれのデータは
kanjilist[0] "明るい"
kanjilist[1] "暗い"
kanjilist[2] "未来"
kanjilist[3] "過去"
kanjilist[4] "現在"
という文字列データがそれぞれに格納されています。これで漢字とひらがなの問題リストの作成が終了しました。
後はランダム値を発生させランダムに文字列を選んでテキストに表示する作業です。
randomtext(Math.floor(Math.random()*kanjilist.length));
randomtext()関数がランダム値をテキストフィールドに文字列を格納する関数で実際にはtextlist()関数内でランダム値を
発生させその値を引数としてrandomtext()関数に渡しています。
上のスクリプトを説明すると、randomtext()関数の呼び出しをしてその引数として
Math.floor(Math.random()*kanjilist.length)
を渡しています。
Math.floor()は小数点以下を切り捨てる関数です。Math.random()関数は0.････〜1未満の間のランダム値を発生させる関数です。
kanjilist.lengthは配列kanjilistの配列数を返します。
Math.random()にkanjilist.lengthをかけると0〜5未満のランダム値になります。これをMath.floor()関数で小数点以下を
切り捨てると、0.････〜4の間の整数値が得られます。これをrandomtext()関数呼び出しの引数として渡します。
次にランダム値を受け取りその文字列をテキストに出力する関数randomtext()を見ていきます。
function randomtext(rand){
document.text.textfield1.value=kanjilist[rand];
document.text.textfield2.value=hiraganalist[rand];
}
randomtext()関数は引数を受け取りその引数の値番目の漢字リストとひらがなリストを取り出しそれをテキストに出力しています。
これで第二回目が終了です。
以前に出てきたスクリプトなどは解説を省いていきますので、不明なところがでた場合は前の講座を参照して
みてください。
|
