Dateオブジェクト

JavaScriptに用意されている組み込みオブジェクト
Dateコンストラクタを引数なしで実行すると、現在の日付時刻を管理する「Dateオブジェクト」が生成される

現在の日付時刻を管理するDateオブジェクトを生成

指定した時点で日付時刻を管理するDateオブジェクトを生成するには、年（西暦4桁）、月、日、時間、分、秒をそれぞれ別々の整数値として引渡します
時間は24時間制で指定
月は1月は「0」、2月は「1」と、月の数字から１を引いて指定する

var now = new Date();

たとえば、2012年７月９日15時55分0秒のDateオブジェクトを生成するには

var theDate = new Date(2012, 06, 09, 15, 55, 0);

たとえば、2012年７月９日午前0時のDateオブジェクトを生成するには

var myDate = new Date(2012, 06, 09);

Dateオブジェクトのメソッド

いったんDateオブジェクトを生成すると、あらかじめ用意されている日付時刻操作のメソッドが使用できる

たとえば、「time1」「time2」の２つのDateオブジェクトがあるとき、その時間差をミリ秒単位で求め、変数「theDiff」に格納する

theDiff = time1.getTime() - time2.getTime();

現在の日付日時を管理するDateオブジェクトを生成する

Dateオブジェクトをそのまま document.write()メソッドに渡すと、toString()という「オブジェクトのデータを文字列形式に変換するメソッド」が自動的に呼び出される

<script>
<!--
var now;
now = new Date();
document.write('<h1>', now, '</h1>');
//-->
</script>

平日・休日を区別して表示

DateオブジェクトのgetDay()メソッドを使う
日曜日「0」、月曜日「1」、火曜日「2」、水曜日「3」、木曜日「4」、金曜日「5」、土曜日「6」

　wday.jpg　　　　hday.jpg
　

<script>
  var d = new Date();
  var day = d.getDay();
  if(day === 0) {
     document.write( '<img src="img/hday.jpg">' );
  } else {
     document.write( '<img src="img/wday.jpg">' );
  }
</script>

条件が成り立つ場合の処理とそれ以外の処理

if( 日付が日曜日である ) {
　　休日の画像を表示する
} else {
　　平日の画像を表示する
}

日時によって違う処理をする

状況に応じて処理をする

午前と午後

12時前か後かを判別

<script>
  var d = new Date();
  var h = d.getHours();
  
  if(h <= 12) {
     document.write( 'AM' );
  } else {
     document.write( 'PM' );
  }
</script>

時間によってメッセージを変更する

<script>
  var today;
  var hour;
  today = new Date();
  hour = today.getHours();
  
  if (hour < 12) {
    document.write( '<img src="img/morning.jpg">' );
  } else if (hour < 18) {
    document.write( '<img src="img/afternoon.jpg">' );
  } else if (hour < 24) {
    document.write( '<img src="img/evening.jpg">' );
  }
</script>

土日と平日

switch文の場合
if〜else文の場合

<script>
  var d = new Date();
  var day = d.getDay();
    console.log(day);
  switch(day){
     case 0:
     case 6: 
        document.write( '<img src="img/hday.jpg">' );
        break;
     default:
        document.write( '<img src="img/wday.jpg">' );
  }
</script>

<script>
  var d = new Date();
  var day = d.getDay();
    console.log(day);
  if(day === 0){
        document.write( '<img src="img/hday.jpg">' );
  } else {
        document.write( '<img src="img/wday.jpg">' );
  }
</script>

オープンとクローズを区別して表示

<script>
  var d = new Date();
  var h = d.getHours();
  
  if(h >= 9 && h < 17) {
     document.writeln( 'OPEN' );
  } else {
     document.writeln( 'CLOSED' );
  }
</script>

Mathオブジェクト

Mathオブジェクトは、さまざまな計算機能を提供するオブジェクトです

メソッド名	説明
ceil	小数点以下の値を切り上げた結果を返す
floor	小数点以下の値を切り捨てた結果を返す
round	小数点以下の値を四捨五入した結果を返す

《Mathオブジェクトのメソッド》

Math . メソッド名（数値）;

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>さいころの目をボタンで変更</title>
<script>
function dice() {
var r = Math.floor(Math.random()*6 + 1);
console.log(r);

document.dimg.src= 'img/d' + r + '.jpg';
}
</script>
</head>
<body>
<p><img src="img/d1.jpg" name="dimg"></p>
<p><button onclick="dice()">サイコロを振ってみる</button></p>
</body>
</html>

画像名が、整数化した数値で取得できない場合

「one.jpg」「two.jpg」「three.jpg」「four.jpg」「five.jpg」「six.jpg」とした場合を記述しなさい

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>さいころの目</title>
<script>
var sai = new Array('one.jpg', 'two.jpg', 'three.jpg', 'four.jpg', 'five.jpg', 'six.jpg');

function dice() {
var r = Math.floor(Math.random()*sai.length);
console.log(r);

document.dimg.src= 'img/' + sai[r];
console.log(sai[r]);
}
</script>
</head>
<body>
<p><img src="img/one.jpg" name="dimg" id="dimg"></p>
<p><button onclick="dice()">サイコロを振ってみる</button></p>
</body>
</html>

偶数の目だけを表示

<script>
for(var i=1; i<=6; i++) {
  if(i % 2 === 0) {
    document.write( '<img src="img/d' + i + '.jpg">' );
  }
}
</script>

奇数の目だけを表示

<script>
for(var i=1; i<=6; i++) {
  if(i % 2 === 1) {
    document.write( '<img src="img/d' + i + '.jpg">' );
  }
}
</script>

配列を使って見出しを表示

<script>
  var str = [ 'Welcome', 'Hello', 'How are you?' ];
  var r = Math.floor(Math.random() * 3);
  document.write(str[r]);
</script>