Chapter3-10 項目をリスト表示する

こんにちは!

今回は配列やHTMLへの挿入など盛りだくさんです。

Chapter3-10 項目をリスト表示する

まずは配列からです。

script.js
Image from Gyazo

Image from Gyazo

let 変数名 = [データ0, データ1,...,データX]
このように配列を作成します。
配列は後からデータの追加ができるので、空でも問題ありません。
todo[0]の0に当たる部分がインデックス番号で、これを指定して読み取ることができます。
ちなみに、無い番号を指定してみます。

script.js
Image from Gyazo

Image from Gyazo

undefined となりました。

今度は、配列から全てを読み取ります。

script.js
Image from Gyazo

Image from Gyazo

for...of

for(let 変数名 of 対象となる配列) {  
 処理内容  
}

まずは let で変数を定義し、of の後ろに配列を書きます。
配列の数だけ繰り返し処理をおこなってくれます。

配列に項目を追加する方法も確認します。

script.js
Image from Gyazo

Image from Gyazo

push を使って配列の最後にデータを追加しています。
他には、unshift で最初に追加、pop で最後を削除、shift で最初を削除などがあります。

次は、テンプレート文字列です。

script.js
Image from Gyazo

Image from Gyazo

特徴としては、変数やファンクションを埋め込むことができることです。
その際には${変数名}などと書く必要があります。
バッククォート「``」で囲みましょう。

最後に、HTMLへの挿入です。

index.html
Image from Gyazo

HTMLに親要素を追加しました。

script.js
Image from Gyazo

Image from Gyazo

insertAdjacentHTMLメソッド

取得した要素.insertAdjacentHTML('挿入する場所', 挿入する要素)  

今回は beforeend なので、終わりのタグの前に子要素として挿入しています。
他には afterbegin などを使用できます。
どこに挿入するかは大事ですので、使い分けができなければいけません。
挿入する要素は、直前に書いてある定数 li ですね。

長くなりましたが、大事な部分なのでしっかり確認していきます。

ではでは。