JavaScript if文条件式の書き方と比較演算子

「もし～～～なら～～～する」の条件分岐や処理の方法でif文といいます。if文では比較演算子を利用して条件が合っていれば処理を行って条件が合っていなければ否定するようにします。「===」やif文の入れ子（ネスト）も扱います。

if文の基本的な書き方

if文の書式は条件判断式とその時の処理を記入します。

書式


if (条件式) {

ここに処理のコードを書く
　　} 

実際のコードは下記のようになります。

<script>
let str = "田中";
if (str == "田中") {
alert("変数strは田中と判断されました");
} 
</script>

サンプル(別窓）

サンプルでは変数strと文字列「田中」を比較したら等しいと判断されてアラートが表示されます。

演算子

上記では演算子が「==」になっていますが、比較演算子はいろいろ用意されています。

演算子意味
==左辺と右辺が等しい
>左辺が右辺より大きい
<左辺が右辺より小さい
>=左辺は右辺より大きいか等しい
<=左辺は右辺より小さいか等しい
!=左辺と右辺は等しくない
===型も含めて左辺と右辺が等しい

一番下の===以外は学校の算数と同じですね。

動作いろいろ

上記の演算子を利用したサンプルです。

if文のサンプル

「let hikaku = document.getElementById(“tx”).value;」はテキストボックスの値が変数に格納している部分ですが詳細は後で学習します。

<input type="text" id="tx"><br>
<button onclick="ck()">ボタン</button>
<script>
function ck() {
//テキストボックスの値を取得して変数に格納
let hikaku = document.getElementById("tx").value;
//比較する数字を変数に格納
let num = 5;
if (hikaku <= num) {
alert(num + "以下の数字が入力されました。");
}
} 
</script>

サンプル(別窓）

上記のサンプルではテキストボックスに5以下の数字を入力するとアラートが表示されます。

 

このサンプルではif文の中にもう一つif文が入っています。

<input type="text" id="tx"><br>
<button onclick="ck()">ボタン</button>
<script>
function ck() {
//テキストボックスの値を取得して変数に格納
let hikaku = document.getElementById("tx").value;
//比較する数字を変数に格納
let num1 = 5;
let num2 = 2;
if (hikaku <= num1) {
//5以下の数字にしぼられる
if (hikaku >= num2) {
//さらに2以上の数字にしぼられる
alert(num2 + "以上" + num1 + "以下の数字が入力されました。");
}
}
} 
</script>

サンプル(別窓）

最初のif文で5以下の数字のみとおして次のif文では2以上の数字に限定しています。このように入れ子状態のif文もあります。

 

このサンプルは少し難しいです。

<script>
let str = "5";//5は文字にしています
let num = 5;//5は数字です
if (str === num) {
//ココは実行されない
alert("変数str+とnumは型が違います。");
}
if (str == num) {
alert("変数str+とnumは同じ値です。");
}
</script>

サンプル(別窓）

変数strは5を””でくくっていますので文字になります、変数numは数字として変数に格納されています。「===」は変数の型（文字列なのか数字なのか）まで判断しますので、最初のアラートは表示されません。「==」と「===」は少し意味合いがちがいますので注意してください。

{ }中括弧の省略

if文の中の処理が1行の場合は{ }を省略することができます。

<script>
let str = 5;
let num = 5;
if (str == num) alert("中括弧の省略");
</script>

 

以上if文の書き方と演算子の利用の仕方を掲載しました。

 

このページはこれでおしまいです。

お疲れさまでした！

前のページ　 INDEX　 次のページ

ホーム