20200720 授業内容のメモ 配列・オブジェクト
※lengthとは
部屋数を調べる際に使用する値。
訳：console.log：コンソールに表示せよ
var fruits = ;
↑配列を作成する際に使用する値
console.log('１回目の出力');
console.log(fruits);
console.log(fruits.length);
---ここは番地に入れる値の設定---
fruits[0] = 'いちご';←0番地には’いちご’が入るということ
fruits[1] = 'みかん';1番地には〃
fruits[2] = 'りんご';2番地には〃
※1番からではなく0番地からはじまることに注意。
---ここから表示される---
console.log('２回目の出力');
console.log(fruits);フルーツを表示せよ
console.log(fruits.length);フルーツ部屋の数を表示せよ
---表示するように指示を出す---
console.log(fruits[0]);フルーツの0番地は？
console.log(fruits[1]);フルーツの1番地は？
console.log(fruits[2]);フルーツの21番地は？
練習
console.log('練習3-2');
var movie = [
'はりぽた',←設定においてはカンマで区切る形にしてもおｋ
'はりぽた2',
'はりぽた3',
];
console.log(movie);←指示出し
console.log(movie.length);
console.log(movie[2]);←表示箇所の指示出し。はりぽた3を表示させるには[2]を指示するのに注意
console.log(movie[movie.length - 1]);
↑movie.length - 1で最後の部屋番号を指定することができる。
よくあるミス
<p>var fruits;
↑配列リテラルが代入されていない。
変数に空の配列を代入しておく。</p>
<p>正しい値：var fruits=;</p>
fruits[0] = 'いちご';
fruits[1] = 'みかん';
fruits[2] = 'りんご';
console.log('１回目の出力');
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
ステップアップ
HTMLファイル
<body>
<h1>配列：ステップアップ</h1>
<div class="box">
<input type="text" id="message1">
</div>
<div class="box">
<p id="display1">表示箇所</p>
</div>
<script src="array2.js"></script>
</body>
JSファイル
var message1 = document.getElementById('message1').value;
//変数message1に
//HTML要素ID名message１入力値を代入。
console.log(message1);
document.getElementById('display1').innerHTML = kuji[message1];
//HTML要素ID名display1の文字列を代入によって変更。
kuji[message1]
◆ブラウザ内の表示を変更させる
document.getElementById('ID名を指定').
ID名を使ってHTML要素を特定
対象要素.value
↑1行入力パーツの入力値を使いたい場合
対象要素.innnerHTML
↑対象要素内の文字列を変更したい場合
<ul>
言葉
<li>ホイスティング・・一通り読み込む
変数は上に巻き上げられているイメージ</li>
</ul>
<h1>多次元配列とは</h1>
配列部屋の中にさらに配列を入れて管理する手法。
ex)
var score = [
↓二次元目のscoreの1番地
[60, 90], //0番地：１人目の試験結果
↑二次元目のscoreの0番地
[20, 50, 95], //1番地：２人目の試験結果
[100], //2番地：３人目の試験結果
];
/* var score = [
'値1',
'値2',
'値3',
];
*/
console.log('１次元の出力');
console.log(score);
console.log(score.length);→3部屋あることを表示
console.log('１人目の試験結果');
console.log(score[0]);
console.log(score[0].length);
console.log(score[0][0]);
console.log(score[0][1]);
// １人目２回目の試験結果を90点から80点に修正
score[0][1] = 80;
console.log('１人目の試験結果を修正');
console.log(score[0]);
console.log(score[0].length);
console.log(score[0][0]);
console.log(score[0][1]);
一次元目・・・人数
二次元目・・・試験結果
※実務では多くても三次元目まで扱う
length - 1→最後を示す。
<!----ここからおさらい問題------>
/**
* 問題
* ミスドのレジ情報を管理することにしました
*/
/**
* 問１
* 適切な変数を宣言して購入情報を多次元配列で管理すること
*
* ■一人目が買ったもの
* コーヒー、 チョコファッション
* ■二人目が買ったもの
* ポンデリング
* ■三人目が買ったもの
* コーラ、 オールドファッション、 ポンデリング
* ■四人目が買ったもの
* オレンジジュース、 ハニーチュロ
*/
☆変数宣言
var foods = [
['コーヒー', 'チョコファッション'],
['ポンデリング'],
['コーラ', 'オールドファッション', 'ポンデリング'],
['オレンジジュース', 'ハニチュロ'],
];
/**
* 問２
* 一人目が最初に買ったものをブラウザに表示すること
* ヒント： document.getElementById('answer2').innerHTML
*/
document.getElementById('answer2').innerHTML = foods[0];
/**
* 問３
* 二人目と三人目が買ったものをすべてコンソールに表示すること
*/
console.log(foods[1][0]);
→コンソールにすべて表示させる場合、宣言した変数をすべて記述しないと反映されない。
[0]~[2]まですべて。
console.log(foods[2][0]);
console.log(foods[2][1]);
console.log(foods[2][2]);
/**
* 問４
* 三人目が買った商品の個数をブラウザに出力させなさい。
*/
document.getElementById('answer4').innerHTML = foods[2].length;
/**
* 問５
* 四人目が二番目に買った商品をブラウザに出力させなさい。
*/
document.getElementById('answer5').innerHTML = foods[3][1];
/**
* 問６
* ミスドで買い物をした人数をブラウザに出力させなさい。
*/
document.getElementById('answer6').innerHTML = foods.length;
