配列の添字を活用する
曜日を日本語で表示する
- 曜日の文字列は、「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に格納します
1年後の曜日を表示
- 変数dateの日時を1年後に設定し、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」から始める点に注意
- 配列をリテラルとして記述するには、要素をカンマで区切り「ブラケット(角括弧)」で囲む