日付オブジェクトを生成する
dateオブジェクト
ビルトイン（もともと組み込まれ）されている
よって定義不要
newというキーワードを使って生成する
オブジェクトを生成すること：コンストラクト、コンストラクトするという。コンストラクトを呼び出すのがnewという演算子。
できたもの：インスタンスという
var myDay = new Date(); //date型のオブジェクトが生成
以下複数のサイトから引用：
>new 演算子は、コンストラクター関数を持ったユーザー定義のオブジェクトまたは組込みオブジェクトのインスタンスを生成します。 new のキーワードは以下のことを行います。
空の JavaScript オブジェクトを生成する
このオブジェクト (のコンストラクター) を他のオブジェクトへリンクする
ステップ 1 で新しく生成されたオブジェクトを this コンテキストとして渡す
関数が自分自身を返さない場合は this を返す
>ピヨピヨ時計の設計図を作りました。
この話における「設計図」が「クラス」です。
「ピヨピヨ時計」が「インスタンス」に相当します。
「設計図」と「ピヨピヨ時計」（と「ピヨ太君」もかな？）が「オブジェクト」です。
クラスは設計図です。
「そいつは、どんなモノだよ」が書いてあります。
インスタンスは設計図をもとにして実際に作った物です。
クラスを現実世界に召喚するとインスタンスになります。
オブジェクトは、クラスとかインスタンスとかの「モノ」を、まとめて、ふんわりと表現したものです。
設計図は「モノ」です。
実際に作った物も「モノ」です。
ということは、設計図も実際に作った物も「モノ」です。
クラス（設計図）もインスタンス（実際に作った物）もオブジェクト（モノ）です。
>注: JavaScript の Date オブジェクトは、JavaScript の Date をコンストラクタとして呼び出すことによってのみインスタンス化できます: 通常の関数として呼び出す (すなわち new 演算子を伴わない) と、Date オブジェクトではなく文字列が返ります。JavaScript の他のオブジェクト型とは異なり、JavaScript の Date オブジェクトにリテラル構文はありません。
>コンストラクタ（英：constructor）とは
オブジェクト指向のプログラミング言語で登場する用語のひとつ
であり
インスタンスを作成したタイミングで実行されるメソッドのこと
です。
もう少しざっくり書くと
クラスをnewした瞬間に実行される関数のこと
です。
月だけは0から始まるので+1をしないといけない
getDayとすると曜日を番号で取得するので注意
日付の取得はgetDate()
div ある程度のブロックを構造上の意味はないが名付けるときに使う
span要素 インライン要素。ある程度の短い場所を構造上の・・・（同上）
--->ここまで
test1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="test.css">
<title>日付オブジェクト</title>
<meta charset="UTF-8">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<p id="msg"></p>
<p>今日は、西暦<span id="y"></span>年
<span id="m"></span>月
<span id="d"></span>日です。</p>
<script src="test1.js"></script>
</body>
</html>
test1.js
$(function(){
//console.log('Hi');
var myDay = new Date();//date型のオブジェクトが生成
var year = myDay.getFullYear();//4桁の西暦を取得
var mon = myDay.getMonth()+1;//こともあろうに月は0からカウント
var day = myDay.getDate();//getDayとすると曜日を番号で取得するので注意
var hoge = myDay.getDay();//Dayは曜日を取得する
$('#y').text(year);
$('#m').text(mon);
$('#d').text(day);
console.log(hoge);
});
デジタル時計を作る
test1.htmlに追加
<!--デジタル時計-->
<div id="clock">
<span id="h"></span>：
<span id="m"></span>：
<span id="s"></span>
</div>
test1.jsに追加
//-------------------
//デジタル時計
//-------------------
var h = myDay.getHours();
var m = myDay.getMinutes();
var s = myDay.getSeconds();
$('#h').text(h);
$('#m').text(m);
$('#s').text(s);
test1.css
body{
background: #e2ffb8;
}
#clock{
font-size: 2rem;
background: #000;
color: #0F0;
width: 14rem;
font-weight: bold;
border: solid 3px #ccc;//ふちを丸く
}
そしてこれをまとめて関数にして1ｓごとに呼び出すようにする。
以下午後
