기사 소개

이 기사에서는 제어식에 대하여 다룹니다.

if문

사용 예시

  • 예시1
if(조건식1) {
식1
} else if(조건식2){
식2
} else {
식3
}
  • 예시2
if(조건식) {
	식1
}

사용법

조건식1이 “참”일때는 식1을 실행하고 “거짓”이며 조건식2 에서 “참”일때 식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—;」와 같은 연산자를「단항연산자」라고 불리웁니다.「+」「-」「*」「/」「%」와 같은 연산자 2개의 숫자에의해 연산을 행하므로「이항연산자」라고 불리웁니다. 삼항연산자라는것은「?」와「:」을 조합한 것으로 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(초기화값; 계속조건식 ; 재초기화식) {
	식1
}

사용법

for문은 이하와 같은처리 순서로 행해집니다.

  1. 초기화식을 실행
  2. 계속조건식이면 식1을 실행, 만약 거짓이라면 종료한다.
  3. 재조건식을 실행
  4. 2로 돌아가기

예를들어 10번 경고창을 표시하는 for문을 보도록 합시다.

var i; 

for ( i = 0; i <= 10; i++) {
	alert(i+"번째 실행")
}

이 예를 위의 그림에 대입 해 보면

  1. i=0을 실행한다.
  2. 계속조건식(i<=10)이(i=0이므로 i<=10이라는 계속조건식에 참입니다.)이므로「alert(i+“번째 실행”)」(위의 예의 식1에 해당)을 실행합니다.
  3. 재조건식(i++)을 실행함으로써 i는 0에서1이 됩니다.
  4. 2~3을 반복합니다.
  5. 계속 반복하여 i가 11이 돼면 for문을 종료합니다.

알기쉬운 예없이 계속 설명만 하면 이해하기 힘들거라 생각 되므로, 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 (루프를 계속할 조건식) {
	식1
}

사용법

위에서 설명한 for문을 사용하여 경고창을 10번 실행하는 예를 while문을 사용하여 구현하면 아래와 같이 됩니다.

var i = 0;
	while (i <  10) {
alert(i+"번째 실행")
i++;
}

switch~case

식의 값에 따라서 처리를 다르게 하고 싶을때 사용합니다.

사용법

switch(식) {
	case 값1:
		식1;
	break;

	case 값2:
		식2;
	break;

	case 값3:
		식3;
	break;

	default :
		식4;
	break;
}

사용법

다음 식에서 나오는 결과값에 따라서

「값1」일때에는「식1」을 실행,
「값2」일때에는「식2」을 실행,
「값3」일때에는「식3」을 실행,
그 이외의 경우에는 식 5을 실행하는 구조로 돼어있습니다.

사용 예시

<!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가 호출되면 처리를 행하지 않고 다음 처리를 이행합니다. 그에 비해 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("num_4").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++) {//여기서는 1에서 100까지 반복합니다.
				if (i >= 10) {
					document.getElementById("num_4").textContent=sum;
					//보통이라면 1에서 100까지의 합계를 구하도록 되어있습니다만 break을 추가함으로써 for가 멈추도록 됩니다.
					break;
				}

				if (i%2 == 0) {
					//만약 i의 값이 짝수일 경우 sum에 i의값을 추가합니다
					sum += i;
				} else {
					//만약 i의 값이 홀수일 경우 아무것도 행하지 않습니다.
					continue;
				}				
			}
		}
	</script>
</head>
<body>
	<h1>1에서 10까지의 숫자중에서 짝수의 값만을 구하여라</h1>
	<p id="num_4"></p>
	<button onclick="sum_by_while()">while로sum</button>
	<button onclick="sum_by_for()">for로sum</button>
</body>
</html>

실제 구현

1에서 10까지의 숫자중에서 짝수의 값만을 구하여라

처음하는 Web웹개발 시리즈를 마치면서...

여기까지 따라와 주셔서 정말로 감사합니다. 저의 부족한 지식으로 최대한 힘내서 연재한 웹개발 기사 였지만 어떻셨습니까? 가능하면 여러분들에게 도움이 되는 기사였다고 기억되고 싶네요^^. 만약 질문이 있으시다면 덧글로 언제든지 질문해 주시기 바라며, 앞으로도 잘 부탁 드립니다.

Web개발 - 처음하는Javascript

지금까지의 강좌를 다시보고싶은 분에게

지금까지 배운 지식으로 새로운걸 도전하고 싶은 분에게

프로그래밍 강좌 메인