　インタラクティブなページを作るには、CGIを利用するのが一般的ですが、プロバイダによっては自作のCGIの使用を認めていないケースがかなりあります。Javascriptは、CGIが使えない場合にもインタラクティブなページを作成できます。ただしブラウザによっては実行出来ないケースもありますが、ほとんどのみなさんがインターネットエクスプローラVER4.0以上ないしネットスケープVer4.0以上を利用しているはずです。そこで、私もJavaScriptの自作にtryしてみようと思います。
　私もbasic やfortranといった科学技術用プログラム言語は、仕事柄扱っているのですが、JavaScriptに関しては、完全な初心者です。みなさんも私と一緒にtryしてみませんか。

はじめに
第１回　とりあえず画面に何か表示してみたい
第２回　クイズを作ってみよう
第３回　合計を出してみよう
第４回　if文を覚えよう
第５回　関数を使ってみよう
第６回　ラジオボタンを使った入出力
第７回　占いのページを作ろう
第８回　設問に答えると解答のページに飛ぶには
第９回　セレクトボタンを使った問題

このページへのアクセスは人目です。(Since 2000/04/15）

はじめに

　Javascriptというのは、ネットスケープやインターネットエクスプローラー上で動く、プログラム言語です。Javaという名前がついていますが、Javaとは別物みたいです。文法的には似てますが・・・。いずれJavaにもtryしようと考えています。このコーナーでは自作のスクリプトを公開しています。これらを加工すれば簡単なクイズのページならすぐに作れます。でも正確な文法はわたしも知らないので、以下の参考文献およびリンク先で勉強してくださいね。

宮坂雅輝『JavaScriptハンドブック』ソフトバンク　1200円　最初に買った本です。例題中心で実践的ですね。
古旗一浩『JavaScriptポケットリファレンス』技術評論社　1780円　ほとんどすべてのコマンドがのってます。辞書的に使えます。

第１回　とりあえず画面に何か表示してみたい

フォートランにしてもベーシックにしてもプログラム言語を勉強してとりあえず誰でも最初にやってみるのが
画面に何かを表示することですね。早速やってみましょうか。
　Javascriptを実行させるには、HTMLソースにコマンドを書き入れる必要があります。みなさんがみているこの画面のソースを見るなら、インターネットエクスプローラーの表示、ソースを選択すると

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
</HEAD>
<BODY>
<P align="center"><B><FONT size="+1">一緒に学ぼうJavaScript</FONT></B></P>
<P><BR>
インタラクティブなページを作るには、CGIを利用するのが一般的ですが、プロバイダによっては自作のCGIの使用を認めていないケースがかなりあります。Javascriptは、CGIが使えない場合にもインタラクティブなページを作成できます。
ただしブラウザによっては実行出来ないケースもありますが、ほとんどのみなさんがインターネットエクスプローラVER4.0以上ないしネットスケープVer4.0以上を利用しているはずです。そこで、私もJavaScriptの自作にtryしてみようと思います。<BR>
　私もbasic や　fortranといった科学技術用プログラム言語は、仕事柄扱っているのですが、JavaScriptに関しては、完全な初心者です。みなさんも私と一緒にtryしてみませんか。<BR>
</P>
<HR>
<H1>第１日　とりあえず画面に何か表示してみたい</H1>
<HR>
<P>　フォートランにしてもベーシックにしてもプログラム言語を勉強してとりあえず誰でも最初にやってみるのが<BR>
画面に何かを表示することですね。早速やってみましょうか。<BR>
　Javascriptを実行させるには、HTMLソースにコマンドを書き入れる必要があります。みなさんがみているこの画面のソースを見るなら、インターネットエクスプローラーの表示、ソースを選択すると<BR>
<BR>
</P>
</BODY>
</HTML>

というような表示が見えるはずです。これがホームページを表示させる言語であるHTML言語のソースリストです。わたしの場合、ホームページビルダーを使ってホームページを作成しているので、ほとんどこのソースリストで使っている命令の意味は知りません。そうですね知っているのは<BR>が改行させる命令らしいということぐらいですか・・・
Javascriptはこのソースリストの中に記述します。通常はソースリストの中の<BODY>という命令の後に書くそうです。そして次のようにスクリプト言語としてJavaScriptを使用することを宣言して、の間に命令を記述して、</SCRIPT>
を最後につけるようです。

<SCRIPT language="JavaScript">

</SCRIPT>

それでは具体的にの間に画面に何かを表示させる命令を書いてみましょうか。画面に文字を表示させる命令は
　document.write
という命令だそうです。直訳すると文書を書く、要するに英語ですね。日本人がJavaScriptを発明したなら、文字表示とでもしたのでしょうか・・・
　それでは実際に以下のような記述を組み込んでみましょう。

<SCRIPT language="JavaScript">

</SCRIPT>

どうですか？実はこのページのタイトルはJavaScriptで表示させています。<font size=10></font>で文字を囲むことで文字を大きくしています。これだけの表示でもエラー表示が出て、結構手間取りました。日本語入力onの状態でプログラムを記述していたため、全角のスペースがプログラム内に紛れ込んでいたのが原因でした。日本語の全角のスペースは、英語環境では文字として認識されてしまいます。通常は画面で見てもわからないのでプログラム作成のときに陥りやすい過ちです。これをさけるには、日本語入力をオフにしてプログラムを記述するか、あるいは私の愛用しているMIFESのようなテキストエディターを使って記述することです。MIFESというソフトでは、普段は見えない全角のスペースや改行マークを表示させる機能を持ってますので・・・

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

画面に文字を表示させるだけなら、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">


これでも簡単なクイズのページなら作れますよね。でもこれだとクイズにもう一度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">

</SCRIPT>
<FORM><INPUT type="button" name="ボタン" value="押してね" onClick="quiz()"></FORM>

という記述をHTMLソースに挿入すればよいわけです。では実際に試してみましょう。下の”押してね”ボタンを押してね。

第３回　合計を出してみよう

当館のフォートランの部屋に合計を出すプログラムがおいてあります。同じことをJavaScriptでやってみましょう。フォートランと同じように合計を出すには、ループ文つまり繰り返し計算をおこないます。JavaScriptでのループ文は、for文を使います。ベーシックに似てますね・・・。フォートランだとDo文です。JavaScriptでループ文の構造は

for(初期値;終了条件;継続処理){
任意の実行文;
}

のように記述されます。これをベーシックで書くと
for　I=○○　to　○○　step　○○

next　I

という記述になります。構造自体は同じです。表記方法がちがうだけです。　ベーシックでのstep幅のところが継続処理です。具体的な例を出したほうがわかりやすいでしょうね。たとえばiの値が１から１０まで、１づづ増加していくループ文を作るなら

for(ｉ=1;i<=10;ｉ++){
任意の実行文;
}

と記述すればよいみたいです。ここでループの終了の条件ですがi=10でも良さそうなのですが、なぜか終了条件につかえる演算子は<　>　<=　>=　の４つだけです。（経済学の非負条件みたい・・・棒が多いけど、このコメントがわかるあなたは同業者でしょう）
　合計を出すなら、ループ文のなかには配列変数を使うのが便利です。JavaScriptでの配列変数は、まず次のような配列の宣言をおこなってから使用します。

X=new Array(10);

これで配列変数として１０個の数値が代入できます。この配列の添え字は、かならず０から始まるそうです。フォートランやベーシックに慣れて人ほど、違和感をおぼえるはずです。きまりごとだから仕方ないですね。それではこの配列変数とループ文を組み合わせて１から3までの数を合計するプログラムを書いてみましょうか。

<SCRIPT language="JavaScript">

</SCRIPT>

このプログラムを実行すると８０が答えとして表示されます。ここで間違いやすいのが、x[1]=20;をみると分かるように、配列変数は()でなく[]が使われているところです。私もここでつまづきました・・・。でもこれだと汎用性が全くないですね。そこで、第２回で学んだボタンを押すと入力を促す画面が表示されて、結果を表示するようにしてみましょう。

<SCRIPT language="JavaScript">

</SCRIPT>
<FORM><INPUT type="button" name="ボタン" value="押してね" onClick="quiz2()"></FORM>

このプログラムのポイントは、x[i]=eval(x[i]);の部分です。実はこれをいれないと数値を入力しても文字列として処理されて、計算結果が文字列の足し算になってしまいます。evalは文字列を数値として評価する（evaluate）関数です。では、以下の押してねというボタンを押してみてください。入力を促す画面が表示されるので、適当な数値を入力してください。繰り返し計算は３回にしているので３回入力してください。合計値が表示されますので。

第４回　if文を覚えよう

if文はすでにクイズを作るのに使いましたが、もう少し高度な使い方をしてみましょう。当館のフォートランの部屋にif文を覚えようというコーナーがあります。ここで説明した課税所得から所得税額を求めるプログラムをJavaScriptで表現してみましょう。

<SCRIPT language="JavaScript">
taxbase=1000;
b=new Array(6)
tax=0;
b[0]=0;
b[1]=330;
b[2]=900;
b[3]=1800;
b[4]=3000;
b[5]=100000;
T=new Array(5);
T[0]=0.1;
T[1]=0.2;
T[2]=0.3;
T[3]=0.4;
T[4]=0.5;
total=0;
for(i=0;i<=4;i++){
if(b[i]<taxbase && taxbase<=b[i+1]){
tax=total+(taxbase-b[i])*T[i]
}
total+=(b[i+1]-b[i])*T[i]
}
document.write(tax)
</SCRIPT>

ここでのポイントは、
if(b[i]<taxbase && taxbase<=b[i+1]){

}
の部分です。if文で判定する条件が　b[i]<taxbase　と　taxbase<=b[i+1]　の２つになってますね。この２つの条件が両方とも満たされているかどうか、を判定しています。つまり論理積（AND）ですね。科学技術計算ではこの論理和をよく使いますので覚えておきましょう。あとは、合計を出そうで使ったループ文を使用しているだけです。かなりややこしいプログラムですが、基本的な計算の手続きはフォートランの部屋のプログラムと同じなのでそちらをみてくださいね。

第５回　関数を使ってみよう

プログラムが複雑になってくる場合は、同じ動作の手続きは、部品化した方がすっきりします。フォートランの部屋にサブルーチンを使ってみようというコーナがありますが、残念ながらJavaScriptではサブルーチンを使えないみたいです。というかいまのところそれらしい命令文がみつかりません。そこで、フォートランの部屋で解説したサブルーチンを使ってみようのコーナーと同じ動作をするプログラムを関数を使って表現してみましょう。フォートランの場合、関数とサブルーチンの違いは、サブプログラム内で計算結果の値を複数引き渡すことが可能なのがサブルーチンであり、ひとつしか値が得られないのが関数です。どうやら、JavaScriptでも同じみたいです。ただし、関数を用いるとグローバル変数とローカル変数を区別できるところや、引数を指定できるところは似ています。

<SCRIPT language="JavaScript">
function shotokuzei(E,tbase,R,b){
total=0;
answer=0
for(i=0;i<=E;i++){
if(b[i]<tbase && tbase<=b[i+1]){
answer=total+(tbase-b[i])*R[i];
}
total+=(b[i+1]-b[i])*R[i];
}
return answer;
}
</SCRIPT>
<SCRIPT language="JavaScript">
wnum=5;
wage=1000;
men=4;
wb=new Array(0,180,360,660,1000,100000000);
wr=new Array(0.4,0.3,0.2,0.1,0.05);
s=2;
PR=new Array(0.07,0.02);
PB=new Array(0,500,10000000);
tnum=5;
b=new Array(0,330,900,1800,3000,1000000)
T=new Array(0.1,0.2,0.3,0.4,0.5);
answer=shotokuzei(wnum,wage,wr,wb);
wdeduction=answer;
LKY=65;
if (wdeduction<LKY) {wdeduction=LKY};
income=wage-wdeduction;
answer=shotokuzei(wnum,wage,PR,PB);
premi=answer;
if(wage>1000){premi=45};
KISO=38;
HAIGU=38;
FMEN=men-2;
if(FMEN<0){FMEN=0}
FUYOU=38*FMEN
if(men<2){HAIGU=0}
if(income<=1000) {HAIGU=HAIGU*2}
taxbase=income-(KISO+HAIGU+FUYOU+premi)
answer=shotokuzei(tnum,taxbase,T,b);
document.write(answer);
</SCRIPT>

上記のプログラムのfunctionの部分は、HTMLソースの<HEAD><HEAD>に囲まれた部分に挿入します。そして下側の部分は<BODY><BODY>に囲まれた部分に挿入します。
　基本的な計算手続きは、フォートランの部屋のプログラムとやはり同じなので、解説もそちらをみてくださいね。フォートランとの違いは、関数を使用した結果得られる値をメインプログラムに返すときに、引数ではなく
return answer;
のように戻り値を指定するところですね。
それから、配列変数へのデータセットの方法ですが、１行づつ指定することしかできないと思っていたのですが、実は

T=new Array(0.1,0.2,0.3,0.4,0.5);

のようにまとめて記述できることがわかりました。フォートランのDATA文に相当する部分ですね。このプログラムは給与収入1000万円、子ども２人の世帯の所得税を計算するプログラムですが、加工すれば確定申告にも使えます。入出力フォームを作成する予定です。しばらくお待ちください。今年の確定申告には間に合いそうもないですが・・・

第６回　ラジオボタンを使った入出力

　ラジオボタンって知ってますか？

このように「はい」と「いいえ」をマウスでクリックする部品のことです。なぜラジオボタンと呼ぶのか不思議ですが・・・
このボタンを使うとアンケートやクイズが作れますね。このボタン自身はHTMLで記述されています。しかしこのラジオボタンを使ったプログラムを作るのは結構厄介です。私は理解するのに２日かかりました。JavaScriptの解説本にもほとんど詳しいことは書いていないし、HTMLの文法は知らないし・・・。

<FORM><INPUT type="radio" name=temp>はい　<INPUT type="radio" name=temp>いいえ</FORM>

ラジオボタンのHTMLのタグは上記のように書くみたいです。このなかでnameのところに同じ名前（ここではtemp）をつけると「はい」と「いいえ」のどちらかの選択式のボタンになります。
　ここまでは簡単でした。問題はここからです。どちらかを選択してもらったら今度は選択したデータを転送しなければなりません。これには入力ボタンを使います。また選択を間違えた時のためにリセットボタンも欲しいところです。　こんな風にね。

このフォームのHTMLは以下のように記述します。今度はnameとして「選択」という名前をつけてみました。好きな名前がつけるようです。リセットボタンの方はINPUT type="reset"の記述があればリセットボタンとして機能するようです。value=にいれた文字がボタンの表面に表示されます。

<FORM>
<INPUT type="radio" name="選択">はい
<INPUT type="radio" name="選択">いいえ
<INPUT type="button" value="ok">
<INPUT type="reset" value="リセット">
</FORM>

これでラジオボタンが見た目は完成しているのですがこのままでは選択とリセットはできるのですが、okボタンを押しても何も起こりません。そこで、<INPUT type="button" value="ok">のところにボタンを押した場合のイベントと書き足します。

<INPUT type="button" value="ok"　onclick="Check()">

とします。このonclick="Check()"の部分はボタンがマウスでクリックされたらCheck()という関数に飛ぶという命令です。ここからがJavaScriptの出番です。

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<FORM name="myform">わが国の財政赤字の対ＧＤＰ比は３％以下である　
<input type=radio name=mondai1>はい
<input type=radio name=mondai1>いいえ
<input type=button name=ok value="ＯＫ" onclick="Check()">
<INPUT type="reset" name=indata value="リセット">
</FORM>

「はい」を選べば不正解、「いいえ」を選択すると正解というプログラムを組んでみましょう。ラジオボタンは選択された場合には「true」、選択されていない状態では「false」という文字が記憶されます。この記憶された情報をCheck()という関数の中で処理します。問題はどうやってその情報を取り出すかです。これを調べるのに時間がかかりました。ここではanswerという変数にその情報をセットしています。これは

　　　　document.myform.mondai1[0].checked

の部分で実現されています。document.の部分はラジオボタンの情報を取り出す場合に共通して必要な部分です。myform.はわたしが<FORM name="myform">の部分でつけた任意の名前です。いちばん最後まで謎だったのがmondai1[0].の部分です。
これは私が<input type=radio name=mondai1>の部分でつけたmondai1 の名前の配列変数のゼロ番目を意味してます。もしmondai1[1]にすると２番目のラジオボタンの選択状況の情報が入手できます。ここでのラジオボタンは択一式なのでどちらか片方の情報だけで十分です。「はい」がtrueのときは「はい」が選択され「はい」がfalseのときは「いいえ」が選択されたはずですから。最後の.checkedは、ラジオボタンの選択状況をチェックするという意味のようです。
　かりに「はい」の部分がチェックされた場合には、answerという変数には、「true」という文字が入ります。そこでこのanswerという変数がtrueに等しいときに「正解」とするか「不正解」とするかを

if(answer==true){alert("不正解")}
else{alert("正解")}
}

