◆20200811 授業メモ 関数（function）
授業内容
要約
○function（関数）
よく使う処理を定義し、呼び出すもの
・関数定義
function 関数名(引数) {
よく使う処理を記述
}
・関数の呼び出し方
関数名（引数）
〇引数なし・戻り値あり関数
戻り値の有無判断は returnがあるかないかで判断する
例）
function enemy() {
console.log('ダメージを受けた！！');
var point;
point = Math.random() * 100;
// MAth.random():０以上１未満の小数生成
point = Math.ceil(point);
// Math.ceil'():切り上げして整数化
console.log(point);
return point;
// 戻り値の設定
// 関数内から関数外に値を渡す。
処理順
| ③⑪⑮ | function attack(name) { | |||||||
| ④⑫⑯ | console.log(name + 'は攻撃した！！'); | |||||||
| } | ||||||||
| ⑦ | function guard(name) { | |||||||
| ⑧ | console.log(name + 'は防御している・・・'); | |||||||
| } | ||||||||
| ⑲ | function magic(name, magicName) { | |||||||
| ⑳ | console.log(name + 'は' + magicName + 'を唱えた！'); | |||||||
| } | ||||||||
| ① | console.log('１回目の出力'); | |||||||
| ②⑤ | attack('田中'); | |||||||
| ⑥⑨ | guard('佐藤'); | |||||||
| ⑩⑬ | attack('鈴木'); | |||||||
| ⑭⑰ | attack(); | |||||||
| ⑱㉑ | magic('田中', 'メラム'); | |||||||
JS・・・調べながら制作するのが主となる
〇関数（Ｆｕｎｃｔｉｏｎ）とは
関数は定義と呼出し
定義していなければ呼び出されない。
イメージするならキーボードのＦ１、Ｆ２、Ｆ３ボタン
・関数定義
function 関数名(引数) {
よく使う処理を記述
}
・関数の呼び出し方
関数名（引数）
--- 例題-- -
//関数定義：2つの関数が定義されている
// 呼び出さないとブロック内の処理を実行しない。
function attack() {
console.log('攻撃した！！');
}
function guard() {
console.log('防御している・・・');
}
console.log('１回目の出力');
// 関数呼び出し
// 関数呼び出しで関数定義部分に処理が移動
// 関数定義部分の呼び出しが終わると
// 関数呼び出し部分に処理が戻る
attack();
guard();
修正・変更が楽
--- 例題２-- -
・関数定義
function 関数定義（name）{
受け取った引数を自由に使える
}
・関数呼び出し
attack('田中')
// 関数定義 3つ
// attack関数
// 引数を1つ受け取る関数
// 受け取った引数はnameという名前で
// 関数内の処理に自由に利用することができる。
function attack(name) {
console.log(name + 'は攻撃した！！');
}
function guard(name) {
console.log(name + 'は防御している・・・');
}
function magic(name, magicName) {
var test = 'てすと'
// 関数内で変数を宣言できる
// この場合はvarを記述して宣言する
console.log(name + 'は' + magicName + 'を唱えた！');
}
// 引数はverを記述しない
// 引数が使用できる範囲は関数ブロック内のみ
// 複数引数がある場合は左から
// 第1引数、第2引数、第3引数・・・と呼ぶ
console.log('１回目の出力');
attack('田中');
// 関数呼出し時に引数部分で値を定義に渡している
// 引数：関数外から関数内を値を戻している
guard('佐藤');
attack('鈴木');
attack();
magic('田中', 'メラム');
--- 例題3-- -
console.log('問題12-2');
function attack(name) {
console.log(name + 'は攻撃した！！')
}
function guard(name) {
console.log(name + 'は防御している・・・')
}
function magic(name) {
console.log(name + 'はメラムを唱えた！')
}
function hearl(name) {
console.log(name + 'はホイムを唱えた！')
}
function skill(name, special, words) {
console.log(name + 'は特技' + special + 'を放った！' + words +
'!!'
);
}
attack('田中');
guard('佐藤');
attack('鈴木');
attack();
magic('田中');
guard('鈴木');
hearl('佐藤');
〇引数なし・戻り値あり関数
--- 例題3-- -
function enemy() {
console.log('ダメージを受けた！！');
var point;
point = Math.random() * 100;
// MAth.random():０以上１未満の小数生成
point = Math.ceil(point);
// Math.ceil'():切り上げして整数化
console.log(point);
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;
console.log('１回目の出力');
life -= enemy();
// 戻り値ありの関数を呼び出す場合は
// 戻り値を使って何らかの処理をすることが多い
console.log(life);
console.log('２回目の出力');
life += recovery();
console.log(life);
〇引数あり・戻り値あり関数の呼び出し（switch文の復習も兼ねる）
// 回復処理の定義部分
// 第1引数（文字列型）：呪文を唱える人の名前
// 第2引数 呪文の番号
// 戻り値（数値型）:point
function enemy(name) {
var point;
point = Math.random() * 100;
point = Math.ceil(point);
console.log(name + 'は' + point + 'ダメージを受けた！！');
return point;
}
function recovery(name, magicID) {
var magicName;
var point;
switch (magicID) {
case 1:
magicName = 'ホイム';
point = 100;
break;
case 2:
point = 200;
break;
case 3:
magicName = 'ベホムズン';
point = 300;
break;
}
console.log(name + 'は' + magicName + 'を唱えた！' + point + '回復');
return point;
}
var playerList = [
{ name: '田中', life: 1000 },
{ name: '佐藤', life: 500 },
];
// console.log('１回目の出力');
// playerList[0].life -= enemy(playerList[0].name);
// console.log(playerList[0].life);
// console.log('２回目の出力');
// playerList[0].life += recovery(playerList[0].name, 1);
// console.log(playerList[0].life);
console.log('問題12-4③'); 佐藤が３回ダメージを受けた結果をconsole上に表示
var playerNum = 0
for (var i = 0; i < 3; i++) {
playerList[playerNum].life -= enemy(playerList[playerNum].name);
console.log(playerList[playerNum].life);
}
// console.log('ダメージ1回目');
// playerList[1].life -= enemy(playerList[1].name);
// console.log(playerList[1].life);
// console.log('ダメージ2回目');
// playerList[1].life -= enemy(playerList[1].name);
// console.log(playerList[1].life);
// console.log('ダメージ3回目');
// playerList[1].life -= enemy(playerList[1].name);
// console.log(playerList[1].life);
playerList[1].life += recovery(playerList[playerNum].name, 2);
console.log(playerList[playerNum].life);
console.log('問題12-4⑤'); 佐藤がベホムズンを唱えた結果
console.log('ベホムズン');
playerList[playerNum].life += recovery(playerList[playerNum].name, 3);
console.log(playerList[playerNum].life);
// JSはイベント駆動モデルと呼ばれる言語
// 関数は関数名で呼び出される場合とイベントから呼び出される場合がある。
// イベントとはユーザの操作
// イベント駆動とは
// ユーザの操作から関数が呼び出される。
// Ex)onclick=クリックしたら
// Ex) onmouseover = カーソルがのったら
// Ex) onchange = 入力値が変わったら
// イベントはon〇〇〇と表記される。
〇巻き上げ（ホイスティング）
--- 例題-- -
console.log('１回目の出力');
test();
console.log('２回目の出力');
console.log('変数宣言前:' + num2);
var num2 = 200;
console.log('変数宣言後:' + num2);
console.log('３回目の出力');
console.log('変数宣言無し:' + num3);
function test() {
var num1 = 100;
console.log('関数内:' + num1);
}
// 関数定義は巻き上げ（ホイスティング）対象
// 関数呼び出しより後に定義されていてもおk
