◆20200806 授業メモ .innerHTMLと.setAttribute
授業内容
要約
〇占い 課題
・JSから画像ファイルを反映させる方法
.innerHTML→文字、タグを反映させる。
.setAttribute→画像を反映させる。
必死に
document.getElementById().innerHTML = []
を駆使して試行錯誤していたが一向にうまく表示されなかった。
正解は
document.getElementById().setAttribute('src', []);
を使用することだった。
※osarai4を参考に
○arrayオブジェクト
var 変数名 = new array('配列1', '配列2', '配列3');
↑あまり使われない形
var 変数名=['配列1', '配列2', '配列3',];
↑これがよく使う形かな
○配列の部屋の中身をいじるオブジェクト
console.log(array1.splice(1, 1, 'もも'));
第１引数：配列の位置変更を指定
第２引数：変更位置から削除する数
第３引数以降：変更位置に追加する要素
戻り値：削除された要素を含む配列
要は交換すること！
console.log(array1.splice(1, 1));
第3引数なし→追加するものが無しになるので変更位置を指定して削除する働きになる
以下板書
〇stringオブジェクトの続き
問題12 - 2 P192
var str = '田中,菊池,丸,鈴木,新井';
var src1 = 'img/item002.jpg';
console.log('問１');
console.log('strの文字列は' + str.length + '文字です');
console.log('問２');
console.log(str.indexOf('丸'));
console.log('問３');
console.log(str.indexOf('新井'));
console.log(str.slice(6, 13));
console.log('問４');
var array = str.split(',');
console.log(str.split(','));
console.log('問５');
console.log(array); ×
for (i = 0; i < array.length; i++) {
console.log(array[i] + 'さん')
}
console.log('問６'); ▲
console.log(src1.split('/'));//確認用
var fileName = (src1.split('/'));
console.log(fileName[fileName.length - 1]);
//パス情報は「/」がフォルダの意味をしている
//[/]で区切って配列化すれば最後の部屋にファイル名が入っている。
// ※fileName.length→配列の[部屋数]を示す
// ※fileName.length-1→配列の[部屋数-1]→最後の部屋の値を指す
console.log('問７');
console.log(src2.split('/'));
var slash = (src2.split('/'));
console.log(slash[slash.length - 1]);
〇Arrayオブジェクト
// 正式なarrayインスタンスの作成方法
//※あまり使われない
var array0 = new array('いちご', 'みかん', 'りんご');
// Arrayコンストラクタの引数に数値を1つ指定すると
// 指定した数値分部屋を作成するので注意
// 記述量が多い、かつ上記の例があるのであまり使わない
var test1 = new Array(3);
console.log(test1);
var test2 = [3];
console.log(test2);
// ----------------------------------
console.log('１回目の出力');
var array1 = ['いちご', 'みかん', 'りんご'];
console.log(array1);
console.log(typeof array1);
console.log(array1.length);
console.log(array1.push('メロン', 'バナナ'));
// 末尾に要素（部屋）を追加
// 戻り値：追加後の要素数（部屋数）
console.log(array1);
console.log(array1.pop());
console.log(array1);
console.log('２回目の出力');
// [先頭]の要素を追加・削除
console.log(array1);
console.log(array1.shift());
console.log(array1);
console.log('３回目の出力');
console.log(array1.splice(1, 1, 'もも'));
// 第１引数：配列の位置変更を指定
// 第２引数：変更位置から削除する数
// 第３引数以降：変更位置に追加する要素
// 戻り値：削除された要素を含む配列
// 要は交換すること
console.log(array1);
// 変更位置を指定して追加する
console.log(array1);
console.log(array1.splice(1, 1));
// 変更位置を指定して削除する
console.log(array1);
console.log('４回目の出力');
console.log(array1.reverse());
console.log(array1);
// 配列を逆順に並び変える
console.log('５回目の出力');
var numList1 = [2, 10, 3, 2];
console.log(numList1);
console.log(numList1.concat(7, [58, 2]));
console.log(numList1);
// concatメソッドはメソッドを呼び出したインスタンスが保持する配列の変更はない
// 引数で渡された値をもとに新しい配列を作成して戻り値として返す。
console.log(numList1.slice(1, 3));
// 第１引数:開始位置
// 第２引数：終了位置（指定数値-1）
// 戻り値：切り出された新しい配列インスタンス
//
console.log(numList1);
console.log('６回目の出力');
console.log(numList1.join('/'));
// 第１引数（省略可）：接続文字（省略時は「,」）
// 戻り値：文字列型
// 配列内のすべての値を引数で指定した接続文字でつないだ文字列を返す
console.log(numList1.toString());
console.log(numList1);
console.log('７回目の出力');
console.log(numList1.indexOf(2));
console.log(numList1.indexOf(2, 1));
console.log(numList1);
console.log('８回目の出力');
console.log(numList1.lastIndexOf(2));
console.log(numList1.lastIndexOf(2, 2));
console.log(numList1);
代表的なプロパティ
.length →部屋数を表示する
.push →配列の末尾に要素を追加する
.pop →配列の末尾の要素を削除する
.unshift→先頭に要素を追加
.shift →先頭の要素を削除
.splice(index, howmany[element])
ここ復習
// →index位置からhowmany個要素を削除してelementを
// 代わりに追加。
// .reverse→
// .contact→
// .slice→
// .join→
// .toString→
// .indexOf→先頭要素から最後の要素まで合致する要素を検索する
// .lastIndexOf→最後の要素から先頭の要素まで合致する要素を検索する
演習問題
jsフォルダ内にscript.jsを作成して以下の問題に答えること
■問１
//営業１部の田中、岩田、南場を管理する配列を作成して表示すること
■問２
//南場さんが退職するので配列から削除し、
//南場さんへの送別の言葉をコンソールに表示させること
■問３
//配列に新人の藤田を追加して営業部の人数を
//コンソールに表示させること
■問４
//連絡網を作成したいので、以下のように
//コンソールに表示させること
//田中→岩田→藤田
■問５
//営業２部(三木谷、孫、堀江)と営業１部が統合される
//営業１部と営業２部の配列をまとめて営業部として管理し
//営業部のメンバーをコンソールに表示すること
■問６
//孫さんが退職することになりました。
//営業部の配列から孫さんを削除し
//送別の言葉をコンソールに表示しましょう
--- 解答-- -
console.log('問1')
var sales1 = [
'田中',
'岩田',
'南場',
];
console.log(sales1);//問一おｋ
console.log('問2')
console.log(sales1.pop() + 'さん、お達者で。'); //問２おｋ
console.log('問3')
console.log(sales1.push('藤田') + '人');
//
console.log(sales1);//問３おｋ
console.log('問4')
console.log(sales1.join(['→']));//問４おｋ
console.log('問5')
var sales2 = [
'三木谷',
'孫',
'堀江',
];
console.log(sales2);
console.log(sales1.concat(sales2));
var integlation = sales1.concat(sales2)
console.log(integlation + '・・・問５の答え');//問５おｋ
console.log('問6')
console.log(integlation.splice(4, 1) + 'さんお達者で。');
var newInteglation = integlation
console.log('孫抜き営業部・・・' + newInteglation);
---※HTML-- -
< !DOCTYPE html >
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>おさらい１２</title>
</head>
<body>
<h1>おさらい１２</h1>
<script src="js/script.js"></script>
</body>
</html>
-----------------
