JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScript ifelseおよびelseif


条件文は、さまざまな条件に基づいてさまざまなアクションを実行するために使用されます。


条件文

コードを書くとき、さまざまな決定に対してさまざまなアクションを実行したいことがよくあります。

これを行うには、コードで条件ステートメントを使用できます。

JavaScriptには、次の条件文があります。

  • if指定された条件が真の場合に、実行するコードのブロックを指定するために使用します
  • else同じ条件がfalseの場合、実行するコードのブロックを指定するために使用します
  • else if最初の条件がfalseの場合、テストする新しい条件を指定するために使用します
  • switch実行するコードの多くの代替ブロックを指定するために使用します

このswitchステートメントについては、次の章で説明します。


ifステートメント

このステートメントを使用してif、条件がtrueの場合に実行されるJavaScriptコードのブロックを指定します。

構文

if (condition) {
  //  block of code to be executed if the condition is true
}

if小文字であることに注意してください。大文字(IfまたはIF)はJavaScriptエラーを生成します。

時間が18:00未満の場合は、「Goodday」の挨拶をします。

if (hour < 18) {
  greeting = "Good day";
}

挨拶の結果は次のようになります。

Good day


elseステートメント

このステートメントを使用してelse、条件がfalseの場合に実行されるコードのブロックを指定します。

if (condition) {
  //  block of code to be executed if the condition is true
} else {
  //  block of code to be executed if the condition is false
}

時間が18未満の場合は、「こんばんは」の挨拶を作成します。それ以外の場合は、「こんばんは」を作成します。

if (hour < 18) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

挨拶の結果は次のようになります。

Good day

elseifステートメント

else if最初の条件がfalseの場合は、ステートメントを使用して新しい条件を指定します。

構文

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}

時間が10:00未満の場合は「おはよう」の挨拶を作成し、そうでない場合は20:00未満の場合は「おはよう」の挨拶を作成し、それ以外の場合は「こんばんは」を作成します。

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

挨拶の結果は次のようになります。

Good day

その他の例


この例では、W3Schoolsまたは世界自然保護基金(WWF)へのリンクを記述します。乱数を使用することにより、各リンクの確率は50%になります。


エクササイズで自分をテストする

エクササイズ:

がより大きいif場合に「HelloWorld」に警告するようにステートメントを修正します。xy

if x > y 
  alert("Hello World");