Javascript

for文でdivを増やしていく

for文を使ったループ処理で、複数のdivを一気に生成していきます。

  • for文

for文

・javascriptでよく使うfor文について学んでいきます。

・for文は繰り返し同じ処理をするための構文で今回はdiv要素を指定の個数増やして行く方法についてです。

・for文はfor (let i = 0; i < 10; i++){}というように書いていきます。{}の中に繰り返したい処理を書いていくので前回作ったdiv要素の生成やクリックしたら色が変わるなどの処理はこの中に書いていきます。

JavaScriptを使ってdivを生成

・ではfor文のコードの解説をしていきます。まず大雑把な流れとしてiが0の状態からはじまって1増えるごとに{}の中の処理を行っていくというものでそれを10になるまで繰り返すという内容になっています。

・for文ではiがカウンターのように動作しています

・まずlet i = 0; でi を0に代入するという意味になります。letはconstと同様に代入を意味します。今回は説明が長くなるのでまたどこかの機会に違いについて話していきます。これでi = 0となります。

・次にi < 10;としてiが10になるまでの間処理を繰り返すように指定します。この数字を100にすると100回繰り返すということにかるので100個divを生成することができます。

・最後に i++でiを1づつ増やす指示を与えます。これにより最初0だったものが1になり2,3,,,と増えていくというわけです。

・つまりiが1づつ増えていき10になったら処理から抜けるのでカウンターの値が0から9の間一回一回{}の処理を行っていくという命令になります。

・また、javascriptだけではなくプログラミング全般で数字は0から数えることが多いので覚えておきましょう。

・div要素が増えたのでCSSの方で横並びにしたり余白をとったり少し見やすくしておきます。

-Javascript