配列 | Array
変数では変数1つにつき1つのデーターを保存するだけでしたが、配列を使うと、複数のデーターを1つにまとめてグループ化することができる。
簡単な解説
配列に登録されているデータには、最初のものから順に0,1,2・・・と番号がつきます。この番号のことをインデックス番号、またはインデックスといいます。
配列データを読み取るには、上記のようにインデックス番号を入力します。
配列の各項目をすべて読み取る
Let's check! : F12 → console
簡単な解説
変数iを定義して0を代入し、iに1ずつ足しながら繰り返しつつ、そのiを配列のインデックスとして使います。
lengthプロパティは、その配列に登録されているデータの個数を表します。
「変数iがtodo.lengthより小さければ繰り返す」という条件にしてます。
この繰り返し文により、どんな配列であってもすべてのデータを読み取ることができるようになります。
項目を追加する
簡単な解説
配列はオブジェクトです。オブジェクトということは、メソッドとプロパティがあります。
そこで、今回はpushメソッドを使って追加しています。
メソッド | 意味 |
.pop() | 配列の最後のデータを削除する。 |
.shift() | 配列の最初のデータを削除する。 |
.unshift(データ1,データ2・・) | 配列の最初にデータ1、データ2を追加する。 |
項目をHTMLに書き出す
簡単な解説
var li = document.createElement('li'); | createElementメソッドで<li></li>タグを作ります。それを変数liに代入します。 |
li.textContent = todo[i]; | 生成した変数liのコンテンツに配列todoのインデックスi番目データを指定します。
|
document.getElementById('list').appendChild(li); | idのlist要素を取得し、そこに子要素として挿入できるappendChildでli要素を加えます。 |
この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません(ToT)
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。
わからないことはプロフェッショナルから学ぶのが一番
オンラインで受講ができるスクールですので、全国どこからでも。