JavaScriptの文法。配列、ループ、条件分岐を紹介します!

JavaScript web制作

前回は主にJavaScriptの変数について紹介しました。

詳しくはこちらです。

JavaScriptの文法。変数、算術演算子の基本を紹介します!
JavaScriptの変数について紹介したいと思います。 変数はプログラム中のデータを保管しておくための物です。名前を付けておくことで、それをもとに簡単にデータを呼び出したり、逆に代入したりする...

今回はこの続きで、配列、ループ、条件分岐の紹介をしていきたいと思います。

スポンサーリンク

JavaScript 配列

配列は簡単に言うと、値に順番を付けてまとめたものです。

配列の値を要素、割り当てた番号をインデックスと呼びます。また配列内の要素はそれぞれ変数となっています。

配列はこんな感じで作成されます。

  • 空の配列
var array1[ ];
  • 要素のある配列
var array2[2,4,6,8];

 

配列array2の変数の値を使いたい場合

document.write(array2[3]);

インデックスは0から数えます。

したがってここでいう[3]というのは、配列array2の要素の4番目ということになり、その結果8が表示されます。

JavaScript 配列のメソッド、プロパティ

配列を扱うときに使える、メソッド(4つ)とプロパティ(1つ)を紹介します。

  • push()

配列の最後に値を追加して、配列の長さを返します。

  • unshift()

配列の最初に値を追加して、配列の長さを返します。

  • pop()

配列の最後の値を削除して、削除した値を返します。

  • shift()

配列の最初の値を削除して、削除した値を返します。

  • length

配列の要素の数を返します。

スクリプトを繰り返す「whileループ」「forループ」

whileループ

あるスクリプトを繰り返したいときには、このwhileループを使います。

文法はこちらです。

while(条件式){
   繰り返したいスクリプトを記述
}

( )内に書いた条件式に当てはまるなら、{ }内のスクリプトを繰り返すわけです。

気を付けて条件式を設定しないと、永遠にスクリプトが繰り返される無限ループになってしまうので、注意が必要です。

forループ

あるスクリプトを、決められた回数だけ繰り返したいときに、forループを使います。

文法はこちらです。

for(初期値;条件式;更新式){
   繰り返したいスクリプトを記述
}

まずは初期値を設定して、それが条件式に当てはまるなら、繰り返したいスクリプトを実行します。その後最初に設定した初期値を、更新式で変更して再び条件式による評価が行われます。

これを値が条件式に当てはまらなくなるまで、繰り返すのがforループです。

条件分岐「if文」

条件を設定して、その真偽によって異なるスクリプトを実行したいときに使われるのが、if文です。

文法はこちらです。

if(条件1){
   条件1に当てはまる場合の処理
}
else if(条件2){
   条件1に当てはまらず、条件2に当てはまる場合の処理
}
else {
   上記すべての条件式に当てはまらない場合の処理
}

こんな感じではじめに「if」で条件1を設定します。

次に、条件1に当てはまらないものに対し、別の条件も作りたい場合は、「else if」を使います。このelse ifは複数設定することが出来ます。

設定した条件すべてに当てはまらないものは、最後に「else」を使い処理します。

最後に

前回の変数と合わせて、これらはJavaScriptでよく使われる基本的ものとなります。プログラムを組むうえで欠かせない部分です。

早くJavaScriptに慣れたい人には、実際のJavaScriptコード中の条件分岐に注目して見ることをお勧めします。

これまでに見てきた文法が、条件分岐という大枠の中に多く組み込まれています。

このあたりのプログラムが理解できれば、自分でも何となくJavaScriptが理解できた感覚が持てると思いますよ。