JavaScript - 関数

■ページ目次

関数
関数の作成と利用
例題
JavaScriptファイルの利用
例題
実習

■関数

■関数の作成と利用


 function 関数名(引数のリスト) {
     関数の本体
     return 戻り値;         // 戻り値がある場合は、return文を書きます。
 }


 関数名(引数のリスト);           // 戻り値が必要ない場合の使用例

 変数名 = 関数名(引数のリスト);  // 戻り値を変数に入れる場合

関数は、外部のJavaScriptファイルを利用するのが一般的です。

 <script type="text/javascript" src="uri"></script>

 外部のJavaScriptファイルには、拡張子".js"をつけます。

Top

■例題

プロンプトから入力した値が0-100か否かを表示するサンプル "ArgsCheck01.html" です。このとき、値の検査をする関数argsCheck()を作り、それを利用します。


 <!-- ArgsCheck01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript">
 <!--
 function argsCheck(n) {
     if (n < 0 || n > 100) {    // "||" は、論理演算子です。
         return false;
     }
     return true;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     var n = parseInt(prompt("0-100の数値を入力してください。", 0));
     if (argsCheck(n)) {
         document.write(n + " は範囲内です。");
     } else {
         document.write(n + " は範囲外です。");
     }
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

プロンプトから0-100の値を入力するサンプル "ArgsCheck02.html" です。このとき、入力した値が誤りであれば、メッセージを出し、正しい値が入るまで入力を促します。


 <!-- ArgsCheck02.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript">
 <!--
 function argsCheck(n) {
     if (n < 0 || n > 100) {
         return false;
     }
     return true;
 }
 function getValidNumber() {
     var n;
     while (true) {
         n = parseInt(prompt("0-100の数値を入力してください。", 0));
         if (argsCheck(n)) {
             break;                      // ループを終了します。
         }
         alert("入力値の誤りです。");
     }
     return n;
 }
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     document.write(getValidNumber());
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top

■JavaScriptファイルの利用

関数は、外部のJavaScriptファイルを利用するのが一般的です。

 <script type="text/javascript" src="uri"></script>

 外部のJavaScriptファイルには、拡張子".js"をつけます。

このとき、<script> タグは空要素ですが、<script/> タグを使えません。

Top

■例題

上記のプロンプトから0-100の値を入力するサンプル "ArgsCheck02.html" の argsCheck(n) 関数と getValidNumber() 関数を外部のJavaScriptファイル"ArgsCheckUtil.js" に入れてください。またこれを確認するHTML "ArgsCheck03.html" もあわせて作成してください。

□ "ArgsCheckUtil.js"


 /**
  * 引数が 0 以上 100 以下かどうかを検査する。
  * @param n 検査する整数値。
  * @return 範囲内であれば true、範囲外のとき false を返す。
  */
 function isValidNumber(n) {
     return n >= 0 && n <= 100;
 }
 
 /**
  * 妥当な整数値(0 以上 100 以下)をプロンプトから取得する。
  * @return 妥当な整数値を返す。
  */
 function getValidNumber() {
     var n;
     while (!isValidNumber(n = parseInt(prompt("0-100の数値を入力してください。", 0)))) {
         alert("入力値の誤りです。");
     }
     return n;
 }

□ "ArgsCheck03.html"


 <!-- ArgsCheck03.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="ArgsCheckUtil.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 <!--
     document.write(getValidNumber());
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top

■実習

コンピューターとじゃんけんをするHTML "Janken11.html" と、ここで使う関数をまとめたJavaScriptファイル"JankenUtil.js" を作ります。

プロンプトから入力した値が 0 (ぐー)、1 (ちょき)、2 (ぱー)として、勝負します。なお、-1 (終了)のときは、何も行わないようにします。

このとき、上記サンプルの "ArgsCheck02.html" で作った getValidNumber() 関数に加えて、じゃんけんの勝負結果を戻す関数 janken() をつくります。この関数は、ユーザーが勝てば 1 を、負ければ -1 を、引き分けなら 0 を戻すようにします。

□ "JankenUtil.js"


 /**
  * 引数が -1 以上 2 以下かどうかを検査する。
  * @param n 検査する整数値。
  * @return 範囲内であれば true、範囲外のとき false を返す。
  */
 function isValidNumber(n) {
     return n >= -1 && n <= 2;
 }
 
 /**
  * 妥当な整数値(-1 以上 2 以下)をプロンプトから取得する。
  * @return 妥当な整数値を返す。
  */
 function getValidNumber() {
     var n;
     while (!isValidNumber(n = parseInt(prompt("-1(終り), 0(ぐー), 1(ちょき), 2(ぱー) を入力してください。", 0)))) {
         alert("入力値の誤りです。");
     }
     return n;
 }
 
 /**
  * ユーザー1と2でじゃんけんをする。
  * @param user1 ユーザー1。
  * @param user2 ユーザー2。
  * @return ユーザー1 が勝てば 1、負ければ -1、引き分けは 0 を返す。
  */
 function janken(user1, user2) {
 
     // ここにコードを記述してください。
 
 }

□ "Janken11.html"


 <!-- Janken11.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="JankenUtil.js"></script>
 </script>
 </head>
 <body>
 <script type="text/javascript">
     var kekka = janken(getValidNumber(), Math.floor(Math.random() * 3));
     document.write("<p>");
     if (kekka == 1) {
         document.write("あなたの勝ち");
     } else if (kekka == 0) {
         document.write("引き分け");
     } else {
         document.write("あなたの負け");
     }
     document.write("</p>");
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

上記のじゃんけんを連続して、勝負結果表示するHTML "Janken12.html" を作ります。プロンプトから入力した値が -1 になるまで勝負を繰り返します。


 <!-- Janken12.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 <script type="text/javascript" src="JankenUtil.js"></script>
 </head>
 <body>
 <script type="text/javascript">
     var win = 0;
     var draw = 0;
     var lose = 0;
     var u;
     while ((u = getValidNumber()) != -1) {
         var kekka = janken(u, Math.floor(Math.random() * 3));
         document.write("<p>");
 
             // ここにコードを記述してください。
 
         document.write("</p>");
     }
     document.write("<hr/><p>" + win + " 勝 " + lose + " 敗 " + draw + " 分 " + "</p>");
 //-->
 </script>
 <noscript>JavaScriptが使用できません。</noscript>
 </body>
 </html>

Top