ywork2020.com

Title

条件に合わせて実行処理を制御する

if-else制御文の概要

条件によって実行されるプログラムコードを選択できる制御文です。
if(制御条件){処理A;}else{処理B;} の形式で記述します。
制御条件を満たす(truthy)場合は処理Aを実行し、制御条件を満たさない(falsy)なら処理Bを実行します。

実機サンプル

ボタンクリックすると結果を表示します

名前 :

性別 :

ボタン :

(ここに答えを表示)

サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title>YWORK : JavaScript : if-else ステートメント</title>
	</head>
	<body>
		<p>ボタンで結果を表示します</p>
		<form>
			名前 : <input type="text" value="山田" id="idText1"><br>
			性別 : <select size="1" id="idSelect1">
				<option value="選択">選択</option>
				<option value="男性">男性</option>
				<option value="女性">女性</option>
			</select><br>
			ボタン<input type="button" value="ご挨拶" onclick="onClick1(idText1.value,idSelect1.value)"><br><!-- #1 -->
		</form>

		<p id="idAnswer">(ここに答えを表示)</p><!-- #elm -->

		<script>
			document.open();
			let elmAnswer = document.getElementById("idAnswer");	//<!-- #elm -->

			/***********************************************************************/
			function onClick1(str1,str2){	//<!-- #1 -->
				
				if(str2 == '選択'){
					elmAnswer.innerHTML = '性別を選択して下さい';
				}
				else{
					if(str2 == '男性'){
						elmAnswer.innerHTML = str1+'くん　こんにちは';
					}
					else{
						elmAnswer.innerHTML = str1+'さん　こんにちは';
					}
				}
			
			}
			/***********************************************************************/
			document.close();
		</script>
	</body>
</html>

サンプルコードの要点

  1. if ステートメントは(入れ子)処理ができる
  2. 条件指定に比較演算子を使う [参照ページ ]
  3. else{処理}で条件不一致の場合の処理ができる