【プログラミング入門】【JavaScript】7日目 If(もし～だったら)

ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

プログラムの基本は

(1)上から順番に
(2)条件で分かれ道
(3)くり返し

でしたね！

今回から(2)条件で分かれ道をやっていきます！

いろいろな条件でプログラムを分かれ道させてみましょう！

プログラミングがどんどん楽しくなる時ですね！

■7日目　プログラム１■

<script>

	/*jspgm7_1*/
	/*7日目　プログラム１*/

	var kotae = 0;

	kotae = prompt("世界一高い山は？１・エベレスト：２・富士山");

	if(kotae == 1)alert("正解です！");
	else alert("ブッブー！不正解です！");

</script>

■実行結果■

■説明■

条件によって分かれ道をさせる事ができる「if(イフ)」命令を紹介します。

最初に答えを入れるための変数

var kotae = 0;

を用意します。そして「prompt」命令で答えを受け取ります。

kotae = prompt("世界一高い山は？１・エベレスト：２・富士山");

ここで答えを受け取ったトコロで「if」命令の出番です！

与えられた条件によってプログラムを分かれ道させていきます。

if(kotae == 1)alert("正解です！");
else alert("ブッブー！不正解です！");

この「if」命令のそれぞれの条件を見ていきましょう！

条件が合う場合

if(kotae == 1)alert("正解です！");

「if(条件)alert("正解です！");」この最初の「条件」が合っていれば続けて書いた「alert("正解です！");」が実行されます。「==」の説明は後ほどします！

条件が合わない場合

else alert("ブッブー！不正解です！");

このelse(エルス)に続くプログラムはそうではない時に実行されます！最初の条件があわない時に必ず実行されます！

２つに分かれる場合はこのように「if」と「else」でそれぞれ分かれ道させます！

ちなみにこの「if」命令を

if(kotae == 1)alert("正解です！");

だけにして「else」を書かない場合は、「条件が合う場合」だけ実行されて、「条件が合わない場合」は「何もしない」プログラムになります！

if(kotae == 1)

あとはこの気になる「==」ですね！まあ・・・。そのまま覚えてください。

「kotae == 1」は「kotae」と「1」は同じか？という意味になります！これを「条件式(じょうけんしき)」といいます！

しつこく言いますが「==」イコールは２つです。ここを間違えて「=」イコール１つにしてしまうと意味がぜんぜん違うけれど文法は合ってるのでプログラムがワケわからない方向に突き進むので注意しましょう！

さきほどの「==」の他にもいろいろな条件式があります。

仮にあなたを「you」として、年令を聞かれていると考えてください。

どこからどこまでが、含まれる(ふくまれる)、含まれない(ふくまれない)を意識しながら他の条件式も見てみましょう！

if(you == 20)

あなたが２０才ちょうどだったら。

if(!(you == 20))

あなたが２０才ではなかったら。

この場合はそれ以外の年令が全てあてはまります。

if(you < 20)

あなたが２０才未満だったら。

この場合は１９才から、その下の年令全てあてはまります。マイナスもあてはまります。２０才は含まれません！

if(you > 20)

さきほどの逆ですね！２１才から、その上の年令全てです。同じく２０才は含まれません！

if(you <= 20)

あなたが２０才以下だったら。

この場合は２０才も含めてその下の年齢すべてという意味になります。

if(you >= 20)

あなたが２０才以上だったら。

同じく２０才も含めてその上の年齢すべてという意味になります。

含まれる、含まれないが大事です。あと「<」と「=」の順番を逆に「=<」とプログラムを書いてエラーになったりするミスが多いので気をつけましょう！

ではいろいろな条件式を使って条件を増やしてみましょう！

テストの点数をランク分けするプログラムです！

80点～100点・・・Ａランク

30点～79点・・・Ｂランク

0点～29点・・・Ｃランク

この条件でランク分けをしてみます！

■7日目　プログラム２■

<script>

	/*jspgm7_2*/
	/*7日目　プログラム２*/

	var test = 0;

	alert("テスト結果を点数でランク分けします！\nＡ(80～100点)：Ｂ(30～79点)：Ｃ(0～29点)");

	test = prompt("テストの点数を入力してください！");

	if(test >= 80)alert("結果" + test + "点 Ａランクです！");
	else if(test >= 30)alert("結果" + test + "点 Ｂランクです！");
	else alert("結果" + test + "点 Ｃランクです！");

</script>

■実行結果■

■説明■

「else if」を続ける事によって、「そうではなく、もし～だったら・・・。」と続ける事ができます。

if(条件)続きの命令
else if(条件)続きの命令
else if(条件)続きの命令
else 続きの命令

このようにさらに条件を加える事もできます！

if(test > 79)alert("結果" + test + "点 Ａランクです！");
else if(test > 29)alert("結果" + test + "点 Ｂランクです！");
else alert("結果" + test + "点 Ｃランクです！");

さきほどのプログラムで「=」を抜いた場合です。

含まれる、含まれないが大事です！

if(test > 79)alert("結果" + test + "点 Ａランクです！");
if(test > 29)alert("結果" + test + "点 Ｂランクです！");
else alert("結果" + test + "点 Ｃランクです！");

「else if」の「else」を抜いてみました。

この場合は「そうではなく」の意味がなくなるのでたとえば点数が９０点だとしたら

■実行結果■

結果90点 Ａランクです！

結果90点 Ｂランクです！

というように両方の条件が反応してしまうので注意が必要です！

今までは条件の後に一つの命令だけしか使えませんでしたね！{}カッコを使うと複数の命令が実行できるようになります。

■7日目　プログラム３■

<script>

	/*jspgm7_3*/
	/*7日目　プログラム３*/

	var kotae = 0;

	kotae = prompt("世界一高い山は？１・エベレスト：２・富士山");

	if(kotae == 1){
		alert("正解です！");
		alert("もの知りはかせですね！！！");
	}
	else{
		alert("ブッブー！不正解です！");
		alert("もっと勉強しましょう！");
	}

</script>

■実行結果■

■説明■

一言つけ加えてみました！{}カッコを使いその中に命令を書く事で複数の命令を実行する事ができるようになります。

{}カッコ内の命令の先頭を見やすいようにずらして書いているトコロにも注意です！

次回は「if」の仕組みについてもう少し詳しく見ていきます！

8日目 If(もし～だったら)パート２