Java Script入門3

基礎編（配列、while文）

var kotae = [];

変数

配列

いくらでもOK

入れられる値は一つだけ

配列

  • 下のコードは、一見、変数を作っているように見えますが、実は【配列】（はいれつ）というものです。
  • 配列というのは簡単に言えば【変数の集合体（しゅうごうたい）】です。

変数

一戸建て

配列

マンション

イメージ

  • 基本的には変数と同じで、数字・文字列・変数・関数など、なんでも中に入れられます。

配列

var kotae = [];

配列

マンション

イメージ

入居者募集！

  • 書き方ですが、下のように【var】で宣言し、スペース空けて名前を書きます。
    • ここまでは変数とまったく同じです。
  • 違う点は、配列の場合は【[ ]】を代入します。
  • これで中身の空の配列が出来上がります。

配列

  • 空の配列→つまりは今は、マンションだけで誰も住んでいない状態みたいなことです。 
var abc = [10,20,30,'YO！'];

配列abc

マンション

イメージ

10

30

20

YO!

最初から入居者アリ!

配列

  • 変数と同じように、宣言と同時に、値を代入しておく方法もあります。
  • 下のように[]内に入力しておけばOKです。
  • 値と値の間は[,] で区切ります。
  • 文字列の場合は''または""で囲みます。
    • (これも変数と同じですね)
var abc = [10,20,30,'YO！'];
console.log(abc);

配列abc

マンション

イメージ

10

30

20

YO!

一つだけ取り出したくても、全員出てきてしまう!

10

30

20

YO!

配列

  • 次は配列に入れた値を取り出す方法です。
  • 変数と同じようにしてみるとどうなるでしょうか?
  • →の画像のように、すべての中身が表示されてしまい、計算などにも利用できません。
var abc = [10,20,30,'YO！'];
console.log(abc［1］); //２０が表示される。
console.log(abc［2］ * 100); //3000が表示される。

配列abc

マンション

イメージ

10

30

20

YO!

一つだけ取り出せるので、計算などにもそのまま使える

20

配列

  • ひとつの値だけを指定したい時は、【abc[1]】のように、[]の中に値の場所を入力します。
    • この時、配列の値の事を配列の要素（ようそ）と言います。
  • 要素は左から順番に[0],[1],[2],[3]…となり、この値の場所を表す番号の事をインデックスと言います。※[0]から始まることに注意してください。 
var abc = [10,20,30,'YO！'];
abc[3] = 'SEY';
console.log(abc［3］); //SEYが表示される。

配列abc

マンション

イメージ

10

30

20

SEY

変数と同じく上書きされる！

配列

  • 今度は今の値を変える方法です。
  • これも先ほどと同じように変更したい要素を指定し、代入し直すだけです。
var abc = [10,20,30,'SEY'];
abc[４] = 'YOU';
console.log(abc［４］); //YOUが表示される。

配列abc

マンション

イメージ

10

30

20

SEY

新しい入居者は、部屋番号[]を指定して追加してあげる！

YOU

配列

  • 最後に、要素を後から追加する方法です。
  • 単純な追加の方法であれば、変更と同じような感覚で、追加したい要素を指定します。
    • たとえば【abc[4]】とすると、５番目の要素に追加されます。
      • ※0から数えるので[4]なら5番目ですね。
    • 尚、JAVAなど、他のプログラミング言語では、配列に新しい要素を追加出来ない言語もあります。ここらへんはプログラミング言語ごとにちょっと違います。

配列

  • さて、配列を使う時によくある処理として、【いくつ要素（ようそ）があるかわからない配列に、新しい要素追加する】というのがあります。
  • たとえば、買い物をするたびに、使ったお金をメモしていくための配列を作りたいとします。
var kaimono = []
  • この配列に、買い物した金額を代入していくわけですが、さきほどやった一つ一つ追加する方法（最初はkaimono[0]、次はkaimono[1]）だと、1つ1つ書いていかなければいけませんので、めちゃくちゃ大変です。
  • しかも[]の数字を間違えると、上書きされてしまうので、ちゃんと要素の数を調べてから追加しないといけません。
  • そんな時は、最初から用意されている関数（メソッド）を使えば、カンタンに作れます。
    • ※メソッドは機能のことでしたね？
  • 上のような場合に使えるのが「.push()」（プッシュ）メソッドです。
    • 次のページへ。
