くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[JavaScript]Dateオブジェクト

==現在の日時を表示させるDateオブジェクト==

  d = new Date ( ) ;
=======================

主なメソッド

スクリプトの中では、それぞれ「Dateオブジェクト名.getFullYear」という形で表します。

.getFullYear ( ) 西暦を表す4桁の数字

.getMonth ( ) 月を表す。0から11まで
       0が1月、1が2月、2が3月・・・11が12月を表す

.getDate ( )  日にちを表す。1から31まで。

.getDay ( )  曜日を表す。0から6まで。
       戻り値は0が日曜日、1が月曜日、・・・6が土曜日

 

※ .getMonthと.getDayは0から始まる。一巡してまた同じ月・曜日から始まる為
ループになっているため。

.getHours( ) 時を表す。0〜23

.getMinutes( ) 分を表す。0〜59

.getSeconds( ) 秒を表す。0〜59

 

 

【演習1】現在の時間を表示させる

<script>
var d = new Date( );
document.write ( d );
</script>

 

<表示結果>

f:id:pleasure10501:20150402171138p:plain

 

 

【演習2】現在の日時を「xxxx年xx月xx日」という形で表示させる

<script>
    var today = new Date();
    var d = '今日は' + today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + today.getDate() + '日です。';
  document.write( d );
</script>

 

*ポイント
実際の月を表示したい時は、.getMonth の戻り値に+1をします

 

<表示結果>

f:id:pleasure10501:20150402173546p:plain

 

【演習3】今日の曜日を表示させる

.getDayの戻り値は数字なので、その数字を文字として表示するように工夫することが必要です

 

<script>
var d = new Date ; //まずDate宣言
var week =['日', '月', '火', '水', '木', '金', '土', ];  // 連想配列
var day = d.getDay() // 今日の曜日番号をdayに代入
document.write ( '<h3>' + '今日は' + week[day] + '曜日です' + '</h3>' ) ;
</script>

 

解説

  1. 連想配列weekの宣言により、各曜日に番号がふられる
  2. var day = d.getDay() により、今日の曜日番号(木曜日は4)がdayに代入
  3. week[ day ]は、連想配列weekの [ day ] すなわち「木」となる

<表示結果>

f:id:pleasure10501:20150402180004p:plain