2014-10-21

2014-10-21

関数Add Star

 

 

関数とは

  • 一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます
  • 手間のかかる処理を関数として定義しておけば、必要なときに何度も呼び出すことができます
  • 関数は処理の材料となる「引数」を受け取ります
  • 処理が終了すると「戻り値」と呼ばれる処理結果を返します

  1. 自作関数:自分で定義して使う
  2. 組み込み関数:プログラミング言語がすでに組み込んであるもの

引数も戻り値もない関数の書き方
  • 関数は、function文を使って定義する
  • 定義した関数を実行するときは、関数名を記述するだけ
  • 定義の際も呼び出しの際も、関数名の後ろに必ず「()」をつける

 

関数の定義

 

 

 

function 関数名 () {

  処理;

}

 

 

 

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

 

 

 

関数名 ();

 

 


《引数も戻り値もない関数の利用》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>関数の使い方</title>
</head>
<body>
<script>
//関数の定義
function sayHello(){
    console.log('こんにちは');
}
  sayHello();  //関数の呼び出し
</script>
</body>
</html>

《実行結果》

 

f:id:web-javascript:20130521213336j:image

 


関数の定義は記述順序に関係なく優先的に行われるので、関数の呼び出しが先に記述されてもいても問題なく動作します。


<script>
  sayHello();  //関数の呼び出し
//関数の定義
function sayHello(){
    console.log('こんにちは');
}
</script>

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

 

関数の定義

 

 

 

function 関数名 (引数を入れる変数名) {

  処理;

}

 

 

 

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

 

 

 

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

 

 


《引数のある関数の利用》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>関数の使い方:引数あり</title>
<script>
function sayHello(name){
    console.log(name + 'さん、こんにちは');
}
  sayHello('よしお');
</script>
</head>
<body>
</body>
</html>

《実行結果》

 

f:id:web-javascript:20130521215347j:image

 


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

 

関数の定義

 

 

 

function 関数名 () {

  処理;

  return 戻り値;

}

 

 

 

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

 

 

 

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

 

 


《戻り値のある関数の利用》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>関数の使い方:戻り値あり</title>
<script>
function calc(){
var num = 0;
for(var i=1; i<=10; i++){
      num += i;
}
return num;
}
var result = calc();
  console.log(result);
</script>
</head>
<body>
</body>
</html>

《実行結果》

 

f:id:web-javascript:20130521220239j:image

 


この場合 calc関数は、1から10までの値を合算した結果を戻り値として返します。

return文が実行されると、変数numの中身「55」が呼び戻し元に返却されます。


  • 関数の実行前
var result = calc();

  1. var result = calc(); 関数の呼び出し
  2. 関数の実行
  3. 戻り値の返却

  • 関数の実行後
var result = 55;

関数を呼び出して戻り値をコンソールに表示するだけの場合は、

  console.log(calc());

円の面積を求める

《引数と戻り値がある関数の利用》

  • 関数の中から別の関数を呼び出す

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>関数の使い方:引数と戻り値あり</title>
<script>
function calcCircle(radius){
return radius * radius * 3.14;
}
function callFunc(){
var area = calcCircle(5);
return area;
}
  console.log(callFunc());
</script>
</head>
<body>
</body>
</html>

  1. callFunc開始
  2. calcCircle開始(半径の値5を代入)
  3. calcCircle終了(半径の値5で面積を求める計算の処理を実行)
  4. callFunc終了(計算の処理が戻した値を、コンソールログに表示)

《実行結果》

 

f:id:web-javascript:20130522003157j:image

 



 

 

  • 関数は引数を受け取り、戻り値を返す
  • 関数は定義しただけでは実行されない
  • 呼び出しをおこなったタイミングで実行される