相性診断プログラム

「相性診断」のプログラム（JavaScriptを記述する）

　「画面作り」で制作したＨＴＭＬの中に、JavaScriptを記入して行きます。
　赤色の部分がJavaScriptで記入した部分です。
　緑色の部分はコメントですので、記入する必要はありません。

<HTML>
<HEAD>
<TITLE>相性診断</TITLE>
<SCRIPT language="javascript">
function hantei(){　//説明３
　　　　x=document.myform.blood1.value; 　//説明４（選択された男性の血液型）
　　　　y=document.myform.blood2.value; 　//説明４（選択された女性の血液型）
　　　　u=eval(x); 　　　　　　　　　　　　　　　//説明４（xの値を数値として認識させuとする）
　　　　v=eval(y); 　　　　　　　　　　　　　　　//説明４（yの値を数値として認識させvとする）
　　　　kekka=(u+v)%3;　//説明５
　　　　if(kekka==0){msg="　相性は最高！\n　BESTカップル。";}　//説明６
　　　　if(kekka==1){msg="　相性は普通！\n　友達ならＯＫ！ ";}　//説明６
　　　　if(kekka==2){msg="　相性は最悪！\n　残念！";}　　　　　 //説明６
　　　　myform.myarea.value=msg; 　//説明７
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<FORM name="myform">　//説明１
<SELECT name="blood1"> 　　　　　　　　//説明２
<OPTION value="1">Ａ型</OPTION>　　//説明２
<OPTION value="2">Ｂ型</OPTION>　　//説明２
<OPTION value="3">Ｏ型</OPTION>　　//説明２
<OPTION value="4">ＡＢ型</OPTION>　//説明２
</SELECT>　←男性の血液型<BR><BR>
<SELECT name="blood2">　　　　　　　　 //説明２
<OPTION value="1">Ａ型</OPTION>　　//説明２
<OPTION value="2">Ｂ型</OPTION>　　//説明２
<OPTION value="3">Ｏ型</OPTION>　　//説明２
<OPTION value="4">ＡＢ型</OPTION>　//説明２
</SELECT>　←女性の血液型<BR><BR>
<INPUT type="button" value="占う" onclick="hantei()"><BR><BR>　//説明３
<TEXTAREA rows="2" cols="20" name="myarea"></TEXTAREA></FORM>　//説明１
</BODY>
</HTML>

スクリプト解説

　「相性診断」は、「占い」のスクリプトを利用して制作します。
　診断結果が長いので、テキストボックスではなく、テキストエリアを利用します。
　（テキストエリアにメッセージを表示）

　（説明１）
　まず最初に、テキストエリアにメッセージを表示できるように準備します。
　（テキストエリアにメッセージを表示）
　<FORM>タグにmyformという名前を、<TEXTAREA>タグにmyareaという名前をつけます。

　（説明２）
　セレクトボックスを使用できるように準備します。セレクトボックスが２つあるので、それぞれについて設定が必要です。
　（セレクトボックス）

　まずは男性のセレクトボックスの準備をします。
　男性の血液型を選択する<SELECT>タグにblood1という名前をつけます。
　次に、選択肢ごとの値を決めておく為、<OPTION>タグにvalueで値をつけます。
　これで、x=myform.blood1.valueを実行すると、xの値がセレクトボックスで選択したvalue値になります。

　女性のセレクトボックスも同様に準備をします。
　ここでは、<SELECT>タグにblood2という名前をつけています。この名前は、男性用と同じにならないように注意して下さい。
　次に、選択肢ごとの値を決めておく為、<OPTION>タグにvalueで値をつけます。
　これで、y=myform.blood2.valueを実行すると、yの値がセレクトボックスで選択したvalue値になります。

　（説明３）
　「占う」というボタンを押すと、onclick属性によりhantei()関数がよびだされます。
　（マウスによる処理）

　（説明４）
　　x=document.myform.blood1.value;
　　y=document.myform.blood2.value;
というスクリプトにより、x、yに選択した選択肢のvalue値がそれぞれ入ります。但し、このx、yの値は文字列の形式なので、正しく計算するために、数値として認識させる必要があります。
　　u=eval(x);
　　v=eval(y);
というスクリプトにより、x、yを数値として認識させ、それぞれu、vとします。
　（文字列を数値として認識させる　eval）

　（説明５）
　　kekka=(u+v)%3;
というスクリプトは、uとvを加算し、３で割った余りを、変数kekkaに代入しなさいという意味です。
　u=1、v=2の場合なら(1+2)／3=1余り0となるので、kekka=0になります。

　（説明６）
　条件式（if文）を用いて、kekkaの値によって異なった処理をさせます。（条件式ｉｆ文）
　kekka=0ならば、
　　if(kekka==0){msg="　相性は最高！\n　BESTカップル。";}
　を実行します。
　ここで、\nは改行しなさいという意味です。

　（説明７）
　　myform.myarea.value=msg;
というのは、テキストエリアに変数msgの値を表示しなさい、ということです。
　（テキストエリアにメッセージを表示）
　msgの値は、説明６のｉｆ文で選択されたものです。
　msgの途中で\nとあり改行しているので、結果は２行で表示されます。