←　前のページへ戻る

「おみくじ」のプログラム（JavaScriptを記述する）

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

<HTML>
<HEAD>
<TITLE>おみくじ</TITLE>
<script language="javascript">
<!--
function hiku(){　//説明２
num=Math.ceil(Math.random()*6);　//説明３
if(num<=1){myform.mytext.value=" 大吉";}　//説明４（num==0又はnum==1の場合）
if(num==2){myform.mytext.value=" 中吉";}　//説明４
if(num==3){myform.mytext.value=" 小吉";}　//説明４
if(num==4){myform.mytext.value="　吉　";}　//説明４
if(num==5){myform.mytext.value="　凶　";}　//説明４
if(num==6){myform.mytext.value=" 大凶";}　//説明４
}
//-->
</script>
</HEAD>
<BODY>
<FORM name="myform">　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　//説明１
<INPUT size="5" type="text" style="font-size:22px" name="mytext"><BR>　//説明１
<BR>
<INPUT type="button" value="おみくじをひく" style="font-size:22px" onclick="hiku()">　//説明２
</FORM>
</BODY>
</HTML>


スクリプト解説

　（説明１）
　まず最初に、テキストボックスにメッセージを表示できるように準備します。
　<FORM>タグにmyformという名前を、<ＩＮＰＵＴ>タグにmytextという名前をつけます。
　これで、myform.mytext.valueを実行すると、テキストボックスにメッセージを表示することができます。
　（テキストボックスにメッセージを表示）


　（説明２）
　「おみくじをひく」というボタンを押すと、onclick属性によりhiku()関数が実行されます。
　（マウスによる処理）


　（説明３）
　hiku()関数は最初に、
　　num=Math.ceil(Math.random()*6);
　を実行し、numの値を１・２・３・４・５・６のいずれかに決定します。
　（極めてまれですが、０の可能性もあります）
　（ランダム処理）


　（説明４）
　条件式（if文）を用いて、選択されたnumの値によって異なった処理をさせます。（条件式if文）
　もし、ランダムに決定した数字（numの値）が3ならば
　　　myform.mytext.value="小吉";
　というスクリプトを実行します。これは、テキストボックスに「小吉」と表示しなさい、という意味です。
　（テキストボックスにメッセージを表示）