JavaScript　１７日目

function test() {
  console.log('関数内:' + num);
  // 関数内から関数外の変数numを参照可能
}

console.log('１回目の出力');
var num = 100;
// 関数外で宣言した変数は
// 関数内からも参照できる
// ★「グローバルスコープ」を持つ変数
//    どこからでも参照可能なグローバル変数と呼ぶ（一部例外あり）
console.log('関数外:' + num);
test();

function recoveryMagic(playerID, magicID) {
  // playerID:0
  // magicID:1
  console.log(
    playerList[playerID].name + 'は'
    + magicList[magicID].name + 'を唱えた！'
    + magicList[magicID].point + '回復');
  return magicList[magicID].point;
}
// グローバル変数：基本的にどこからでも参照可能
// 今回はrecoveryMagic関数内から参照している
// たくさんの関数が定義されても
// 関数内からいつでも利用することができる

// ★どこからでも参照出来て便利
// ただし、便利な反面バグを誘発する可能性を秘めている
// 最近の開発ではグローバル変数はなるべく使わないようになっている
var playerList = [
  { name: '田中', life: 1000 },
  { name: '佐藤', life: 500 },
];
var magicList = [
  { name: 'ホイミ', point: 100 },
  { name: 'ベホイミ', point: 200 },
  { name: 'ベホマズン', point: 300 },
];

console.log('１回目の出力');
playerList[0].life += recoveryMagic(0, 1);
console.log(playerList[0].life);

function test() {
  var num = 100;
  // 関数内で宣言された変数は
  // 関数内でのみ使える
  // ★「ローカルスコープ」をもつローカル変数
  console.log('関数内:' + num);
}

console.log('１回目の出力');
test();
console.log('関数外:' + num);
// 関数外から関数内の変数は参照できないためエラーとなる

// ★修正前★
function recoveryMagic(playerID, magicID) {
  var magicList = [
    { name: 'ホイミ', point: 100 },
    { name: 'ベホイミ', point: 200 },
    { name: 'ベホマズン', point: 300 },
    { name: 'メラ', point: -20 },
    { name: 'メラミ', point: -100 },
    { name: 'メラゾーマ', point: -300 },
  ];
  console.log(playerList[playerID].name + 'は'
    + magicList[magicID].name + 'を唱えた！'
    + magicList[magicID].point + '回復');
  return magicList[magicID].point;
}
function attackMagic(playerID, enemyID, magicID) {
  console.log(playerList[playerID].name + 'は'
    + magicList[magicID].name + 'を唱えた！'
    + enemyList[enemyID].name + 'へ'
    + -magicList[magicID].point + 'のダメージ！');
  return magicList[magicID].point;
}

var playerList = [
  { name: '田中', life: 1000 },
  { name: '佐藤', life: 500 },
];
var enemyList = [
  { name: 'スライム', life: 10 },
  { name: 'スライムキッド', life: 100 },
];

console.log('１回目の出力');
playerList[0].life += recoveryMagic(0, 1);
console.log(playerList[0].life);
enemyList[1].life += attackMagic(1, 1, 3);
console.log(enemyList[1].life);

function test() {
  var num = 200;
  console.log('関数内:' + num);
  // 関数内と関数外に同名変数がある場合、関数内変数を参照する
  // グローバル変数を参照するのは
  // 対象のローカル変数がない場合のみ
}

console.log('１回目の出力');
var num = 100;
test();
console.log('関数外:' + num);

console.log('１回目の出力');
if (true) {
  var num1 = 100;
  // if文のブロック内({}中カッコ内)で宣言
  console.log('ブロック内:' + num1);
}
console.log('ブロック外:' + num1);
// ブロック外でも出力される

console.log('２回目の出力');
if (true) {
  let num2 = 200;
  // if文のブロック内({}中カッコ内)で宣言
  // letは「ブロックスコープ」をもつ
  // ブロック内で宣言された変数は、ブロック外で使えない
  console.log('ブロック内:' + num2);
}
console.log('ブロック外:' + num2);

console.log('【追加】３回目の出力');
let num3 = 300;
console.log(num3);

let num3 = 500;
console.log(num3);
// letは同名変数を再宣言することができない
// varが同名変数の再宣言OK
// ★ただし、同名変数再宣言OKだと
// 既に存在している変数をうっかり再宣言して
// 別の用途で利用してしまう可能性があるので危険！
// letはそれをエラーを出すことで未然に防ぐことができる
// （letは2015年に新しく実装された）

console.log('【追加】４回目の出力');
if (true) {
  let num4 = 400;
  console.log(num4);
// ブロック内で変数num4は消滅
}
let num4 = 600;
// 消滅済みのnum4が再宣言OK
console.log(num4);

console.log('【追加】５回目の出力');
console.log(num5);
let num5 = 500;
console.log(num5);
// 巻き上げ（ホイスティング）はしているけど
// 宣言前に利用しようとするとエラーを出してくれる

console.log('１回目の出力');
const NUM = 100;
// constキーワードで変数を宣言すると
// 「定数」として扱われる
console.log(NUM);
NUM = 200;
// 定数は初期値を代入した後、
// 再代入による値の変更はできず、エラーになる
console.log(NUM);

// ◆定数名：暗黙のルール
// 定数名はすべて大文字で記述する（守らなくてもエラーにはならない）
// JSはこのルールを守ってない人が多いっぽい

// ◆定数の使いどころ
// 初期値を代入したら変更しない値に使用
// 不用意な再代入によるバグを防げる