の部分で表現しています。それでは以下の問題に答えてみてください。「はい」と「いいえ」のどちらかを選択してokというボタンを押してみてね。

第７回　占いのページを作ろう

最近、動物占いとか家電占いとか流行ってますね。設問にはい、いいえ、どちらともいえないを答えると、あなたの○○度は○％ですという表示がでるページもあります。そこで、今回は設問に答えると点数が表示されるプログラムをつくってみました。これは基本的には、第６回のスクリプトを使えます。つまりまずHTMLでフォームとラジオボタンをつくり、ボタンを押すとチェックされた項目について一定の判断をする関数に飛ばすスクリプトを作ればよいわけです。以下に提示しているのがその関数およびHTMLの記述です。

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<FORM name="myform2">
設問１　<input type=radio name=setumon1>はい　<input type=radio name=setumon1>いいえ <input type=radio name=setumon1>どちらともいえない
<BR>
設問２　<input type=radio name=setumon2>はい　<input type=radio name=setumon2>いいえ <input type=radio name=setumon2>どちらともいえない

<BR>
<input type=button value="ＯＫ" onclick="Check2()">
<INPUT type="reset" value="リセット">
</FORM>

以上のようにかなり長くてややこしくなっています。ここまでくると多分わたしの解説を読んで理解できるぐらいの人は、解説を読まなくても自分で組めるぐらいの人でしょう。でもせっかくなのでポイントのみ解説しておきます。解説を読んでも分からなかった人は、このスクリプトの問題文などを加工して使えば十分でしょう。たとえば、
設問１　<input type=radio name=setumon1>はい

