JavaScript if/else 文

定義と用法

if/else 文は、指定された条件が真の場合にコードブロックを実行します。条件が偽の場合は、別のコードブロックを実行できます。

if/else 文は、異なる条件に応じて異なる操作を実行する JavaScript の「条件」文の一部です。

JavaScript には以下の条件文があります：

  • 指定された条件が真の場合に実行するコードブロックを if で指定します
  • else を使って、同じ条件が偽の場合に実行するコードブロックを指定します
  • 最初の条件が偽の場合は、else if を使って新しいテストする条件を指定します
  • switch 文を使って実行する複数のコードブロックのうちの1つを選択します

例

現在時刻（HOUR）が 20:00 未満の場合、id="demo" の要素に "Good day" を出力します：

var time = new Date().getHours(); 
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}

自分で試してみてください

以下の TIY 実例がページの下部にあります。

语法

条件が真の場合に実行するコードブロックを指定する if 文：

if (condition) {
  // condition が true である場合に実行されるコードブロック
}

else 文は条件が偽である場合に実行されるコードブロックを指定します：

if (condition) {
  // condition が true である場合に実行されるコードブロック
} else { 
  // condition が false である場合に実行されるコードブロック
}

最初の条件が偽である場合、else if 文が新しい条件を指定します：

if (condition1) {
  // condition1 が true である場合に実行されるコードブロック
} else if (condition2) {
  // condition1 が false で condition2 が true である場合に実行されるコードブロック
} else {
  // condition1 が false で condition2 が false である場合に実行されるコードブロック
}

引数の値

引数 説明
condition 必要。結果は true または false である式。

技術的詳細

JavaScript バージョン： ECMAScript 1

さらに詳しい例

例

時間が 20:00 未満なら「Good day」挨拶を作成します。それ以外の場合は「Good evening」挨拶を作成します：

var time = new Date().getHours(); 
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

自分で試してみてください

例

時間が 10:00 未満なら「Good morning」挨拶を作成します。それでない場合でも時間が 20:00 未満なら「Good day」挨拶を作成します。それ以外の場合は「Good evening」挨拶を作成します：

var time = new Date().getHours(); 
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

自分で試してみてください

例

もしドキュメント内の最初の <div> 要素の id が "myDIV" なら、そのフォントサイズを変更します：

var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {}} 
  x.style.fontSize = "30px";
}

自分で試してみてください

例

ユーザーが画像をクリックしたときに、<img>要素のソース属性(src)の値を変更します：

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}
</script>

自分で試してみてください

例

ユーザーの入力に応じてメッセージを表示します：

var letter = document.getElementById("myInput").value;
var text;
// 文字が "c" の場合
if (letter === "c") {
  text = "Spot on! Good job!";
// 文字が "b" または "d" の場合
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// 他のアルファベットの場合
} else {
  text = "Waaay off..";
}

自分で試してみてください

例

入力データの確認：

var x, text;
// id="numb" の入力フィールドの値を取得します
x = document.getElementById("numb").value;
// 如果 x が数字でないまたは 1 未満または 10 より大きい場合、"input is not valid"を出力します
// 如果 x が 1 から 10 の間の数字なら、"Input OK"を出力します
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

自分で試してみてください

ブラウザサポート

文 Chrome IE Firefox Safari Opera
if/else サポート サポート サポート サポート サポート

関連ページ

JavaScript 教程：JavaScript If...Else 文

JavaScript 教程：JavaScript Switch 文