kaimono.push(19999);
※19999という数字が、配列kaimonoに追加される

配列

  • 【.push()】は、単純に「()内の値を、配列の一番最後に追加する」というメソッドです。
  • このメソッドを使えば、[]でインデックス番号を指定する必要もなく、どんどん追加出来ます。
  • さて、そういえばDOM操作の時に使った【getElementById()】（ゲットエレメントバイアイディ）もメソッドでしたね？
  • getElementById()の場合は【documentオブジェクトのメソッド】でした。
  • 今回の.push()は【配列(array)オブジェクトのメソッド】というわけです。
    • ​※ちなみに【関数】と【メソッド】はほとんど同じ意味ですが、JSでは上記のようにオブジェクトにひっついた機能[ .◯◯() ]がメソッド、parseInt()のような[ . ]無しに使う物を関数ということが普通です。
      • （厳密には全部一緒なのですが、今は気にする必要はありません）

while文（ホワイル：もう一つの繰り返し文）

  • 次は新しい繰り返し文を学びましょう。
  • 以前、繰り返し文として【for】（フォー）をやりましたが、別の繰り返し文もあります。
  • それが、【while】（ホワイル）です。
while (条件式){
  処理;
}
  • for文よりもシンプルにかけますね。
    • ちなみにfor文は下の感じです。
for (var i=0 ; i<(条件式) ; i++){
  処理;
}

while文（ホワイル：もう一つの繰り返し文）

  • 動きとしては下のように書くと、条件式がtrue（トゥルー）の間、中の処理を繰り返します。
while (条件式){
  処理;
}
  • 上の場合だと、［0,1,2,3,4,5,6,7,8,9］と出力されます。
    • ※10回目の[a++]で変数aが10になるので、その時点で繰り返しが終わる。
var a = 0;
while (a < 10){
  console.log(a);
  a++;
}

※無限ループのコードは、ブラウザが判断して、エラーとして、ストップしてくれるようになっていますが、当然エラーなので処理は行われません。

var i = 0;
while(i<1){
    console.log("ほ");
}

while文（ホワイル：もう一つの繰り返し文）

  • while（ホワイル）には非常に危険な点があります。
  • 条件がtrue（トゥルー）の間、ずっと処理を続けるので、処理の中に【条件が変わる処理】がないと無限ループになってしまいます。
  • たとえば下のコードです。
  • この場合はconsole.log("ほ")が無限ループしてしまいます。そのため、下のコードのように【条件がかわる処理】をいれておかないといけません。 
var i = 0;
while(i<1){
    console.log("ほ");
    i++;　←ココ
}
  • つまりwhileは使いやすいかわりに、エラーを出してしまいやすいともいえますね。
  • for文の場合は、必ず条件が変わるように書くので、このようなことは起きにくいです。
    • ※（i++の部分です）

※実際にはどちらを使っても同じ処理はできます。

あくまで向き不向きです。

while文（ホワイル：もう一つの繰り返し文）

  • 「じゃあfor（フォー）とwhile（ホワイル）どっちを使えば良いの！？」と言いたくなりますが、どちらが良いというわけではなく、基本的な使い分けとしては、
    • 何回繰り返せばいいかわからない時　→　while文
    • 繰り返す回数がわかっている時　→　for文
      • ​​という風に使い分ければ、使いやすいです。
var i = 10;
do{
    console.log("ほ");
}while(i < 1);

do文（ドゥ：もう一つのwhile文）

  • 実はwhile（ホワイル）文には、もう一つ書き方があります。
  • 下の書き方です。
  • while（ホワイル）文をひっくり返して、最初に【do】をつけたような書き方です。
  • これはdo（ドゥ）文と言い【条件式よりも前に、1回処理する】という、かわった繰り返し文です。
  • つまりは【1回だけは必ず処理をする】時に使います。
    • 2回目からは普通のwhile文と同じで、条件式がtrueの時だけ処理をします。
  • どんな条件だろうと最低、【1回だけは必ず処理をする】というなんだか力強い感じです。

お疲れ様です