初めてのJavascript-(8)-制御式(完)

初めてのJavaScript///

記事の紹介

この記事では制御式に対して扱います。

if文

書き方

  • 例１
if(条件式1) {
式１
} else if(条件式2){
式２
} else {
式3
}
  • 例２
if(条件式) {
	式１
}

使用法

条件式1が真のときに式1を実行し、偽の時に条件式2で真になったら式２を実行し、両方偽の時はelseの式3実行します。elseが必要ではない場合はelse以降は省略しても構いません。

使用例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		var checkEven = function() {
			var v = document.getElementById("number").value;
			var r = document.getElementById("result");
			if(v.length == 0) {
				r.textContent = "何かの入力値が必要です";
			} else if(isNaN(v)){
				r.textContent = v + "は数字ではありません";
			} else {
				r.textContent = v + "は数字です";
			}	
		}
	</script>
</head>
<body>
<h1>数字か否かを判明します。</h1>
	<input id="number" />
	<button onclick="checkEven()">入力判定</button>
	<p id="result"></p>
</body>
</html>

「document.getElementById(“number”).value」で入力された値を取得します。v.lengthには文字列であるvの長さを求めた物です。v.lengthに対しては前の配列の記事を見ると理解できると思います(Stringは文字が集まって作られた配列ですので配列のようにlengthを使えます)。

「isNaN(v)」は「is Not a Number」という意味で、「vが数字であること」が真ならtrueを返す関数です。その結果によって、表示する文字列を変化させています。

実装

数字か否かを判明します。

三項演算子

「i++;」「i—;」の様な演算子を「単項演算子」と呼びます。「+」「-」「*」「/」「%」といった演算子２つの数値の演算を行うので「二項演算子」と呼ばれます。三項演算子とは、「？」と「:」を組見合わせたもので、if~else文のような処理を簡略化したものです。

書き方

条件式？式1：式2

使用法

もし、条件式が真なら式1を、偽なら式2を実行します。

使用例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		function checkEven() {
			var v = document.getElementById("number").value;
			var r = document.getElementById("result");
			if(v.length == 0) {
				r.textContent = "何かの入力値が必要です";
			} else if(isNaN(v)){
				r.textContent = v + "は数字ではありません";
			} else {
				r.textContent = (v%2==0) ? "偶数です":"奇数です";
			}	
		}
	</script>
</head>
<body>
<h1>奇数か偶数かを判断します。</h1>
	<input id="number" />
	<button onclick="checkEven()">入力判定</button>
	<p id="result"></p>
</body>
</html>

実装

奇数か偶数かを判断します。

for文

for文はある条件の下で処理を繰り返す時に使います。

書き方

for(初期化式; 継続条件式 ; 再初期化式) {
	式１
}

使用法

for文は以下の様な処理手順は以下の通りです。

  1. 初期化式を実行
  2. 継続条件式が真なら式１を実行、もし偽なら終了する。
  3. 再条件式を実行
  4. ２に戻る

例えば、10回アラートウィンドウを表示するfor文を見てみましょう。

var i; 

for ( i = 0; i <= 10; i++) {
	alert(i+“回目発動”)
}

この例を上記の例に代入すると

  1. i=0を実行する
  2. 継続条件式(i<=10)が真(i=0なのでi<=10と言う継続条件式に当てはまる)なので「alert(i+“回目発動”)」(上記の例の式１に該当)を実行します。
  3. 再条件式(i++)を実行によってiは0から１になる。
  4. 2~3を繰り返す。
  5. 繰り返してiが11になったらfor文は終わる。

まだ詳しい例がないまま説明が続いて理解しづらいと思います。なので使用例を通ってもう一回確認してみましょう。

使用例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		function sum() {
			var v =  document.getElementById("number").value;
			var r = 0;
			for (var i=1; i<=v ; i++) {
				r+=i;
			}
			var s = "1から"+v+"の合計は"+r+"です";

			document.getElementById("result").textContent = s;
		}
	</script>
</head>
<body>
<h1>1から入力値までの合計を求めます。</h1>
<input id="number" />
<button onclick="sum()">合計</button>
<p id="result"></p>
</body>
</html>

実装

1から入力値までの合計を求めます。

whileループ

while文はfor文とよく似ていますが、ループ継続の条件が真である間、式1の実行を繰り返します。

書き方

while (ループ継続の条件式) {
	式１
}

使用法

先ほどのfor文を使ってアラートウィンドウを10回実行する例を、while文で書き直すと以下のようになります。

var i = 0;
	while (i <  10) {
alert(i+“回目発動”)
i++;
}

switch~case

式の値に応じて、いくつかの処理に分岐させる場合に使用します。

書き方

switch(式) {
	case 値１:
式1;
break;
case 値2:
	式2;
	break;
case 値3:
	式3;
	break;
default :
	式5;
	break;
}

