配列のおさらいです。
サンプルプログラム
代数は物を入れる箱と言う説明をしましたが、配列はその箱が何個もまとめた物です。
いいたとえかどうかはさておき、引き出しをイメージしてください。
そんなに大きくないやつがいいです。
厳密にはその引き出しには同系の物を入れる必要があります。
例えば、お金とか。一段目には1000円、二段目には5000円、三段目には10000円を入れて行く感じです。
なぜ同じような物にすべきなのか？ってまぁこれ本当は何でも入れる引き出しを作れないことはないんだけど
お金を入れる引き出しと言うことにしておけば、そこに入っている金額の合計を出したり、
いくら抜くには何段目の引き出しから取り出せばいいとかそんな感じで金勘定にもつながるからです
という感じでイメージしてください。
厳密になんだよぉわかんないよぉとか言って留まるよりここはそう言う物だと飲み込んで先に進みましょう。
例のごとく初期化の部分はスキップしますね。
さて一番最初のプログラム
「add a certain word」にテキストを入力して「add this!」をクリックした時の処理です。

funnction … の上に宣言されている変数。
今まではfunction(){}の中で宣言していたのにここではfunctionの外に置きます。
その理由は、変数のスコープ、有効範囲によるものです。
function(){}の中で宣言した変数はそのfunctionの中だけ有効で、他の場所では使えません。
これを外においてあげると、このファイルの中のどこでもこの変数が利用できるようになります。
さて次に処理の内容を見てみましょう。
まずは「add_word(add a certain word)」に入力された値を変数add_valueに代入します。
続いてword_listにその値を追加します。
word_list.pushでは
ここでは引き出しを追加してその中に値を代入します。
配列でははじめからこの引き出しは何段ですよ見たいな感じで宣言することはありますが、
今回は宣言時にはこれは「引き出しです」と言うことだけを宣言します。
変数list_textに空文字を代入します。
word_list.forEach
は配列の要素を展開して繰り返す処理です。
展開して繰り返すやり方の一つで、引数に処理を書くことが出来ると言う利点があります。
まぁ後から出て来るfor(…)というやり方もありますが、これは配列のサイズとか気にしないで
処理を実行できるのでかなり便利だよねって私はよく使います。
forEach内の処理ですがここではlist_textに配列に格納した値を追加して行きます。
繰り返しの処理が終わったら、「add_value」の中にhtmlとしてlist_textを表示させます。
最後に「add_value」の文字列を消します。
もう一度テキスト「add a certain word」にテキストを入力して「add this!」ボタンをクリックしてください。
新たに入力した文字が表示されましたよね。
これは入力した文字列を配列に追加した結果です。なんとなくわかりましたか？

続いては「delete a word from list」にテキストを入力して「delete this!」をクリックした時の処理です。

結構長い！
まずは「delete_word(delete a word from list)」に入力された値を変数delete_valueに代入します。
変数list_textに空文字を代入します。
変数countに0を代入します。
変数resultにfalseを代入します。
続いて配列word_listを要素の数だけ繰り返します。
for(i = 0; i < word_list.length; i++) これはiに0を代入して、iがword_listの要素数より少ない間繰り返してください、繰り返す間iは1ずつ増やしてください と言うことを命令しています。 この繰り返しの処理ではword_listのi番目の値が入力した値と同じの場合に繰り返しを停止することを指示しています。 停止する前にはresult(結果)をtrueにします。 ifの処理の後にcount++とありますが、これは停止するまでcountの値を1ずつ増やすことになります。 さてここでわかることは、繰り返しが停止されたのはword_listのcount番目の要素の時 すなわちcount番目の値が入力された値と同じであったと言うことがわかります。 仮に同じ値がない場合はresultはfalseのままです。そう、同じ値がある場合はその結果はtrueです。 resultには同じ結果があったよと言う結果が格納されていると言うわけです。 さて、同じ値がなかった場合はreturnで処理を終了させます。 同じ値があった場合はcount番目の要素を削除して再度、配列の内容を表示させるようにします。 という感じで、配列から要素を削除をすることができました。 物理的な引き出しは引き出しの段そのものを削除することは出来ませんがプログラムの配列ではそれが可能です。 まぁ引き出しと言うよりはだるま落とし積んで落としてって感じの方がわかりやすいかもしれませんね。 という感じで前半戦終了。残りはまた次回で。結構大変。。。