読者です 読者をやめる 読者になる 読者になる

one's way blog

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

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

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

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

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

  • 時間を取得する|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'

関連アプリ・書籍

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript 第6版

JavaScript 第6版

入門者のJavaScript (ブルーバックス)

入門者のJavaScript (ブルーバックス)