JavaScript 配列とfor文要素の追加が簡単

配列とfor文の組み合わせです。配列は横長構造になっていますので、for文で繰り返しの操作をすると要素の取得また追加や削除がとっても簡単になります。今回は最後に練習もありますので挑戦してみてください。

配列でfor文を使う

配列は要素が横並びになっているから繰り返しの技を使うとめっちゃ便利です。

以下ではfor文を使わないで配列を表示する方法とfor文を使って配列を表示する方法を比較してみます。

for文を使わない方法

for文をつかわず地道に表示するとこんな感じ

//配列を作成
let itm = ["東京", "新橋", "品川", "川崎", "横浜","戸塚","大船","藤沢"];
//配列を表示する
document.write(itm[0]+"<br>",itm[1]+"<br>",itm[2]+"<br>",
itm[3]+"<br>",itm[4]+"<br>",itm[5]+"<br>",itm[6]+"<br>",itm[7]);

東海道本線の駅名を羅列しました。

for文を使って表示してみる

for文を使うとこうなります。

//配列を作成
let itm = ["東京", "新橋", "品川", "川崎", "横浜", "戸塚", "大船", "藤沢"];
//配列を表示する
for (let i = 0; i < 8; i++) {
document.write(itm[i] + "<br>");
}

for文を使わない場合と結果は同じですね。絶対for文を使ったほうが有利です。

for文を使うと修正が簡単

下のサンプルは繰り返し回数にlengthを使っています。

//配列を作成
let itm = ["東京", "新橋", "品川", "川崎", "横浜", "戸塚", "大船", "藤沢"];
//配列の長さ-1
let j = itm.length;
//配列を表示する
for (let i = 0; i < j; i++) {
document.write(itm[i] + "<br>");
}

このようにすると配列の項目が増えても減ってもプログラムでは正しい答えが返ってきます。

「藤沢」の次に「辻堂」をついかしましたが他の部分は修正せずにちゃんと「辻堂」が表示されます。

練習課題

配列にfor文とlengthを使うと下のようなプログラムが簡単に作成できます。余裕のある方はチャレンジしてみてください。技術的なことは他で扱いますので、時間のない方はやらなくても大丈夫です。

 

テキストボックスに値を入力して「入力」をクリックすると次々に文字が追加表示されます。

作成手順

プログラミングをはじめたばかりの方は少し難しいかもしれません。わからない部分は鵜呑みでおっけーですよ。

1. htmlファイルにフォームとそれに付随するテキストボックスやボタンを配置してテキストを記入する場所も設置します。

   <form>
   <input type="text" id="txtid">
   <input type="button" value="入力" onclick="ck()">
   </form>
   <div id="str">ココに値を追加します。</div>
   <script>

   テキストボックスとテキストを書き込むdivにはidをつけておきます。さらにボタンはイベントが発動されるようにonclick=”ck()”もつけておきます。

2. 次はスクリプトの部分ですが最初に空の配列を用意します。

   let itm = [];

3. ボタンがクリックされた時の関数を記入します。ボタンがクリックされたら毎回表示が空になるように下の1文を追加します。

   function ck() {
   //関数が実行されたらdivの部分を空にする
   document.getElementById("str").textContent = "";
   }

4. 次にテキストボックスの値を取得する文を記入、pushを使って配列の最後に値を要素として挿入します。配列の長さ-1を繰り返し文で利用しますのでそれもlengthをつかって取得しておいてください。

   //テキストボックスの値を取得
   let txt = document.getElementById("txtid").value;
   //配列の最後にテキストボックスの値を入れる
   itm.push(txt);
   //配列の長さ
   let j = itm.length;

5. for文を設置します、配列の長さの-1分だけループします。さらにcreateElementを使ってpタグを作ります。

   for (let i = 0; i < j; i++) {
   //pタグを作っておく
   let cp = document.createElement("p");
   }

6. 作ったpタグに配列をどんどん書き込んでいきます。

    //pタグに配列の値を書き込む
   cp.textContent = itm[i];

7. 上記で作った要素をdivの子要素にすれば完了です。

   //上記で作ったpタグをdivの子要素にする
   document.getElementById("str").appendChild(cp);

全文

bodyの中の全文を掲載しておきます。あくまでもサンプルですので例外処理はしてません。

<form>
<input type="text" id="txtid">
<input type="button" value="入力" onclick="ck()">
</form>
<div id="str">ココに値を追加します。</div>
<script>
//空の配列を作成
let itm = [];
//関数を実行する
function ck() {
//関数が実行されたらdivの部分を空にする
document.getElementById("str").textContent = "";
//テキストボックスの値を取得
let txt = document.getElementById("txtid").value;
//配列の最後にテキストボックスの値を入れる
itm.push(txt);
//配列の長さ
let j = itm.length;
//ループ
for (let i = 0; i < j; i++) {
//pタグを作っておく
let cp = document.createElement("p");
//pタグに配列の値を書き込む
cp.textContent = itm[i];
//上記で作ったpタグをdivの子要素にする
document.getElementById("str").appendChild(cp);
}
}
</script>

配列でfor文を使う方法を学習しましたが、あまり面白くないので最後にちょっと小難いサンプルを載せてみました。配列はあともう少しあります。forEach文です、これやらないと配列はおわりません。

以上でこのページはこれでおしまいです。

お疲れ様でした！