..

JavaScriptの入門とサンプル集
JavaScript入門−基本編(関数)     ■戻る     ■次へ     ■Home

関数

 関数とはよく使う処理をサブルーチンとして定義することをいいます。CやC++ではおなじみですね。BASICの場合で言えばGOSUBでよび出すサブルーチンみたいなものです。それでは関数オブジェクト「function」を使って関数を定義してみましょう。

関数「function」

    function 関数名(引数1,引数2,・・・,引数n)
    {
      処理内容
      retuen 戻り値
    }

 関数定義はその関数を呼び出す前であればどこにでも記述できます。一般的には<head>タグ間に記述します。
下記のサンプルプログラムは引数に設定した三つの数字を加算してアラート表示するプログラムです。
 

<html>
<head>
<title>関数定義1</title>

<script language="JavaScript"><!--
  function addNum(a,b,c)
  {
     n=a+b+c;
     alert(n);
  }

addNum(10,20,30);


// --></script>


</head>

<body>
</body>
</html>

〜sample7_1.html〜のリスト





「addNum」という関数を定義します

三つの引数を加算
答えをアラート表示


関数「addNum」を実行

   ■sample7_1.htmlを実行する


 このプログラムを戻り値を用いた場合は下記のようになります。また引数を設定しない関数も作ることができます。


<html>
<head>
<title>関数定義2</title>

<script language="JavaScript"><!--
  function addNum(a,b,c)
  {
     n=a+b+c;
     return n;
  }
  function main()
  {
     ans=addNum(10,20,30);
     alert(ans);
   }

main();


// --></script>


</head>

<body>
</body>
</html>


〜sample7_2.html〜のリスト





「addNum」という関数を定義します

三つの引数を加算
戻り値として答え「n」を返します

「main」という関数を定義します
引数はなくてもかまいません
関数「addNum」を実行し戻り値を「ans」に代入
答えをアラート表示します


関数「main」を実行します

   ■sample7_2.htmlを実行する


 引数の数が変動する場合はarguments」を使って下記のようになります。


<html>
<head>
<title>関数定義3</title>

<script language="JavaScript"><!--
  function addNum()
  {
     var n=0;
     for(i=0;i<addNum.arguments.length;i++)
     {
        n+=addNum.arguments[i];
     }
     return n;
  }
  function main()
  {
     ans=addNum(10,20,30);
     alert(ans);
     ans=addNum(10,20,30,40);
     alert(ans);
     ans=addNum(10,20,30,40,50,60,70,80,90,100);
     alert(ans);

   }

main();


// --></script>


</head>

<body>
</body>
</html>


〜sample7_3.html〜のリスト





「addNum」という関数を定義します

ローカル変数「n」を定義します。0にリセット。
引数の個数は、関数名.arugments.length」で知ることがで
きます
引数の値は、関数名.arugments[n]」に入っています

答え「n」を戻り値として返します

「main」という関数を定義します
メインルーチンです
関数「addNum」を実行し戻り値を「ans」に代入
答えをアラート表示します
ここで引数の数が変わっていることに注目
答えをアラート表示します




関数「main」を実行します

   ■sample7_3.htmlを実行する


sample7_1〜7_3.htmlの実行画面


 その他、関数オブジェクト「function」はクラスの継承などの処理を行うことができます。このHPではクラスについては省略しているのでクラスについてはリファレンスマニュアルを参照してください。(将来クラスについての解説も加えるかもしれませんが・・・。)

 【参照】ローカル変数とグローバル変数



..

JavaScript入門−基本編(関数)     ■戻る     ■次へ     ■Home


..