JavaScript　１２日目

console.log('２回目の出力');
// 「()丸カッコ」は処理の呼び出し
// Dateインスタンスである「date1」内のメソッドを呼び出す
console.log(date1.getFullYear()); 
  // getFullYearメソッドを呼び出す → 「年」だけを取得できる・・・「2018」 
console.log(date1.getMonth());
　// 取得するのは「経過月：0(1月)～11(12月)」なので注意・・・「0（1月）」
console.log(date1.getDate());  // 日
console.log(date1.getDay());  // 曜日
console.log(date1.getTime());  // タイムスタンプ

console.log('◆問題：阿部寛の誕生日');
// 阿部寛の誕生日を元にDateインスタンスを作成する
var abeBd = new Date('1964/ 6/ 22');

// メソッドを使って曜日番号をコンソール表示
console.log(abeBd.getDay());

console.log(abeBd);
var day = [
  '日',
  '月',
  '火',
  '水',
  '木',
  '金',
  '土',
  '日',
]

// console.log('阿部寛は' + day[abeBd.getDay()] + '曜日生まれ');
console.log('阿部寛は'
  + (abeBd.getMonth() + 1) + '月'
  + abeBd.getDate() + '日'
  + day[abeBd.getDay()] + '曜日生まれ');

console.log('３回目の出力');
console.log(date1.setFullYear(2000));
// 「946695600000」を出力
// 引数で指定した「2000」で年を修正
// 戻り値で(メソッド呼び出し部分に戻る値)は修正後のタイムスタンプが出力
// ※タイムスタンプ
// 1970年1月1日0時0分からの経過ミリ秒
console.log(date1);

console.log('【問題】12-6');
console.log('◆2010年12月24日23時59分');
// date2.setFullYear(2010, 11, 24, 0, 23, 59,)
date2.setFullYear(2010);
date2.setMonth(11);
date2.setDate(24);
date2.setHours(23);
date2.setMinutes(59);
console.log(date2);

// ◆解答例２
date2.setFullYear(2010, 11, 24);
// 第1引数：年（必須）
// 第2引数：経過月（省略可）
// 第3引数：日（省略可）
date2.setHours(23,59)
// 第1引数：時（必須）
// 第2引数：分（省略可）
// 第3引数：秒（省略可）
// 第4引数：ミリ秒（省略可）

console.log('◆阿部寛の誕生日は今年・・・');
abeBd.setFullYear(today.getFullYear()) 
// プログラム実行時の都市を変数thisyea 
console.log(day[abeBd.getDay()] + '曜日');

console.log('４回目の出力');
console.log(date1);
console.log(date1.toString());
// ↑ 上記2つは同じ出力結果
// 参照型の変数(オブジェクトや配列)を管理する変数を
// コンソール出力する際は
// 文字列変換メソッド「toString()」が呼び出されている
// 「toString()」は参照先データを
// 既定のフォーマットで文字列かする

console.log(date1.toLocaleString());

console.log('１回目の出力');
var date1 = new Date(2018, 6, 15);
console.log(date1.toLocaleDateString()); 
// date1の日付 → 2018/7/15 コンソール出力
// 「Locale」付きなのでローカライズされて表示される
date1.setMonth(date1.getMonth() + 1);
// date1の月を取得して「1月」足している → 2018/8/15
// ◆翌月変更処理
// 【処理の順番】
// 1.deta1.setMonth()を実行しようとするが
//   引数が確定していないので一旦保留
// 2.引数部分「date1.getMonth() + 1」を実行しようとするが
//   左辺が確定していない
// 3.date1.getMonth()を呼び出す
//   経過月「6」がかえってくる
//   deta1.getMonth() + 1
// 4.左辺が確定したので足し算 → 6 + 1 ＝ 7
// 5.保留していた「1」を実行
//   date1.setMonth(7)
// 基準月を取得して「+1」すると翌月に変更

console.log(date1.toLocaleDateString());
// 変更された内容 ↑ をコンソール出力
date1.setDate(date1.getDate() - 1);
// date1の日にちを取得して「1日」引いている → 2018/8/14 
// ◆前日変更処理　：確定順
// date1.getDate() → 15
// 15 - 1 = 14
// date1.setDate(14)
// 日付が「15」から「14」に変更
// 　⇒基準日から「-1」することで前日に変更される
console.log(date1.toLocaleDateString());
// 変更された内容 ↑ をコンソール出力

console.log('２回目の出力');
// 該当月の最終日を取得したい
var date2 = new Date('2024/2/15');
// var date2 = new Date('2018/8/20');
console.log(date2.toLocaleDateString());
// 「2024/2/15」を出力
date2.setMonth(date2.getMonth() + 1);
// 翌月に変更
console.log(date2.toLocaleDateString());
// 「2024/3/15」を出力
date2.setDate(0);
// 日付に「0」を設定することで
// 「1日」の前の日「前月の最終日」に変更される
console.log(date2.toLocaleDateString());
// 「2024/2/29」（確認用）
console.log(date2.getDate());
// 日付のみ取得して最終日の数値を得る

console.log('３回目の出力');
// 変数codeにHTMLコードを貯めていく
var code = (date2.getMonth() + 1) + '月から選択：';
// 宣言と同時に「〇月から選択：」を代入
// 変更する部分である月の数字は
// 「経過月」を取得して「+1」（経過月+1=月）
code += '<select name="date">\n';
// for文の条件：date2.getDate()  ← 先ほど取得済みの「該当月の最終日」
// 最終日の数値を繰返し条件に「<=」で設定
for (var i = 1; i <= date2.getDate(); i++) {
  code += '<option value="' + i + '">' + i + '日</option>\n';
}
code += '</select>\n';

console.log(code);
document.getElementById('display1').innerHTML = code;

/*
◆最終的に画面に表示するコード◆
〇月から選択：
<select name="date">
  <option value="1">1日</option>
  <option value="2">2日</option>
           ：
  <option value="〇">〇日</option>
</select>
*/

// ★内容が変わる部分には変数や処理を使用する
// ★内容が変わらない部分は文字列を使用する