使用法

式の評価した値が

「値１」の時は「式１」を実行、
「値２」の時は「式２」を実行、
「値３」の時は「式３」を実行、
それ以外の時は式５を実行という具合になります。

使用例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script>

		window.addEventListener('keydown', keydown);

		function keydown (e) {
			var s = "";
			switch (e.keyCode) {
				case 37:
					s = "左";
					break;
				case 38:
					s = "上";
					break;
				case 39:
					s = "右";
					break;
				case 40:
					s = "下";
					break;
				default:
					s = "それ以外";
					break;
			}
			document.getElementById("info").textContent = s;
		}
	</script>
</head>
<body>
<h1>押した方向キーのボタンを判明します。</h1>
<p>あなたが入力した方向きは</p>
	<p id="info"></p>
<p>です</p>
</body>
</html>

実装

押した方向キーのボタンを判明します。

あなたが入力した方向きは

です

continue, break;

forやwhileのようにループ文の場合は条件が満たされるまでループが止まらなくて制御が難しいです。ここで登場するのがcontinueとbreakです。

continueやbreakはfor文やwhile文といったループ処理において、その処理の方向を変える命令です。

書き方

  • whileの場合
while(条件式1) {
	if(条件式2) {
		continue; //条件式2の場合実行をしない。
}
if(条件式3) {
	break; //ループを抜ける
}
}
  • forの場合
for(初期化式; 継続条件式 ; 再初期化式) {
	if(条件式2) {
		continue; //条件式2の場合実行をしない。
}
if(条件式3) {
	break; //ループを抜ける
}
}

使用法

for文やwhile文でcontineが呼ばれるとcontinue文が呼ばれると、処理が行われることなく次の処理に移ります。それに対してbreakが呼び出されると、ループの処理が終わります。

使用例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		function sum_by_while() {
			var i = 0;
			var sum = 0;
			while (true) {//whileの条件をtrueにすると条件がいつも真なので無限ループをします。

				i++;

				if (i >= 10) {
					document.getElementById("s").textContent=sum;
					//普通なら無限ループでwhileが終わることはありませんがbreakを使うことによってwhileが止まりました。
					break;
				}

				if (i%2 == 0) {
					//もしiの値が偶数の場合sumに追加する
					sum += i;
				} else {
					//もしiの値が奇数の場合は何もしないように設定しました。
					continue;
				}

			}	
		}
		function sum_by_for() {
			var sum = 0;
			for(var i=0; i<100; i++) {//ここではiが100まで繰り返すようにしました。
				if (i >= 10) {
					document.getElementById("s").textContent=sum;
					//普通なら1から100までの合計を求めるようになりますがbreakを入れることによってforが止まるようになりました。
					break;
				}

				if (i%2 == 0) {
					//もしiの値が偶数の場合sumに追加する
					sum += i;
				} else {
					//もしiの値が奇数の場合は何もしないように設定しました。
					continue;
				}				
			}
		}
	</script>
</head>
<body>
	<h1>1から10までの中で偶数だけの合を求める</h1>
	<p id="s"></p>
	<button onclick="sum_by_while()">whileでsum</button>
	<button onclick="sum_by_for()">forでsum</button>
</body>
</html>

実装

1から10までの中で偶数だけの合を求める

初めてのWeb基本の終わりに。。。

ここまでついて来て下さった皆様、誠にありがとうございました。私の足りない知識で頑張って連載したWeb開発の記事でしたが、どうでしょうか？できれば皆の役に立つ良い記事として思われたいですね。もし質問などがございましたら自由掲示板にいくらでも問い合わせができますので、よろしくお願いいたします。

Web開発-初めてのJavascript

今までの講座を見直したい方へ

  • 初めてのCSS
初めてのCSS-(1)-初めてのCSS
記事の紹介この記事ではCSSの簡単な紹介をします。CSSはページのデザインを設定するもの前章まではHTMLの紹介をやってました（もし、まだ初めてのHTMLが終わってない方は初めてのHTMLを聞いてから初めてください。）。そこでは、主に見出しや本文など、文書の構造を...
  • 初めてのHTML
初めてのHTML-(1)-初めてのHTML
記事の紹介この記事ではHTMLに対して簡単に説明します。HTMLはホームページを書くための言語私たちが使ってるWebには、ニュース、SNS、ゲームなど多種多様なサイトがあります。これらのサイトの基本になっているのが「HTML 」(Hyper Text Markup Language)と言う言語...

プログラミングメイン

プログラミング
このサイトを運営しながら勉強したものです。どなたでもいいですので役に立ってたら幸いです。Web開発 プログラミング初心者にもおすすめできるWeb開発の講座です。 初めてのWeb開発の基本初めてのHTML初めてのCSS初めてのJavaScriptJSP入門JSPWebゲーム開発canvasの...