初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Javascript 関数 引数 戻り値

関数について記述します。

関数はfunction文を使って定義します。
定義した関数を実行するには 定義した関数名を記述するだけでOKです。
逆に言えばfunction文で関数を定義しても、実行の記述をしなければ、何も起こらないのが関数です。

関数の定義

function 関数名 () {
  処理の記述;
}

定義した関数の呼び出し方

関数名 ();

引数のある関数の書き方

  • 引数とは、関数に渡す材料
  • 引数は、複数指定することが可能(カンマ区切りで記述)

関数の定義

function 関数名 (引数を受けとる変数名) {
  処理;
}

定義した関数の呼び出し方

関数名 (引数として渡す値);

戻り値のある関数の書き方

  • 戻り値は、関数の処理結果
  • return文が実行されると、呼び出した関数の元に戻ります。
  • 戻り値として指定した値が返却されるので、戻り値を代入する変数を用意して起きます

関数の定義

function 関数名 () {
  処理;
  return 戻り値;
}

定義した関数の呼び出し方

戻り値を入れる変数名 = 関数名 ();

引数と戻り値がある関数を下記の例題を参考に解説します。

f:id:bellsmarket:20150203230931p:plain

変数【your_name】と【kun】を引数としてfunction【greeting】の
引数の受け皿である変数名に代入します。
ここで初めて【greeting】が実行されます。
returnの記載がある為、戻り値が変数【result】に返却されます。
document.writeで【result】で出力します。

出力結果です。

f:id:bellsmarket:20150204014204p:plain

f:id:bellsmarket:20150204014014p:plain

次に引数と戻り値があり、更に関数の中から別の関数を呼び出すケースです。

f:id:bellsmarket:20150203230934p:plain

読み込む順序は下記になります。

  1. callFuncが開始されます。
  2. calcCircleが開始されます。(引数の半径の値5をradiusに代入)
  3. calcCircleが終了(半径の値5で面積を求める計算を実行し、戻り値を返却)
  4. callFuncが終了(計算処理が終わった戻り値を、console.logに返却し表示)

結果です。
f:id:bellsmarket:20150203230755j:plain

topへ戻る