というところの設問１の次に、自分で考えた問題を記入すればよいでしょう。また設問に対する得点を変更したい場合には、

if(answer11==true){tokuten1=50};
if(answer12==true){tokuten1=10};
if(answer13==true){tokuten1=30};

の部分と

if(answer21==true){tokuten2=50};
if(answer22==true){tokuten2=10};
if(answer23==true){tokuten2=30};

の部分の５０、１０、３０の配点部分を変更するだけです。answer11の行は、設問１のはいが選択された場合、answer12の行は設問１のいいえが選択された場合、answer13の行は、設問１のどちらともいえないが選択された場合の配点が並んでいます。さらにanswer21の行は、設問２のはいが選択された場合、answer22の行は設問２のいいえが選択された場合、answer23の行は、設問２のどちらともいえないが選択された場合の配点が並んでいます。

ＨＴＭＬの記述部分は、前回とほぼ同じなので、関数内での処理についてのみ説明します。今回苦労したところは、チェックボタンが３つになったので、どのボタンが押されたのかすべてチェックする必要がでてきたところです。それと、ユーザーがチェックを忘れたまま、okボタンを押すとエラーが生じてしまう問題をどうやって回避するかでした。この問題は基本的にはif文を使用して処理しています。
まず、上記のスクリプトにおいて

