20200804 授業メモ dateオブジェクト
〇Dateオブジェクト 前日の続き
--- 例題-- -
var date2 = new Date(2018, 0, 1, 12, 0);
console.log('問題12-6');
console.log('問題12-6①');
①date2の日付を2010 / 12 / 24 23時59分に変更する方法
console.log(date2.setFullYear(2010));
console.log(date2.setMonth(11));
console.log(date2.setDate(24));
console.log(date2.setHours(23));
console.log(date2.setMinutes(59));
console.log(date2);
//別解 console.log(date2.setFullYear(2010,11,24)
//+date2.setHours(23, 59));
// setFullYearメソッドは年だけではなく必要であれば時と分も同時に変更することができる
// setHoursを使えば時だけではなく秒やミリ秒も変更できる。
// 戻り値のタイムスタンプは変更後2回分押されているので正しいタイムスタンプではない
②birthの年を2020に変更して、その日の曜日をコンソール上で確認する方法
var birth = new Date('1990/12/15');
var dayList = [
'日',
'月',
'火',
'水',
'木',
'金',
'土',
];
console.log('問題12-6③');
// birth.setFullYear(2020);
//setFullYear(～)で（）内の値に変更
別解 var thisYear = today.getFullYear();
// todayが管理するDateインスタンスはPG実行時の日時が管理されている。
// このインスタンスの年が実行時の年んも数値になる。
console.log('私の誕生日は' + dayList[birth.getDay()] + '曜日です!!!');
// dayList[birth.getDay()]でbirthで設定した日付でdayList（曜日）を呼び出す。
//この場合birth.setFullYear(2020)で2020/12/15に変更しているので、
// 変更後の日付のものを呼び出す。
別解②
var thisYear = today.getFullYear();
console.log('thisYear:' + thisYear);
console.log('私の「' + thisYear + '年」の誕生日は' + dayList[birth.getDay()] + '曜日です!!!');
console.log(birth);
console.log('一括で処理する');
birth.setFullYear(today.getFullYear());
//1、birth.setFullYear()を実行しようとするが引数が確定していないので保留
//2、引数を確定させる。
console.log(
'私の「' + thisYear + '年」の誕生日は' + dayList[birth.getDay()] + '曜日です!!!'
)
console.log('４回目の出力');
console.log(date1.toString());
console.log(date1);
//アドレスを管理している変数をコンソールにログ
// として出力しようとすると勝手にtoStringメソッドが呼び出されて文字列に変換されている。
// toStringメソッドはすべてのオブジェクトに実装されているメソッド。
// 文字列型に型変換するときに使用されるメソッド。
〇Dateオブジェクト 2
--- 例題-- -
console.log('１回目の出力');
var date1 = new Date(2018, 6, 15);
//7月15日
console.log(date1.toLocaleDateString());
//よく月になるようにDateインスタンスを変更
date1.setMonth(date1.getMonth() + 1);
//スタック処理
// date1.setMonthメソッドを実行しようとするが
//引数が確定していないので保留
// 2.引数を確定させるため加算させたいが
// 左辺が確定していないので保留
// 3.date1.getMonth()を実行して戻り値→今回の場合戻り値は「6」
// 4.保留になっていた加算の左辺が確定して
// 「6+1」の加算が実行されて「7」になる
// 5.保留になっていたdate1.setMonthメソッドの
// 引数を「7」で実行する
// date1.setMonth（7）
// 7月から8月に変更される（翌月に変更される）
console.log(date1.toLocaleDateString());
date1.setDate(date1.getDate() - 1);
console.log(date1.toLocaleDateString());
console.log('２回目の出力');
var date2 = new Date();
// var date2 = new Date('2020/2/20');
console.log(date2.toLocaleDateString());
date2.setMonth(date2.getMonth() + 1);
// 8月から9月に変更
console.log(date2.toLocaleDateString());
date2.setDate(0);
// 前月最終日に変更：8月最終日＝31日に変更
console.log(date2.getDate());
// ここ大事
console.log('３回目の出力');
var code = (date2.getMonth() + 1) + '月から選択：';
// 「date2.getMonth() + 1」経過月+1で
// 月に変更して文字列を作成
// 例）経過月「7」の場合は「8月から選択：」
code += '<select name="date">\n';
for (var i = 1; i <= date2.getDate(); i++)
// i <= date2.getDate();→date2.setDate(0);＝31日と設定されているので
// 1～31までの範囲という意味になる
{
}
code += '</select>\n';
console.log(code);
document.getElementById('display1').innerHTML = code;
おさらい問題
HTML
< html lang = "ja" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dateオブジェクト</title>
</head>
<body>
<div class="box">
<div class="inner">
<select id="year" onchange="displayDate();">
<!--onchange=変更があった時に関数処理1が行われる。-->
</select>
<select id="month" onchange="displayDate();">
</select>
<select id="date">
</select>
</div>
</div>
<script src="js/script.js"></script>
</body>
</>
JS
// 年、もしくは月が変更されたときに呼び出される関数。
function displayDate() {
console.log('日付表示');
console.log(year);
// ユーザが選択した「年」を変数yearに代入
console.log(month);
// ユーザが選択した「月」を変数monthに代入
var date = new Date(year, month - 1);
// new Date(year, month-1);←なんで-1にすんの？
// →dateインスタンスは0＝1月、1＝2月・・数字とずれて月が表示される。
// ユーザが選択の「年月」でdateインスタンスを作成
//→選択された年月どおりに表示させるため。
//console.log(date.toLocaleDateString() );
// 月を選択すると月初（例：3/1）がコンソール上に表示される
date.setMonth(date.getMonth() + 1);
date.setDate(0);
// 選択した月の最終日を設定
// console.log(date);
var code = '';
for (var i = 1; i <= date.getDate(); i++) {
}
document.getElementById('date').innerHTML = code;
}
〇日付の差分
console.log('１回目の出力');
var today = new Date();
// ↑PCの最新の日付と時間
// var today = new Date('2018/12/20 12:00:00');
// var newYear = new Date(today.getFullYear() + 1, 0, 1);
var newYear = new Date(today.getFullYear(), 11, 15);
// イベント当日の日時「2021年1月1日」
// 2021年＝today.getFullYear() + 1 注意
console.log(today.toLocaleDateString());
console.log(newYear.toLocaleDateString());
var diff = (newYear.getTime() - today.getTime());
console.log('翌年元日' + newYear.getTime());
console.log('現在日時' + today.getTime());
console.log('経過ミリ秒差分' + diff);
console.log('1日分のミリ秒' + 1000 * 60 * 60 * 24);
// 1000mm秒*60＝1分 1分*60＝60分 60分*24＝24時間
diff = diff / (1000 * 60 * 60 * 24)
// diff=diff/24時間
console.log('日付差分' + diff);
diff = Math.ceil(diff);
console.log('日付差分切り上げ' + diff);
document.getElementById('display1').innerHTML
// = '来年まであと' + diff + '日';
// = 'イベントまであと' + diff + '日';
= '誕生日まであと' + diff + '日';
---練習問題---
console.log('問１');
console.log('１回目の出力');
var today = new Date();
// ↑PCの最新の日付と時間
// var today = new Date('2018/12/20 12:00:00');
// var newYear = new Date(today.getFullYear() + 1, 0, 1);
var newYear = new Date(today.getFullYear(), 11, 15);
// イベント当日の日時「2021年1月1日」
// 2021年＝today.getFullYear() + 1 注意
console.log(today.toLocaleDateString());
console.log(newYear.toLocaleDateString());
var diff = (newYear.getTime() - today.getTime());
console.log('翌年元日' + newYear.getTime());
console.log('現在日時' + today.getTime());
console.log('経過ミリ秒差分' + diff);
console.log('1日分のミリ秒' + 1000 * 60 * 60 * 24);
// 1000mm秒*60＝1分 1分*60＝60分 60分*24＝24時間
diff = diff / (1000 * 60 * 60 * 24)
// diff=diff/24時間
console.log('日付差分' + diff);
diff = Math.ceil(diff);
console.log('日付差分切り上げ' + diff);
document.getElementById('display1').innerHTML
// = '来年まであと' + diff + '日';
// = 'イベントまであと' + diff + '日';
= '誕生日まであと' + diff + '日';
console.log('問２');
var today = new Date();
// ↑PCの最新の日付と時間
// var today = new Date('2018/12/20 12:00:00');
// var newYear = new Date(today.getFullYear() + 1, 0, 1);
var newYear = new Date(today.getFullYear() + 1, 11, 15);
// イベント当日の日時「2021年1月1日」
// 2021年＝today.getFullYear() + 1 注意
console.log(today.toLocaleDateString());
console.log(newYear.toLocaleDateString());
var diff = (newYear.getTime() - today.getTime());
console.log('翌年元日' + newYear.getTime());
console.log('現在日時' + today.getTime());
console.log('経過ミリ秒差分' + diff);
console.log('1日分のミリ秒' + 1000 * 60 * 60 * 24);
// 1000mm秒*60＝1分 1分*60＝60分 60分*24＝24時間
diff = diff / (1000 * 60 * 60 * 24)
// diff=diff/24時間
console.log('日付差分' + diff);
diff = Math.ceil(diff);
console.log('日付差分切り上げ' + diff);
document.getElementById('display2').innerHTML
// = '来年まであと' + diff + '日';
// = 'イベントまであと' + diff + '日';
= '誕生日まであと' + diff + '日';
console.log('問３');
var today = new Date();
// ↑PCの最新の日付と時間
// var today = new Date('2018/12/20 12:00:00');
// var newYear = new Date(today.getFullYear() + 1, 0, 1);
var newYear = new Date(today.getFullYear(), 7, 4);
// イベント当日の日時「2021年1月1日」
// 2021年＝today.getFullYea8r() + 1 注意
console.log(today.toLocaleDateString());
console.log(newYear.toLocaleDateString());
var diff = (newYear.getTime() - today.getTime());
console.log('翌年元日' + newYear.getTime());
console.log('現在日時' + today.getTime());
console.log('経過ミリ秒差分' + diff);
console.log('1日分のミリ秒' + 1000 * 60 * 60 * 24);
// 1000mm秒*60＝1分 1分*60＝60分 60分*24＝24時間
diff = diff / (1000 * 60 * 60 * 24)
// diff=diff/24時間
console.log('日付差分' + diff);
diff = Math.ceil(diff);
console.log('日付差分切り上げ' + diff);
if (diff == 0)
{
document.getElementById('display3').innerHTML
= '誕生日おめっとさん( ﾟДﾟ)';
} else {
document.getElementById('display3').innerHTML
= '誕生日まであと' + diff + '日';
};
