제어문 (조건문, 선택문, 반복문)

1. 제어문 

 

프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말한다.

 

조건에 따라 특정 코드를 실행시키는 조건문

일치하는 경우의 값이 있을 경우에만 특정 코드를 실행 시키는 선택문

코드를 지정한 횟수 만큼 반복해서 실행 시키는 반복문

 

유형	설명	구조
조건문	조건에 따라 다음 문장을 선택적으로 실행	if문 if~else문 다중 if~else문 switch~case문
반복문	동일한 명령을 여러번 처리하거나 특정 연산을 반복적으로 처리	for문 while문 do~while문
보조 제어문	조건문을 만나면 건너뛰거나 반복 수행을 종료(반복문 내에서 사용)	continue문 break문

 

 

2. 조건문 

 

조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어한다.

 

1) if문

 

if문은 조건식을 만족할 경우에만 코드를 실행한다.

 

if(조건식){
	자바스크립트코드;
}

 

조건식에 조건(true, false)가 들어오는 경우

<script>
	var walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?", "0");
	//document.write(typeof walkAmount, "<br>");
	if(walkAmount >= 10000) {
		document.write("매우 좋은 습관을 지니고 계시는군요!!", "<br>");
	}
	document.write("=========== The End ===========");    
</script>

 

해당 코드를 실행하면 prompt로 입력을 받고 조건문이 만족하는지에 따라 결과화면이 달라진다.

10,000보 이상일 경우에는 document.write("매우 좋은 습관을 지니고 계시는군요!!", "<br>"); 가 실행 되고, 10,000보 미만일 경우에는 실행이 되지 않기 때문에 The End화면만 출력된다.

 

조건식에 논리형이 아닌 다른 형이 오는 경우

 

조건식에 논리형 데이터가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로 인식 된다.

0, null, "", undefined 는 모두 false를 반환하고, 그 밖의 값은 true로 인식한다.

 

2) else문

 

else문은 조건식을 만족할 경우와 만족하지 않을 경우에 따라 실행되는 코드가 달라진다.

 

if(조건식){
	자바스크립트 코드1;
}else{
	자바스크립트 코드2;
}

 

숫자 홀수 짝수 구분 예제

<script>
	var num = prompt("당신이 좋아하는 숫자는?", "0");

	if(num % 2 == 0) {
		document.write("당신이 좋아하는 숫자는 짝수입니다.");
	} else {
		document.write("당신이 좋아하는 숫자는 홀수입니다.");
	}
</script>

 

회원 탈퇴 예제

<script>
	var result = confirm("정말로 회원을 탈퇴하시겠습니까?");
	//document.write(result);
	if(result) {
		document.write("탈퇴 처리되었습니다!");
	} else {
		document.write("탈퇴 취소되었습니다!");
	}
</script>

 

 

3) else if문

 

else if문은 두가지 이상의 조건식과 정해 놓은 조건을 만족하지 않을 때에 실행되는 코드로 이루어져 있다.

조건식을 실행하면서 만족하는 값이 나오면 코드를 실행하고 종료한다. 만족하는 값이 하나도 없으면 else문의 코드를 실행한다.

if(조건식1){
	코드1;
}else if(조건식2){
	코드2;
}else if(조건식3){
	코드3;
}else if(조건식4){
	코드4;
}else if(조건식5){
	코드5;
}else{
	코드6;
}

 

현재 월에 해당하는 계절 문구 출력 예제

<script>
	var mon = prompt("현재는 몇 월입니까?", "0");

	if(mon >= 9 && mon <= 11){ 
		document.write("독서의 계절 가을이네요!!");
	}else if(mon >= 6 && mon <= 8){
		document.write("여행 가기 좋은 여름이네요!!");
	}else if(mon >= 3 && mon <= 5){
		document.write("햇살 가득한 봄이네요!!");
	}else{
		document.write("스키의 계절 겨울이네요!!");
	}
</script>

 

4) 중첩 if문

 

조건문 안에 조건문이 있으면 중첩 if문이라고 한다.

if(조건식1){
	if(조건식2){
    	자바스크립트코드;
    }
}

 

 

ID/PW 일치여부 확인 예제

<script>
	var id = "easy1004";
	var pw = "112233";

	var user_id = prompt("아이디는?","");
	var user_pw = prompt("비밀번호는?","");

	if(id == user_id) {
		if(pw == user_pw) {
				document.write(user_id+"님 반갑습니다!");
		} else {
				alert("비밀번호가 일치하지 않습니다.");
				location.reload();
		}
	} else {
		alert("아이디가 일치하지 않습니다.");
		location.reload();
	}
</script>

 

 

3. 선택문 

 

1) switch 문

 

switch 문은 변수에 저장된 값고 switch문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행한다.

if문은 만족하는 데이터가 여러개일때 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용한다.

 

var 변수 = 초기값;
switch(변수) {
	case 값1:코드1;
    breake;
	case 값2:코드2;
    breake;
	case 값3:코드3;
    breake;
	case 값4:코드4;
    breake;
    
    default:코드5;
}

 

입력받은 사이트 이름 실행하는 예제

<script>
	var site = prompt("네이버, 다음, 네이트, 구글 중 \
	즐겨 사용하는 포털 검색 사이트는?", "");
	var url;

	switch(site){
		case "구글": 
			url = "www.google.com";
			break;
		case "다음": url = "www.daum.net";
		break;
		case "네이버": url = "www.naver.com";
		break;
		case "네이트": url = "www.nate.com";
		break;
		default: alert("보기 중에 없는 사이트입니다.");
	}

	if(url) 
		location.href = "http://" + url;
</script>

 

 

4. 반복문 

 

반복문을 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있다.

반복문에는 while문, do while문, for문이 있다.

 

1) while 문

 

while문은 조건식을 만족할 때 까지 코드를 여러 회 반복하여 실행 할 수 있다.

 

var 변수 = 초깃값;
while(조건식){
  자바스크립트코드;
  증감식;
}

 

안녕하세요를 출력하는 예제

    <script>
      // i <= 30 계속 실행되고 i > 30면 while문 종료
      var i = 1;
      while( i <= 10 ) {
        document.write("안녕하세요" + i, "<br />");
        i++;
      }
      document.write("==== The End ====");
    </script>

실행화면

 

2) do-while 문

 

do-while문은 반드시 한 번은 코드를 실행하고 조건식을 검사한다.

var 변수 = 초깃값;
do {
  자바스크립트 코드;
  증감식;
}while(조건식)

 

do while 예제

<script>
	var i = 10;
	do {
		document.write("hello!!");
	} while ( i < 3 )
</script>

실행화면

 

중괄호에 있는 코드를 먼저 실행하고 조건식을 검사하기 때문에 hello가 출력되고 반복문이 종료된다.

 

 

3) for 문

 

조건식을 만족할때까지 특정 코드를 반복하여 실행한다. while문과 비슷하지만, while문보다 사용하기 편해 사용빈도가 높다.

for(초깃값; 조건식; 증감식){
	자바스크립트 코드;
}

 

 

for문을 이용해 '반복1~반복10'까지 출력

<script>
	for( var i = 1; i <= 10; i++ ) {
		document.write("반복" + i, "<br>"); 
	}
</script>

실행화면

 

 

---

참고 :  ⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.