【6：One day】時刻によってテキストとスタイルを変更｜JavaScript - Date(), DOM

f:id:seintoseiya:20150410215558p:plain
プロジェクトNo.6：One day

今回からJavaScriptも使って開発していきます。
JavaScriptを使用して、時刻によって朝昼晩夜の４パターンのテキストとスタイルを変更するというものを作成しました。

今回のポイントは以下の通り。

時間を取得する｜Date()関数及びgetHours()メソッド
html内のエレメントを取得する｜DOM（getElementById(), getElementsByTagName() ）
既に読み込まれたテキストを書き換える｜textContent
Javascriptでスタイルを変更｜element.style.property=value

ソースコード

JavaScript

	<script type="text/javascript">
	var d = new Date();
	var hours = d.getHours();
	var greeting = document.getElementById("greeting")
	var b = document.getElementsByTagName('body')[0];
	function changeTime(){
		if(6 < hours && hours <= 11){
			greeting.textContent="Good morning";
			b.style.backgroundImage='url(./images/morning.jpg)';
		}
		else if(11 < hours && hours <= 15){
			greeting.textContent="Good afternoon";
			b.style.backgroundImage='url(./images/noon.jpg)';
		}
		else if(15 < hours && hours <= 21){
			greeting.textContent="Good evening";
			b.style.backgroundImage='url(./images/evening.jpg)';
		}
		else if(21 < hours && hours <= 23 || hours < 5){
			greeting.textContent="Good night";
			b.style.backgroundImage='url(./images/night.jpg)';
			greeting.style.color='#FFFFFF'
		}
	}
	changeTime();
	</script>

時間を取得する｜Date()関数及びgetHours()メソッド

予め用意されているDate()関数を呼び出して、dateオブジェクトを作成して、getHours()で時間だけを取得します。

var d = new Date();
var hours = d.getHours();

取得される時間は0~23で、0:55に取得されるgetHours()の結果は0になります。

html内のエレメントを取得する｜DOM（getElementById(), getElementsByTagName() ）

DOM（Document Object Model）とは、htmlの各要素(idまたはタグ)にアクセスする仕組みのことです。

getElementById()

指定された ID を持つ要素を返します。
引用元：Document.getElementById() - Web API | MDN

getElementsByTagName()

与えられたタグ名を持つ要素のリストを返します。ルートノードを含めたドキュメント全体が検索されます。
引用元：Document.getElementsByTagName() - Web API | MDN

var greeting = document.getElementById("greeting")
var b = document.getElementsByTagName('body')[0];

既に読み込まれたテキストを書き換える｜textContent

既に読み込まれたテキストを書き換えるには、エレメントに対してinnerHTMLもしくはtextContentを使って値を代入（上書き）すればOKです。

document.getElementById("id名").textContent =
id名の付いたタグのテキストを書き換えます。書き換える文字列がテキストのみの場合に使用。
document.getElementById("id名").innerHTML =
id名の付いたタグのテキストを書き換えます。書き換える文字列にHTMLタグを含めることができます。
引用元：innerHTML,textContent－JavaScript入門

今回は書き換える文字列にHTMLタグが含まれていないのでtextContentを使用しました。

greeting.textContent="Good morning";

Javascriptでスタイルを変更｜element.style.property=value

既に読み込まれたスタイルを、Javascriptを使って以下の様に書き換える事ができます。

エレメント.style.スタイル要素=値;

b.style.backgroundImage='url(./images/night.jpg)';
greeting.style.color='#FFFFFF'

全ソースはこちら

github.com

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。