【JavaScript授業十二日目】関数

関数

●function

・処理をまとめたもの

・一度定義していればいつでも使える

・定義済みでも、呼び出さなければ何もしない

関数のバリエーション

・4種類ある

①引数なし・戻り値なし関数

②　　　function attack() {

③　　　  console.log('攻撃した！！');

　　　}

⑥　　　function guard() {

⑦  　　　console.log('防御している・・・');

　　　}

①④　　attack();

⑤⑧　　guard();

※赤字：処理順

関数定義：2つの関数が定義されている

呼び出さないとブロック内の処理を実行しない

関数の呼出し↓
・関数呼出しで関数定義部分に処理が移動
・関数定義部分の処理が終わると関数呼出し部分に処理が戻る

window.attack();　←本来の書き方　　

attack();

上記を見るとメソッドだが、ややこしくなるので、書かずに関数とする

②引数あり・戻り値なし関数

function attack(name) {

  console.log(name + 'は攻撃した！！');

}

function guard(name) {

  console.log(name + 'は防御している・・・');

}

function magic(name, magicName) {

  console.log(name + 'は' + magicName + 'を唱えた！');

}

attack('田中');　　　　　　←田中は攻撃した！！

guard('佐藤');　　　　　　 ←佐藤は防御している・・・

attack('鈴木');　　　　　　←鈴木は攻撃した！！

attack();　　　　　　　　　←undefinedは攻撃した！！

magic('田中', 'メラム');　 ←田中はメラムを唱えた！

関数定義：3つ関数を定義してる

attack関数↓

・引数を一つ受け取る関数

・受け取った引数はnameという名前で関数内処理に利用することができる

　※引数名は命名規則に則っていればなんでもok

関数呼び出し時に引数部分で値を定義に渡している

引数：関数外から関数内に値を渡す

function attack(name)

・ 引数はvarやlet等で宣言しないで使う少し特殊な変数

・14章スコープで出てくるが、引数が使用できる範囲は関数ブロック内のみ

 ・複数引数がある場合は左から　第1引数、第2引数・・・と呼ぶ

function guard(name) {

  var test = "aaa";

}

・関数内で変数を宣言することはできる

・この場合はvarを記述して宣言する

・この場合も使用できる範囲は関数ブロック内のみ

console.dir(window);

・関数以外の変数はすべてwindowオブジェクトのプロパティになる

console.log(name);

・nameという名前の変数はwindowオブジェクトに最初から存在するプロパティなので注意が必要（P266参照）

・関数外で引数や関数内宣言変数を使用するとエラーになる

③引数なし・戻り値あり関数

function enemy() {

  console.log('ダメージを受けた！！');

  var point;

  point = Math.random() * 100;　←0以上100未満の少数生成して代入

  point = Math.ceil(point);　←切り上げして0以上100以下の整数化

  console.log(point);

  return point;　

 

}

var life = 1000;

 

life -= enemy();

console.log(life);

return point;　戻り値の設定↓
・関数呼び出しもとに値を渡す
・戻り値：関数内から関数外に値を渡す

function recovery() {

  var num = Math.random();

  console.log(num);

  if (num > 0.8) {

    console.log('大回復した');

    return 500;

    関数の途中でreturn分を実行すると

    return文以降の関数内処理はすべて実行されない

  }

  console.log('回復した');

  return 200;

}

var life = 1000;

 

life += recovery();

console.log(life);

④引数あり・戻り値あり関数

function enemy(name) {

  var point;

  point = Math.random() * 100;

  point = Math.ceil(point);

  console.log(name + 'は' + point + 'ダメージを受けた！！');

  return point;

}

 

var playerList = [

  { name: '田中', life: 1000 },

  { name: '佐藤', life: 500 },

];

 

playerList[0].life -= enemy(playerList[0].name);

田中(playerList[0].name)は〇〇(point)ダメージを受けた！！

1000-〇〇

console.log(playerList[0].life); ←引かれたライフ

回復処理の定義部分

・第1引数(文字列型)：攻撃を受ける人の名前

・戻り値(数値型)：ダメージの受ける数値

//佐藤に三回ダメージを負わせて佐藤のライフをコンソールに表示

for (var i = 0; i < 3; i++) {

  playerList[1].life -= enemy(playerList[1].name);

}

console.log(playerList[1].life);

●複雑版

function recovery(name, magicID, name2) {

  var magicName;

  var point;

  switch (magicID) {

    case 1:

      magicName = 'ホイム';

      point = 100;

      break;

    case 2:

      magicName = 'ベホイム';

      point = 200;

      break;

    case 3:

      magicName = 'ベホムズン';

      point = 300;

      break;

  }

  console.log(name + 'は' + magicName + 'を唱えた！' 

　+ name2 + "のライフを" + point + '回復');

  return point;

}

 

var playerList = [

  { name: '田中', life: 1000 },

  { name: '佐藤', life: 500 },

];

 

//田中がベホイムを唱えて佐藤を回復させ佐藤のライフをコンソール表示

playerList[1].life += 

　recovery(playerList[0].name, 2, playerList[1].name);

console.log(playerList[1].life);

回復処理の定義部分

・第1引数(文字列型)：呪文を唱える人の名前

・第2引数(数値型)：呪文の番号

・第3引数(文字列型)：回復される人の名前

・戻り値(数値型)：回復させる数値

●関数は関数内で呼び出される場合とイベントから呼び出される場合がある

●JSはイベント駆動モデルと呼ばれる言語

・イベントとは：ユーザの操作

・イベント駆動とは：ユーザの操作からから関数が呼び出されること

例) onclick：クリックしたら

　  onmouseover：カーソルがのったら

　  onchange：入力値が変わったらイベントはon〇〇〇と表記される

 巻き上げ（ホイスティング）

●宣言の場合

console.log('変数宣言前:' + num2); ←変数宣言前:undefined

var num2 = 200;

console.log('変数宣言後:' + num2); ←変数宣言後:200

↓これと同じになってる

var num2;

console.log('変数宣言前:' + num2);

num2 = 200;

console.log('変数宣言後:' + num2);

●関数の場合

test(); ←関数内:100

function test() {

  var num1 = 100;

  console.log('関数内:' + num1);

}

・関数定義は巻き上げ（ホイスティング）対象

・関数呼出しより後に定義されていてもOK