6.3 if-else文を使ってみよう

前節では「もし○○○ならば、×××する」という単純な条件分岐を処理する「if文」について解説しました。本項ではそれを少し発展させ、「もし○○○ならば、×××する。そうでなければ△△△する」という条件分岐を処理するif-else(エルス)文について解説します。

6.3.1 if-else文の基本構文

if – else文の基本構文は下記のようになります。

書式:if-else基本構文

この場合は、もし条件式が合っていたら、処理①を行い、合っていなければ処理②を行う、ということになります。
if-else文の処理の流れをフローチャートにすると、図 6.3.1のようになります。

図 6.3.1 : if-else基本構文の処理フロー

◉ポイント

二者選択のような処理を行う場合、if-else文を使う。

6.3.2 if-else文を使って文字列比較を行うプログラム

変数の値に応じて、if-else文の各ブロック内のメッセージが出力されることを確認します。

①ソースフォルダ    :javascript/ch06
②ファイル名      :if_else_statement.html

➢ If_else_statement.html

<html>
	<head>
		<title>if-else文を使って文字列比較を行うプログラム</title>
	</head>
	<body>
		<h1>if-else文を使って文字列比較を行うプログラム</h1>
		<script type="text/javascript">

			var str = "y";

			if(str == "y"){
				document.write("変数strには「y」が格納されています。");
			} else {
				document.write("変数strには「y」以外の「" + str + "」が格納されています。");
			}

		</script>
	</body>
</html>

実行結果
変数strが「y」の場合の画面

変数strが「y」以外の場合の画面

解説
9行目では変数strを宣言し、文字列のyを代入しています。   9: var str = "y";

11~15行目がif-else文の処理になります。11行目のif文の条件式で、変数strの値が「y」であるかを確認しyであれば12行目の処理が実行されます。そうではないy以外の場合、14行目の処理が実行されるようになっています。   11: if(str == "y"){
   12:   document.write("変数numには「y」が格納されています。");
   13: } else {
   14:   document.write("変数numには「y」以外の「" + str + "」が格納されています。");
   15: }

このサンプルプログラムのフローチャートは図 6.3.2に示します。

図 6.3.2 : if_else_statement.htmlのフローチャート