目次
プログラムの基本、if文を用いた条件分岐
jQueryのプログラムの本当に基礎であり、これさえ抑えてしまえば楽勝なif文。
難しそうに感じてしまいますが、全然そんなことなくて、ただ比べるだけです。
【もしこうだったら。。。でもこっちかも。。。最悪の場合は。。。】
という考え方、普段の生活でしますよね？
これと全く同じです。下記が本当に基礎のjQueryの条件分岐です。
jsファイル
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function () { if (ここに条件を書く) { //ここにその場合の処理 } else if (ここにも条件を書く) { //ここにその場合の処理 } else { //それ以外の場合の処理 } }); |
- もしこうだったらこの処理で
- こうだたらこの処理で
- どっちでもない場合はこの処理！
というプログラムの基礎。でもあり、これが全て。
上記で書いた【ここに条件を書く】の部分の条件の書き方の基礎
条件というのは何かを比べること。これが演算子です。
この演算子の基礎を簡単にまとめましたので下記を参考に。
比較演算子
| 演算子 | 内容 |
|---|---|
| ○ > △ | ○より△が小さい |
| ○ >= △ | ○より△が小さいか同じ |
| ○ < △ | ○より△が大きい |
| ○ <= △ | ○より△が大きいか同じ |
| ○ == △ | ○と△は同じ値 |
| ○ != △ | ○と△は違う値 |
| ○ === △ | ○と△は全く同じ値（厳格な判定） |
| ○ !== △ | ○と△は全く違う値（厳格な判定） |
論理演算子
| 演算子 | 内容 |
|---|---|
| A && B | Aでもあり、Bでもある |
| A || B | Aであるか、Bである |
| ! a | Aではない |
if文を使った例文
いままで説明してきたことを踏まえて、下記のコードをみてみましょう！
jsファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(document).ready(function () { // 100を変数に格納 var num = 100; // if文で条件分岐 if (num < 20) { // numが20未満だった場合の処理 alert('20未満だったよ'); } else if (num >= 50) { // numが50以上だった場合の処理 alert('50以上だったよ'); } else { //それ以外の場合の処理 alert('どっちでもなかったよ'); } }); |
var num = 100というのは、numという、私が勝手に命名したもの、ここでは変数と言います。
この変数に100を代入しました。
このnumをいろいろな数字と比較していくというプログラムです。
結果は50より大きいので、アラートで【50以上だったよ】と出るはずです。
簡単ですね！ではもう一例見てみましょう。
jsファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(document).ready(function () { // 7を変数に格納 var num = 7; if (5 < num && num < 10) { // numが5より大きくて１０より小さかった場合 alert('5より大きくて１０より小さかったよ'); } else if (num > 100 || num < 10) { // numが100より大きいか、10より小さかった場合 alert('100より大きいか、10より小さかったよ'); } else { //それ以外の場合の処理 alert('どっちでもなかったよ'); } }); |
numに7を代入しました。
そして条件は、
- numが5より大きくて１０より小さかった場合
- numが100より大きいか、10より小さかった場合
- それ以外の場合
ですね。7は【numが5より大きくて１０より小さかった場合】
に当てはまりますので【5より大きくて１０より小さかったよ】とアラートが出ます。
条件分岐を極めたものがプログラムを制す！！
条件分岐はほぼこのカタチで、プログラムの基礎はjQueryにしてもphpにしても考え方は同じで書き方が多少ちがうだけ。
この考え方さえマスターしてしまえばあとはオリジナルでプログラムを書いていくことも簡単です！
是非参考にして下さい。