条件によって実行させるための if構文

比較演算子

JavaScriptの演算には、＋－＊／などの演算以外で、条件を判定する以下の比較演算と呼ばれるものがあります。
これらは、左右の式を比較して、その比較が正しいかを判断するためのもので、 正しいと判断すると true 、正しくないと判断する false という演算結果が得られます。
この演算結果は、後述するif や、それ以外の繰り返しなどで使われ、これにより単純に命令を実行させるのではなく、この結果が true の場合だけ実行させるような制御が可能になります。

条件の判定表記	意味
左 < 右	左が右より小さい場合にtrueで、そうでなければfalseの演算結果になります。
左 <= 右	左が右より小さいまたは等しい場合にtrueで、そうでなければfalseの演算結果になります。
左 > 右	左が右より大きい場合にtrueで、そうでなければfalseの演算結果になります。
左 >= 右	左が右大きいまたは等しい場合にtrueで、そうでなければfalseの演算結果になります。
左 == 右	左が右と等しい場合にtrueで、そうでなければfalseの演算結果になります。（文字列と数値の比較でも変換して比較可能です。）
左 === 右	左右とデータが等しくて、データの種類も同じ場合にtrue、そうでなければfalseの演算結果になります。
左 != 右	左が右と等しくない場合にtrueで、そうでなければfalseの演算結果になります。

例えば、変数bの記憶内容が10でない時にvにtrueを記憶させ、bが10であればfalseを記憶させるには次のように書きます。
var v = b != 10;

条件によって実行させる書き方

条件によって実行させたり、させなかったりを指示するの命令は、次のように書きます。
下記の条件式のところに、上記のような trueまたはfalseの結果になる条件の判定を書きます。

これはifの構文（略してif文:イフブン）と呼ばれるもので、以下に具体的な例を示します。
それはボタンのクリックごとで、ONのスイッチ画像とOFFスイッチ画像で交互に切り替えるHTMLで、次のボタンで確認できます。⇒
これを実現するための幾つかの例を挙げます。いずれの方法でもif文を使わなくては実現できません。
それは、ONのスイッチ画像を出す処理にするか、または、OFFのスイッチ画像を出す処理にするかのどちらか一方だけの処理にする必要があるからです。
そのためには、変数にどちらの状態かを記憶して、その変数の記憶内容で判定して処理を分ける考え方が必要です。

次の例は、変数に現在の画像ファイルのパスを記憶する方法です。
これは、現在のスイッチが、"img/swOFF.gif"であれば、 "img/swON.gif"に変更します。
　　そうでないなら、"img/swOFF.gif"に変更するHTMLです。

<html>
<head><title>test</title>
<script type="text/javascript">
<!--
var path="img/swOFF.gif";//現在の画像のファイルパスを記憶

function btn_Click1(){
	if(path == "img/swOFF.gif"){//等しいなら実行
		path = "img/swON.gif";
		document.sw.src = path;
		document.bgColor = "yellow";

	} else {// 等しくないなら実行
		path = "img/swOFF.gif"; 
		document.sw.src = path;
		document.bgColor = "blue";
		
	}
}
// --></script>
</head>
<body>
<p>
<img src="img/swOFF.gif" name="sw" onclick="btn_Click1()"><br>
スイッチが ON/OFF できます。
</p>
</body>
</html>

次は、ifの判定に『変数の内容が～でなければ』を使う例です。
この場合はスイッチがの画像が、"img/swON.gif"のファイル文字列と等しくない場合に "img/swON.gif"に変更します。
　　そうでないなら、"img/swOFF.gif"に変更するHTMLです。
この場合、path変数の初期の値は次回に変更する予定のものでなければ何でもよく、空の文字列の""にしています。

<html>
<head>	<title>test</title>
<script type="text/javascript">
<!--
var path="";//画像パス（最初に行わせるif判定にあわせて設定します）

function btn_Click1(){
	if(path != "img/swON.gif"){//等しくないなら実行
		path = "img/swON.gif";
		document.sw.src = path;
		document.body.style.backgroundColor = "yellow";

	} else {// 等しいなら実行
		path = "img/swOFF.gif"; 
		document.sw.src = path;
		document.body.style.backgroundColor = "blue";
		
	}
}
// --></script>
</head>
<body>
<p>
<img src="img/swOFF.gif" name="sw" onclick="btn_Click1()"><br>
スイッチが ON/OFF できます。
</p>
</body>
</html>

次は、背景色のデータ記憶する変数をbcの名前で用意して利用した例です。
連動して動作する現在の背景色のデータを、この変数に記憶し、そのデータから次に変更すべき処理に進めるようにifを作っています。

<html>
<head>	<title>test</title>
<script type="text/javascript">
<!--
var bc="blue";//現状

function btn_Click1(){
	if(bc == "blue"){//等しいなら実行
		bc = "yellow";
		document.sw.src = "img/swON.gif";
		document.body.style.backgroundColor = bc;

	} else {// 等しくないなら実行
		bc = "blue"; 
		document.sw.src = "img/swOFF.gif";
		document.body.style.backgroundColor = bc;
		
	}
}
// --></script>
</head>
<body>
<p>
<img src="img/swOFF.gif" name="sw" onclick="btn_Click1()"><br>
スイッチが ON/OFF できます。
</p>
</body>
</html>

次は実際に使う情報ではなく、スイッチがオンかオフか？という現状の状態をメモするための変数を用意しています。そしてこれを判定して次に処理すべきifの構造を作っています。
具体的には、swの名前で用意して現在のスイッチの状態がオンなら"on"のデータを記憶し、オフなら"off"のデータを記憶して、それを判定に使っています。

<html>
<head>	<title>test</title>
<script type="text/javascript">
<!--
var sw="off";//現状の状態を記憶する変数

function btn_Click1(){
	if(sw == "off"){//等しいなら実行
		sw = "on";//onの状態をメモして、以下でその通りの画面へ変更
		document.sw.src = "img/swON.gif";
		document.body.style.backgroundColor = "yellow";

	} else {// 等しくないなら実行
		sw = "off"; 
		document.sw.src = "img/swOFF.gif";
		document.body.style.backgroundColor = "blue";
		
	}
}
// --></script>
</head>
<body>
<p>
<img src="img/swOFF.gif" name="sw" onclick="btn_Click1()"><br>
スイッチが ON/OFF できます。
</p>
</body>
</html>

以上で紹介したように、たくさんの作り方が存在します。
大事なことは、上記の全ての動作を理解し、自分でどれが良いかを判断することです。
答えはありません。上記で例であれば自分好みを自分で見つけることです。
（大きなプログラムになると、場合によって○○○の作り方が □□□の場合の作り方として、適切であると言うような答えがある場合もあります。
なお、私の個人的な好みは、最後の例です。）

条件によって実行させるための if構文 chk_link();

比較演算子

条件によって実行させる書き方

条件によって実行させるための if構文