function test() {
  num = 100;  // 未宣言変数
  // 未宣言変数は関数外で宣言したことと同じ
  // グローバル変数として扱われる
  console.log('関数内:' + num);
}

console.log('１回目の出力');
test();
console.log('関数外:' + num);

function test() {
  num = 100;  // 未宣言変数
  // 未宣言変数は関数外で宣言したことと同じ
  // グローバル変数として扱われる
  console.log('関数内:' + num);
}

console.log('１回目の出力');
console.log('関数外:' + num); // 関数呼び出し前だと出てこない
test();

console.log(window.alert('警告ダイアログ'));
// ◆alartメソッド
// 「OK」ボタンをもつダイアログ画面を表示
// 第1引数（任意）：ダイアログ画面に表示する文字
//     省略時は空文字
// 戻り値：undefined

console.log(window.confirm('確認ダイアログ'));
// ◆confirmメソッド
// 「OK」と「キャンンセル」ボタンをもつダイアログ画面を表示
// 第1引数（任意）：ダイアログ画面に表示する文字
//     省略時は空文字
// 戻り値：「OK」押下時「true」
//        「キャンセル」押下時「false」を返す

console.log(window.prompt('プロンプト'));
// ◆promptメソッド
// 入力欄をもつダイアログ画面を表示
// 第1引数（任意）：ダイアログ画面に表示する文字
//     省略時は空文字
// 戻り値：「OK」押下時は入力した文字列
//        「キャンセル」押下時はnullを返す

// ◆Windowインスタンスを利用する時は
// 「window.」を省略できる

var name = '名前';
console.log(name);  // ← VSCodeだとnameに打消し線が入る
// 変数nameはWindowインスタンスに
// 予め用意されているプロパティ（画面名管理用）
// データ型が文字列型で固定されている

// 再宣言することになるのでVSCodeでは警告を出してくる

console.log('１回目の出力');
var nameList = ['ゆず', 'びわ'];
console.log(nameList);
console.log(nameList.length);
for (var i = 0; i < nameList.length; i++) {
  console.log(nameList[i]);
}

console.log('２回目の出力');
var name = ['ゆず', 'びわ'];
// window.name（画面名管理用プロパティ）
// データ型は文字列固定
// 配列をtoStringメソッドで文字列化して代入
console.log(name);  // ゆず,びわ
console.log(name.length);  // 5
// 配列のlengthではなく、文字列のlengthを参照しているため
// 文字数の「5」が出力される
for (var i = 0; i < name.length; i++) {
  console.log(name[i]);
}
// 1文字ずつ出力されてしまう

// 関数定義：呼び出されないと実行しない
function test() {
  console.log('処理しました１');
}

// グローバル変数：どこからでもアクセス可能
var timerID1;
// イベントと紐づけて呼び出す関数
// 「setTimeout１を開始」ボタンクリック時に呼び出す
// 引数なし：()内に受け取り用変数がない
// 戻り値なし：returnの記述がない
function start1() {
  timerID1 = window.setTimeout(test, 3000);
  // ◆右辺の動き
  // WindowインスタンスのsetTimeoutメソッド呼び出し
  // ■setTimeoutメソッド
  // 一定時間経過後に処理をする
  // 第1引数：処理の内容
  //   処理名の後に()をつけない
  //   ()をつけると待機せずに即呼び出して実行される
  //   戻り値が第1引数に指定される
  // 第2引数：遅延させるミリ秒で指定
  // 戻り値：停止させるためのID番号
  console.log('timerID1:' + timerID1);
}
// 「setTimeout１を停止」ボタンクリック時に呼び出す
function stop1() {
  console.log('stop1実行');
  window.clearTimeout(timerID1);
  // <clearTimeout>遅延処理を途中で停止させる
  // 第1引数：停止用ID番号
  // 戻り値無：なし
}

var timerID1;
　　・
　　・
　　・
function stop1() {
  console.log('stop1実行');
  window.clearTimeout(timerID1);
  // <clearTimeout>遅延処理を途中で停止させる
  // 第1引数：停止用ID番号
  // 戻り値無：なし
}

var timerID2;
// 「setTimeout２を開始」ボタンクリック時に呼び出す
function start2() {
  timerID2 = window.setTimeout(function () {
    console.log('処理しました２');
  }, 3000);
  // 第1引数に直接呼び出す処理をfunctionキーワードを使って直に定義
  // 名前がない関数（無名関数）として定義
  // ◆無名関数の使いどころ
  //  ・遅延位置で呼び出しが確定
  //  ・イベントによる呼び出し（詳細はjQueryで確認）
  console.log('timerID2:' + timerID2);
}
// 「setTimeout２を停止」ボタンクリック時に呼び出す
function stop2() {
  console.log('stop2実行');
  window.clearTimeout(timerID2);
}


// ◆setTimeoutメソッドの基本形◆
setTimeout(function () {}, 遅延時間);
//   ↓ 改行してわかりやすくすると・・・ ↓
setTimeout(function () {
遅延後の処理
}, 遅延時間);

<div id="ad2" style="display: none;">
  無名関数で４秒後に表示する広告<br>
  遅延を停止させることはない
</div>

// ◆PPG作成時の手順
// 1.何をしたいのかを明確にする
//  無名関数で4秒後に広告(ad2)を表示
//  遅延を停止させることはない
// 2.「値」「条件」「処理」に分ける

setTimeout(function () {
  document.getElementById('ad2').style.display = 'block';
}, 4000);