JavaScriptオブジェクト／サイト作成の便利ツール

授業 JavaScript サイト制作

JavaScript

Dataオブジェクト
  • Dateオブジェクトを生成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オブジェクトを生成する</title>
<script>
var now;
now=new Date();
document.write('<h1>',now.toString(),'<h1>');
</script>
</body>
</html>
  • 指定した日時のDateオブジェクトを生成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>指定した日時のオブジェクトを生成する</title>
<script>
var aDay;
aDay=new Date(2013,0,11,15,55,50);　//2013年１月11日15時55分50秒　※月は0からカウント開始
document.write('<h1>',aDay.toString(),'<h1>');
</script>
</body>
</html>
  • 日付を「xxxx年xx月xx日」の形式で表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Dateオブジェクトのメソッドを使う</title>
</head>
<script> //日付を「xxxx年xx月xx日」の形式で表示する
var now,date;
now=new Date();

date=now.getFullYear()+'年'
  +(now.getMonth()+1)+'月'
	+now.getDate()+'日';
document.write('<h1>',date,'<h1>');
</script>
</body>
</html>
  • getTimeメソッドで日数の差を求める
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Dateオブジェクトのメソッドを使う</title>
</head>
<script> //getTimeメソッドで日数の差を求める
var now,date;
now=new Date();

var gantan,days,diff;
gantan=new Date(now.getFullYear()+1,0,1);
//来年の１月１日を表すDateオブジェクトを生成、今年の年を求め1を足して来年を設定、０は１月、１日

diff=gantan.getTime()-now.getTime();

days=Math.ceil(diff/(24*60*60*1000));

document.write('<h1>今年の残りの日数',days,'<h1>');
</script>
</body>
</html>
  • 現在時刻を表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>現在時刻を表示する</title>
</head>
<script>
var now,hour,minute;
now=new Date();
hour=now.getHours();
minute=now.getMinutes();
document.write('<h1>');
document.write('現在時刻');
document.write(hour,'時',minute,'分');
document.write('</h1>');
</script>
</body>
</html>
  • 時間によってメッセージを変更する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>時間によってメッセージを変更する</title>
</head>
<script>
var today;
var hour;
today=new Date();
hour=today.getHours();

	document.write('<h1>');
	if(hour<12) {
		document.write('おはようございます');
	}else if(hour<18) {
		document.write('こんにちは');
	}else if(hour<24) {
		document.write('こんばんは');
	}
	document.write('</h1>');
	
</script>
</body>
</html>
Mathオブジェクト
  • 最大値（max）、最小値（min）を戻すメソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mathオブジェクトのメソッド</title>
</head>
<script>
var num1=10;
var num2=15;
var num3=16;
document.write('<h1>',Math.max(num1,num2,num3),'</h1>');
document.write('<h1>',Math.min(num1,num2,num3),'</h1>');
</script>
</body>
</html>
  • randomメソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mathオブジェクトのメソッド</title>
</head>
<script>
var random=Math.random();

if(random<0.33) {
	document.write('<h1>','大吉','</h1>');
}else if(random<0.66) {
	document.write('<h1>','吉','</h1>');
}else {
	document.write('<h1>','凶','</h1>');
}
</script>
</body>
</html>

webサイト　お役立ちツール

　　グリッド

　　構成をテンプレートで利用できる

　　オンラインでコードのプレビューを確認することができる