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回だけは必ず処理をする】というなんだか力強い感じです。

お疲れ様です

• JavaScript入門3はこれで終わりです。カンタンでしたね。
• 素数計算の続きから来た人は、【素数計算サイト開発（完成編）】にすすみましょう。