やることリスト
HTMLソースコード
<ul class="li" id="list"></ul>JavaScriptのソースコードと概要
var todo = ["データ整理", "JavaScriptの学習", "与信審査と債権管理", "データ解析によるコンバージョン獲得経路算出", "広告キーワードプランナーによる解析"];
todo.push("自己分析をしておく");
for (var i = 0; i < todo.length; i++) {
var li = document.createElement("li");
li.textContent = todo[i];
document.getElementById("list").appendChild(li);
}配列の作成
var 変数名 = [];
配列を使えば、リストがいくら増えても使う変数は1つで済みます。データの管理がし易くなる。
配列からデータを読み取る
配列変数名 [インデックス番号]
配列データには順番に0，1，2と番号が付く！これをインデックス番号という。最初の番号は「0」からなので注意！！
全ての項目を読み取る
配列変数名.length
lengthプロパティは、その配列に登録されているデータの個数を表します。
for (var i = 0; i < todo.length; i++) {
処理内容
}
定数iを定義して0を代入し、iに1つずつ足して繰り返してiをインデックス番号としてデータを読み取る！処理内容
}
条件式は(変数i)が(変数名.length)より小さければ繰り返すという条件にする。
今回の繰り返し分は配列を行う際に高い頻度で使われています。
配列オブジェクトを操作するメソッド
| メソッド名 | 意味 |
|---|---|
| 配列変数名.push("追加したい項目") | 配列の最後にデータを追加 |
| 配列変数名.pop() | 配列の最後のデータを削除 |
| 配列変数名.shift() | 配列の最初のデータを削除 |
| 配列変数名.unshift("追加したい項目") | 配列の最初にデータ追加 |
項目をHTMLに書き出す
上記のHTMLソースコードを挿入しておくタグを生成
document.createElement("タグ名");
タグ名を"li"にすると<li></li>を生成し、変数liに代入しています。そして、配列todoのインデックスi番目のデータを指定しています。
appendChildメソッド
取得した要素.appendChild(挿入したい子要素)
取得した要素に()のパラメーターで指定した要素を子要素として挿入する。他に子要素がある場合は、その下に挿入します。