配列の添字を活用する

曜日を日本語で表示する

  • 曜日の文字列は、「days配列」に格納しておきます
<script>
var days = new Array('日', '月' ,'火', '水', '木', '金', '土');
</script>
Dateオブジェクトを作成
  • 曜日は、getDayメソッドを利用する1
  • getDayメソッドの戻り値は「日曜日〜土曜日」を「0〜6」とする数値です
  • この数値をdays配列の添字に指定することで、日本語の曜日を求めることができます


今日の曜日を表示

  • 配列を生成する
  • 曜日を表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>曜日を日本語で表示する</title>
</head>
<body>
<script>
var days = new Array('日', '月' ,'火', '水', '木', '金', '土');
var date = new Date();
var day = days[date.getDay()];
document.write('<h1>今日は' + day + '曜日</h1>');
</script>
</body>
</html>
  • 引数なしでDateコンストラクタを実行すると、現在の日付時刻をもつDateオブジェクトが生成されます
  • getDayメソッドの戻り値を添字にして配列daysから曜日を取り出し、変数dayに格納します


１年後の曜日を表示

  • 変数dateの日時を１年後に設定し、getDayメソッドの戻り値を配列daysに与えて曜日を表示します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>曜日を日本語で表示する</title>
</head>
<body>
<script>
var days = new Array('日', '月' ,'火', '水', '木', '金', '土');
var date = new Date();

date.setFullYear(date.getFullYear() + 1);
document.write('<h1>一年後は' + days[date.getDay()] + '曜日</h1>');
</script>
</body>
</html>

配列の活用

メソッドの戻り値を配列の添字に利用する
  • 配列の添字には、変数やメソッドの戻り値などを指定することもできます
<script>
var days = new Array('日', '月' ,'火', '水', '木', '金', '土');
</script>

最初の要素である「日」の添字は「0」となり、「days[0]」としてアクセスできます。

  • 配列の添字に、DateオブジェクトのgetDayメソッドの戻り値を指定します
<script>
var day = days[date.getDay()];
</script>

この場合、getDayメソッドの戻り値は、日曜日を「0」土曜日を「6」とする「0〜6」の間の数値になります。
戻り値の数値と配列の添字が一致するようにしています。

課題

  • 「今日は〜日で、〜曜日です。」と表示させなさい
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>曜日を日本語で表示する</title>
</head>
<body>
<script>
var days = new Array('日', '月' ,'火', '水', '木', '金', '土');
var date = new Date();
var day = days[date.getDay()];
document.write('<h1>');
document.write('今日は' + date.getDate() + '日で、' + day, '曜日です。');
document.write('</h1>');
</script>
</body>
</html>

まとめ

  • 配列の添字は、「0」から始める点に注意
  • 配列をリテラルとして記述するには、要素をカンマで区切り「ブラケット（角括弧）」で囲む