第２回　クイズを作ってみよう

# 第２回　クイズを作ってみよう

画面に文字を表示させるだけなら、JavaScriptを使う必要はありませんよね。そこで、クイズのページを作ってみましょう。最近はやりの占いのページは、CGIやJavaScriptを利用して、質問に対する答えを入力してもらい。あらかじめ用意してある答えを表示しているはずです。多分・・・。このようなプログラムを記述するのに必要な要素としては、まず入力された文字や数字が所与の条件が満たしているかどうかを判定するための命令文としてのif文が挙げられます。もし○○だったら
××を実行しなさい。という命令です。この判定文は、フォートランやベーシックにもありますから、プログラムを少しでもかじったことのある人なら理解できますよね。
JavaScriptでのif文は
if(条件式){
条件が満たされた場合の処理;
}
else{
条件が満たされない場合の処理;
}
という記述でおこないます。フォートランと似てますね。{}で処理を囲むのとJavaScriptでのお約束ごとである命令文の後には必ず;をつけるところが違いますが・・・
条件式ですがこれはフォートランより覚えやすくて便利です。フォートランだと等しいかどうかを判定するなら
if（○○.eq.××)と書くのですが、JavaScriptだと==を使います。でもなぜ=を２つも使うのでしょうね・・・
さて、今度はどうすればユーザーに入力を促せるかを考えてみましょう。ベーシックの場合は、input文が用意されていますね（知らないか・・・）。フォートランだと・・・・忘れました。ベーシックでinput文を実行しても画面に？が表示されるだけで愛想がないのですが、JavaScriptだとprompt文で素敵な？テキストボックスが出現します。これには
変数名=prompt("メッセージの記述欄");
という記述をおこないます。ここで変数名には適当な名前（ifとかpromptのようなJavaScriptの命令文は変数名として使えませんし、日本語もたぶん駄目でしょう）をつけてください。
この変数名にユーザーが入力した文字列ないし数値が入ります。フォートランとちがってJavaScriptの変数は、文字変数と数値が区別されていないみたいです（なんといい加減な・・・）。その変数をif文で判定して、条件が満たされた場合と条件が満たされなかった場合のメッセージの表示プログラムを記述すればクイズはできあがりです。　メッセージを表示させるならすでに学んだdocument.write文を使えますが、芸がないのでテキストボックスの中でメッセージを表示させてみましょう。これには
alert("メッセージの記述欄");
という記述をおこないます。音まで出ますから・・・
これらの命令をくみあわせて簡単なクイズを作成したみたものが以下のスクリプトです。以下スクリプトを組み込んだページを見たいときはココを押してみてください。
</SCRIPT>
SCRIPT language="JavaScript">
<!--
answer=prompt("1＋１はいくらですか？");
if(answer=="2"){
alert("正解");
}
else{
alert("不正解");
}
//-->
これでも簡単なクイズのページなら作れますよね。でもこれだとクイズにもう一度tryするには、webページを再読込する必要があります。そこでボタンを押すとクイズが出題されるように改良してみましょう。ボタンを表示するには、すこしやっかいですが、HTML言語とJavaScriptを組み合わせて使います。というかボタンの表示にはHTML言語を使い、ボタンが押された場合のイベントとしてJavaScriptを利用します。ボタンを表示するには、
<FORM><INPUT type="button"
name="ボタン" value="押してね"></FORM>
と書くみたいです・・・。
ホームページビルダーを使っているなら、挿入、入力ボタン、プッシュボタンで簡単にボタンがつくれます。
ボタンを作っただけならば押しても何も起こりません。そこで、ボタンを押した場合にJavaScriptで記述した関数を実行させるようにします。それには上記のHTMLソースにon
click="関数名"という命令文を追加します。つまり
<FORM><INPUT type="button"
name="ボタン" value="押してね"
on click="quiz()">
</FORM>
というように記述します。このquiz()の関数をJavaScriptで作成します。JavaScriptで関数を作るには
function 関数名{
関数として実行したい処理;
}
というように{}に囲まれた部分に関数として定義したい処理を記述します。それではこの関数とさきほど作成したクイズのスクリプトを組み合わせてみると
<SCRIPT language="JavaScript">
<!--
function quiz(){
answer=prompt("1＋１はいくらですか？");
if(answer=="2"){
alert("正解");
}
else{
alert("不正解");
}
}
//-->
</SCRIPT>
<FORM><INPUT type="button"
name="ボタン" value="押してね"
onClick="quiz()"></FORM>
という記述をHTMLソースに挿入すればよいわけです。では実際に試してみましょう。下の”押してね”ボタンを押してね。