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

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

配列の使い方

JavaScript

配列とは複数の値を入れる事が出来る箱の事です。
今まで使っていた変数は1つにつき、1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまう、という特徴がありましたが、配列を使う事で同時に複数の値を収納出来るようになります。


配列の使い方
f:id:yachin29:20160901003454j:plain



配列をArrayオブジェクトというオブジェクトとして扱います。
変数と同様「var」を記述。

基本形

var fruit =  new Array ('りんご', 'バナナ', 'みかん', 'もも');

省略形

var fruit = ['りんご', 'バナナ', 'みかん', 'もも'];

配列の値をすべて取得

<script>
var fruit =  new Array ('りんご', 'バナナ', 'みかん', 'もも');
console.log(fruit);
</script>


配列の値の一部を取得

<script>
var fruit =  new Array ('りんご', 'バナナ', 'みかん', 'もも');
console.log(fruit[1]);
</script>


配列に収納されている値の数を取得

<script>
var fruit =  new Array ('りんご', 'バナナ', 'みかん', 'もも');
console.log(fruit.length);
</script>

コンストラクタ関数を使用した記述

・引数には、配列の要素数を指定

<script>
var fruit = new Array(4);
fruit[0] = 'りんご';
fruit[1] = 'バナナ';
fruit[2] = 'みかん';
fruit[3] = 'もも';

</script>


配列はfor文などのループと組み合わせる事で、すべてのデータを一括処理でき非常に便利です。

<script>
var names = new Array(5);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';
names[4] = 'ロバート';

for (i = 0; i < names.length; i++) {
  document.write('<h2>こんにちは' + names[i] + 'さん</h2>');
}

</script>


一部のデータだけ呼び出す場合

<script>
var names = new Array(5);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';
names[4] = 'ロバート';

for (i = 0; i < names.length; i++) {
  document.write('<h2>こんにちは' + names[0] + 'さん</h2>');
  document.write('<h2>こんにちは' + names[4] + 'さん</h2>');
}

</script>


配列とfor文を組み合わせ、以下の表を作ってみましょう。
f:id:yachin29:20160901013406j:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列の使い方</title>
<style>
table {
  width:800px;
  border-collapse:collapse;
  border:1px solid #666666;
}
th,td {
  border:1px solid #666666;
}
th {
  background:#CCCCCC;
}
</style>
</head>

<body>
<table>
<caption>配列とfor文を使った表</caption>
<script>
var rate = new Array(3);
rate[0] = 300;
rate[1] = 450;
rate[2] = 520;


document.write('<tr><th>個数</th><th>商品A</th><th>商品B</th><th>商品B</th></tr>');
for (i=1 ; i<=10 ; i++){
  document.write('<tr>');
  document.write('<th>' + i + '</th>');

  for (j=0 ; j<=2 ; j++){
    document.write('<td>' + rate[j]*i + '円</td>');
  }
  document.write('</tr>');
}
</script>
</table>
</body>
</html>

f:id:yachin29:20160901014814j:plain

広告を非表示にする