answer11=document.myform2.setumon1[0].checked;
answer12=document.myform2.setumon1[1].checked;
answer13=document.myform2.setumon1[2].checked;

の部分は前回説明したように、設問１のボタンがチャックされているかどうかを調べる部分です。もし選択されていた場合は
answer11、answer12、answer13の各変数にtrueという文字がセットされます。したがって、たとえばanswer11がtrueだったら選択されたことがわかるのでそのときの点数をつけます。
それが

if(answer11==true){tokuten1=50};

の部分です。ここでは設問１の「はい」が選択されたときに得点を５０点もらえるとしました。今回のスクリプトで工夫したところが以下の部分です。

if(answer11==false && answer12==false && answer13==false){
alert("設問１が選択されてません");
matigai1=1
}
else{
matigai1=0
}

この部分は、設問１のラジオボタンを入力しないままokボタンが押された場合に警告を出すようにしています。もし設問１のラジオボタンが入力されていない場合には、answer11、answer12、answer13がすべてfalseになっているはずです。これを論理積（AND）を使って判定しているわけです。そこまでは、誰でも思いつくことですが、ここでmatigaiという変数にゼロないし１をセットしている処理をしているところがこのスクリプトの売りです。ラジオボタンの入力にミスがあった場合には、どの設問に答えていないかを表示したうえで、もう一度選択し直すようにメッセージを出したいわけです。以下の部分がmatigaiという変数を使って、得点を表示するかそれとも、もう一度選択を促すかを判定している部分です。

