うちの子供に学ばせるJavaScript教本（3）if文の基本

if文とは条件によって処理を分岐させるための構文です。if文のifには英語で「もし～ならば」という意味があり、プログラムで「Aという条件を満たすときにBという処理を実行する」という場合はif文を使います。

if文には、条件式と処理内容を記述します。条件式がtrueの場合に処理が実行されます。条件式がfalseの場合、処理は実行されません。ここでいうtrue（真）およびfalse（偽）はboolean型の定数です。条件式の記述には比較演算子「==」「>」「<」がよく用いられます。

では、前回作った計算機にif文を使い、入力されなかった場合にalertを出すようにしましょう。

まずはHTMLからですが、前回のを使いまわしてしまいます。

<input type="text" id="keisan01">
<input type="text" id="keisan02">
<button onclick="keisan()">たす</button>
<button onclick="kakeru()">かける</button>
<button onclick="hiku()">ひく</button>
<button onclick="waru()">わる</button>
<div id="kekka"></div>

たす
かける
ひく
わる

続いてJavaScriptですが、

入力欄から取り出した値を整数としてx,yに代入した後にif文を入れます。

ここではif(もしも)tasu/tasareruが空欄（セミコロンの間が何も無し）だったらalertを表示するようにします。

function keisan() {
	tasu = document.getElementById('keisan01');	
	tasareru = document.getElementById('keisan02');	

	x = parseInt(tasu.value);	
	y = parseInt(tasareru.value);
	
		if (tasu.value == ""){
			alert("たす数字が入力されてないよ！");
			return;}
			
		if (tasareru.value == ""){
			alert("たされる数字が入力されてないよ！");
			return;}

	b = x + y;

	kekka.innerHTML = b;
}

掛け算の方はさらにギミックをつけて、もしも計算結果が100を超えていたら背景を変更するようにしてしまいましょう。

function kakeru() {
	tasu = document.getElementById('keisan01');	
	tasareru = document.getElementById('keisan02');	

	x = parseInt(tasu.value);	
	y = parseInt(tasareru.value);
	
		if (tasu.value == ""){
			alert("かける数字が入力されてないよ！");
			return;}
			
		if (tasareru.value == ""){
			alert("かけられる数字が入力されてないよ！");
			return;}
	
	b = x * y;

	kekka.innerHTML = b;
	
	if (b > 100){
			 document.body.style.backgroundImage = "url('何か画像のパスをここに入れます')";
			}else {
			kekka.style.color = "#00ff66";
			}
	
}

なんの画像が出るかはお楽しみです。