My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

4/8 [Java Script] 配列の操作

本日の授業テーマ

  • [Java Script] 配列の操作

本日の学習内容

  • [Java Script] 配列の添え字を活用する


配列の添え字を活用する

配列を操作する

授業の関連記事:

http://d.hatena.ne.jp/web-0127/20140506/p1

 

[演習] 今日の曜日を表示

JavaScriptで今日の曜日を表示する

1) 新規配列(days)を作成し、日曜日から土曜日までの曜日を配列に格納します。

<script>  var days = new Array('日', '月' ,'火', '水', '木', '金', '土');  </script>  
<補足>

上記配列はこういうことです。

days[0] = '日'
days[1] = '月'
days[2] = '火'
days[3] = '水'
days[4] = '木'
days[5] = '金'
days[6] = '土'

2) Dateオブジェクトを作成します(現在の日付時刻をもつDateオブジェクトを作成)

<script> var date = new Date();  </script>


3) getDayメソッドの戻り値を配列daysの添字にして、daysから曜日を取得、変数dayに格納します

var day = days[date.getDay()];
<補足>
  • getDayメソッドの戻り値は、日曜日を「0」土曜日を「6」とする「0~6」の間の数値
  • 戻り値の数値と配列の添字を一致させる


4) ブラウザに今日の曜日を出力します

document.write('<h1>今日は', day, '曜日</h1>');

[ 日付関数 ] Dateオブジェクト

参考:http://www.neconote.jp/neconote/dojo/html/calendar/js_date1.html



連想配列

連想配列とは

前述の例、days[0]のような、インデックス([0]の部分がインデックス)の代わりに、プロパティ名を指定して要素にアクセスする使い方が連想配列です。

連想配列の生成
<script>  var members = new Object();  </script>

連想配列 = Objectオブジェクト



[ 演習例 ]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>連想配列</title>
</head>
<body>
<script>
var colors = new Object();
colors['white'] = '白色';
colors['red'] = '赤色';
colors['green'] = '緑色';
colors['yellow'] = '黄色';
  document.write('<h2>' + colors['red'] + '</h2>');
</script>
</body>
</html>

参考:
www.ajaxtower.jp