matigai=matigai1+matigai2
if(matigai==0){
tokuten=tokuten1+tokuten2;
alert(tokuten);
}
else{
alert("ラジオボタンをチェックしてやり直してください")
}

matigai=matigai1+matigai2

の部分では、設問１と２の双方のmatigai1、2の変数を合計しています。もし設問を増やす場合にはこの部分を直す必要があります。
　それでは、以下に完成したものを載せておくので、試してみてくださいね。

第８回　設問に答えると解答のページに飛ぶには

第７回は設問の答えるとアラートを表示するスクリプトですが、一般的には設問に「はい」「いいえ」をチェックすると「はい」の数によって、何らかの診断結果のページに飛ぶ方がより凝った占いのページが作れますね。基本的には第７回を加工して次のようなスクリプトを作成してみました。

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<FORM name="myform2"><B><FONT size="+2">あなたの財政学館度を判定します。</FONT></B>　　　　　　　　　　　　　
<TABLE border="1">
<TBODY>
<TR>
<TD>設問１　毎日みている。</TD>
<TD><INPUT type="radio" name="setumon1">はい　<INPUT type="radio" name="setumon1">いいえ </TD>
</TR>
<TR>
<TD>設問２　館主の名前を読める。</TD>
<TD><INPUT type="radio" name="setumon2">はい　<INPUT type="radio" name="setumon2">いいえ </TD>
</TR>
<TR>
<TD>設問３　財政学の別館をみたことがある。</TD>
<TD><INPUT type="radio" name="setumon3">はい　<INPUT type="radio" name="setumon3">いいえ </TD>
</TR>
</TBODY>
</TABLE>
　<input type=button value="ＯＫ" onclick="Check2()">
<INPUT type="reset" value="リセット">
</FORM>

