イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.14 - メッセージウィンドウの表示
|
フォームを使った、お遊びをしてみましょう。今回は九九の問題です。問題の答えを入力して、[OK] ボタンを押します。正解であれば「あたり！」、間違っていれば「はずれ！ こたえは XX です」といったメッセージウィンドウを表示してみます。 |
| Step テーマ ● alert() メソッド (アラートウィンドウの表示) ● Math.random() メソッド (乱数の取得) ● Math.floor() メソッド (小数切り捨て) |
実行例 |
リスト<script type="text/javascript"><!-- // 九九の問題をフォームにセットする関数 function mySet(){ document.myForm.myFormQ1.value = Math.floor(Math.random()*9)+1; // 九九の問題の値(左) をフォームへセット document.myForm.myFormQ2.value = Math.floor(Math.random()*9)+1; // 九九の問題の値(右) をフォームへセット document.myForm.myFormA.value = ""; // 九九の答え 入力欄をクリア } // 入力した答えが正解か不正解かを判定する関数 (答えを入力して、[OK]ボタンを押した時の処理) function myCheck(){ myQ1 = eval(document.myForm.myFormQ1.value); // 九九の問題の値(左) を取得 myQ2 = eval(document.myForm.myFormQ2.value); // 九九の問題の値(右) を取得 myA = eval(document.myForm.myFormA.value); // 入力された 九九の答え を取得 myKotae = myQ1 * myQ2; // 九九の答えを計算 if ( myKotae == myA ){ // 答えと入力した値は等しいか(正解か)? alert("あたり！ (^_^)"); }else{ alert("はずれ ！ こたえは "+myKotae+" です !"); } mySet(); // 次の問題をセット } // --></script> <!-- 九九の問題フォームを設置 --> <form name="myForm"> さて、もんだいです。 <input type="text" size="2" name="myFormQ1"> × <input type="text" size="2" name="myFormQ2"> ＝ <input type="text" size="2" name="myFormA"> <input type="button" value="ＯＫ" onclick="myCheck()"> </form> <script type="text/javascript"><!-- mySet(); // 初回の問題をフォームへセット // --></script> |
| サンプルだけの HTMLは こちらへ |
説明適当な一桁の数字を表示して、九九の問題にして 答えと比較します。 適当な数字は JavaScript が作ってくれます。乱数と呼びます。乱数を発生させるためには、Math.random() を使います。 書式は、 myRnd = Math.random(); です。myRnd の中には 0 の小数値が入ります。具体的に１０回表示してみましょう こんな感じです。今回は九九の問題なのでそんな数字ではなく、１から９の整数の乱数がほしいわけです。 myRnd = Math.floor( Math.random() * 9 ) + 1; これで１から９になるはずです。具体的に１０回表示してみましょう (^^; Math.floor() は、小数点切り捨てです。ピンときたでしょうか？(^^; myRnd = Math.floor( Math.random() * 9 ) + 1; ↓ myRnd = Math.random(); myRnd = myRnd * 9; myRnd = Math.floor( myRnd ); myRnd = myRnd + 1; Math.random() 値に 9 を掛けると 0.nnnnn ~ 8.nnnnn になるので、Math.floor() で 小数を切り捨てて、１を足して 1 ~ 9 になるようにしました。 正解か不正解かを知らせるために、アラートメッセージウィンドウを使いました。 実際、このウィンドウは注意や警告を知らせるためのウィンドウですが・・・ (^^; 書式は、 alert("表示するメッセージ") または alert(数値) です。 例) alert(" これが、alert のメッセージウィンドウです！ "); 文章を改行したければ、"¥n" と記述します。<BR>ではありません。 ^^; 例) alert(" これが、alert の¥n¥n メッセージウィンドウです！ "); 今回は関数 (function) を２つ つくりました。 mySet() は、フォームに問題をセットする関数、 myCheck() は、入力した答えが正解か、不正解かを判定する関数です。 関数ひとつひとつを <SCRIPT>〜</SCRIPT> で定義しなくても、今回のように 1つの <SCRIPT>〜</SCRIPT>内に複数定義できます。 mySet() は、第１回目の問題表示（フォーム定義した後）と、[ＯＫ] ボタンを押した後の次の問題表示と ２カ所でまったく同じ処理をするので関数化しました。 「第１回目の問題セットは、フォーム定義の下じゃなくて 関数定義のところで呼んでセットすればいいのに」、と思った賢い方もいるでしょう。しかし、フォームがその時点では作られていないのでエラーになってしまいます。 九九の問題２つと 入力された九九の答えをフォームから抽出しています。 myQ1 = eval(document.myForm.myFormQ1.value); myQ2 = eval(document.myForm.myFormQ2.value); myA = eval(document.myForm.myFormA.value); myKotae = myQ1 * myQ2; 注目するのは抽出した値を eval() 関数を使って 数値 に変えている点です。フォームから値を抽出した場合、その値は 文字列 として返ってきます。 今回は掛け算なので、eval() 関数を使わなくても、 "2" * "3" = 6 と計算してくれるのですが、足し算の場合は 以前のステップでも説明したように "2" + "3" = "23" という結果になってしまいますので、なんとなく eval() を使って、 2 * 3 = 6 とスッキリさせてみました。 ※ eval()関数については、Step.30 を参照してください。 ● 参考ステップ
● リファレンス
|