今回はこれまでのスクリプトの応用なので新しい命令文のみ説明しておきます。ページへ飛ぶ、つまりリンクのコマンドは

location.href="http://　　　　"

です。//のあとにリンク先のアドレスを記入するだけです。それでは以下の押してねボタンを押してみてね。このスクリプトをおいてますから。

第９回　セレクトボタンを使った問題

英語の選択問題などでは、セレクトボタンを使った入出力が便利です。ラジオボタンでも作れないことはないのですが、見た目はこちらの方がスマートでしょう。これまでと同様に、HTMLでフォームを作成し、ボタンを押すとJavaScriptsで答えのチェックをします。まずＨＴＭＬでで以下のようなフォームを作成します。

<FORM name=myform>I'd like
<SELECT name="setumon">
<OPTION value=a >a
<OPTION value=some>some
</OPTION></SELECT>cigar please. 　
<INPUT name=ok onclick=Check() type=button value=ＯＫ>
</FORM>

<OPTION value=>の部分を追加すれば２つ以上の選択肢を設定することもできます。ここでは、<INPUT name=ok onclick=hantei() type=button value=ＯＫ>でokというボタンを押すとhantei()という関数に飛ぶようになっています。
そこで、 hantei()という関数を記述すると

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

となります。answer=document.myform.setumon.selectedIndex;の部分では、選択された項目の番号をanswerという変数に代入しています。最初の項目が選択された場合には０が１番目の項目が選択された場合は１になります。
そこで、この場合は、answerがゼロの時にalertを使用して「正解です」と表示させ、それ以外のときは「不正解です」と表示させています。完成品が以下のフォームです。セレクトメニューを選択して、OKを押すと判定されます。