※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성하였음

제어문

조건문

조건문은 조건식을 만족(true)했을 때에만 실행문을 수행하는 제어문이다.

if 문

조건식을 만족할 경우 중괄호({}) 내의 실행문을 수행한다.

기본형식
if(조건식) {
실행문;
}

다음 예제는 나이가 20세 이상일 경우에만 "당신은 성인입니다"라고 출력한다.

<script type="text/javascript">
//<![CDATA[
  var myAge = 25;
  if(myAge >= 20){					// myAge 변수값이 25이므로 현재 조건식을 만족(true)함.
    document.write("당신은 성인입니다.");			// 출력값 : "당신은 성인입니다."
  }
//]]>
</script>

응용문제
prompt를 이용해서 임의로 정한 변수에 시험 점수를 입력 받아 저장한 후, 만일 70점보다 크거나 같으면 '합격'이라는 메시지를 출력한다.

<script type="text/javascript">
//<![CDATA[
  var testNum = prompt("시험 점수를 입력하세요.");
  if(testNum >= 70){			// 시험 점수가 70점 이상일 경우에만 조건을 만족(true)함
    document.write("합격입니다~!!");
  }
//]]>
</script>

if~else 문

조건식을 만족(true)했을 때에는 if 문의 중괄호에 든 실행문1을 수행하며, 그렇지 않은(false) 경우라면 else 문의 중괄호 안에 든 실행문2를 수행합니다. 그러므로 출력 결과가 2가지일 경우에 사용한다. 가령 "합격" 또는 "불합격"을 출력하거나 "성인" 또는 "미성년자"와 같이 2가지 경우에 따른 결과를 각각 출력하고자 할 때에 사용한다.

기본형식
if(조건식) {
실행문1;
}else{
실행문2;
}

다음 예제는 나이가 20세 이상이고, 30세 미만일 경우에는 "통과"라고 출력한다. 그밖에 만족하지 않는 경우라면 "비통과"라고 출력하는 if~else 문의 예제이다.

이 경우에 생각해 볼 수 있는 조건문 구조는 다음과 같다.

myAge >= 20 --- 20세 이상

&&

myAge < 30 --- 30세 미만

→ true → "통과" // → false → "비통과"

<script type="text/javascript">
//<![CDATA[
  var myAge = 33;
  if(myAge >= 20 && myAge < 30){		//20세 이상이고 30세 미만일 때 실행
    document.write("통과");
  }else{					// 조건을 만족하지 않을 때 실행
    document.write("비통과");
  }
//]]>
</script>

앞에서의 예제는 나이(myAge)의 값에 따라 "통과" 또는 "비통과"라는 2가지 결과가 출력되는데, 나이(myAge)변수에 33이 저장되어 있으므로 조건을 만족하지 못하여 else문이 실행되어 "비통과"가 출력된다.

if ~ else if 문

맨 위에서 지정한 조건식 1부터 아래로 내려가면서 순서대로 조건식 검사를 수행한다. 만일 조건식 검사를 하다가 조건식 2에서 만족하게 되면 그 중괄호({})에 든 실행문2를 수행하며 조건문 검사를 마친다.

하지만 만약 조건식을 모두 만족하지 못하면 마지막 else 문 중괄호 내에 기술된 실행문4를 수행한다. 그러므로 이 형식의 조건문은 출력 결과가 3가지 이상일 경우에 사용한다

기본형식
if(조건식1) {
실행문1;
}else if(조건식2){
실행문2;
}else if(조건식3){
실행문3;
}else{
실행문4;
}

이제, 학점(num)이 90점 이상이면 "A학점", 80점 이상이면 "B학점", 70점 이상이면 "C학점", 60점 이상이면 "D학점", 그밖에 60점 미만이면 "F학점"이 출력되는 성적 프로그램을 만들어 보자.(단, 학점(num)이 75점이라 가정하여 작성하자.)

<script type="text/javascript">
//<![CDATA[
  var num=75;
  if(num >= 90){			// 90점 이상일 경우
    document.write("A학점");
  }else if(num >= 80){			// 80점 이상일 경우
    document.write("B학점");
  }else if(num >= 70){			// 70점 이상일 경우
    document.write("C학점");
  }else if(num >= 60){			//60점 이상일 경우
    document.write("D학점");
  }else{				// 60점 미만일 경우
    document.write("F학점");
  }
//]]>
</script>

switch ~ case 문

switch ~ case 문은 지정한 변수에 저장된 데이터(data)와 정확히 일치되는 경우(case)가 있는지 검사하여 일치하는 데이터가 있을 때에는 해당 실행문을 수행한 뒤 마지막의 break 문으로 반복을 끝낸다. 하지만 일치되는 값이 없을 때에는 default에 해당하는 실행문을 수행한 뒤 문장을 마치게 된다.

기본형식
num = 3;
switch(num){
case 1 :
실행문1;
break;
case 2 :
실행문2;
break;
case 3 :
실행문3;
break;
default :
실행문4;
}

위의 기본형식에서 변수 num의 값은 3이므로, switch 문에서 num에 저장된 데이터(3)와 일치하는 case문이 있는지 검사한다. case 3의 경우 num에 저장된 데이터와 일치하므로 실행문3을 수행할 것이다. 이후 break 문을 만나서 switch 문을 마치게 되는 것이다.

그렇다면 조건문과 switch ~ case 문은 무엇이 다른 것일까?

조건문은 말 그대로 '데이터 중복'의 경우라 하더라도 특정 '조건'을 허용할 때 사용하는 반면, switch ~ case 문은 '정확히 일치하는' 경우(case)만 허용할 때 사용한다.

예를 들면 'A>=90'인 경우, 즉 'A가 90 이상'이라는 조건 하에서는 A가 91이나 95일 경우 언제든 만족하겠다. 하지만 switch ~ case 문은 데이터의 중복이 허용되지 않는다. 즉, 정확히 일치하는 데이터가 있을 경우(case)에만 만족하게 되는 것이다.

다음은 응답창(prompt) 기능을 이용하여 지역(서울, 경기, 부산)을 입력한 후에 해당 지역번호를 출력하는 예제이다.

<script type="text/javascript">
//<![CDATA[
  var myArea = prompt("지역을 입력하세요", "서울");
  switch(myArea){
    case "서울" :			// myArea = "서울"인 경우
      areaNum = "02";
      break;
    case "경기" :			// myArea = "경기"인 경우
      areaNum = "031";
      break;
    case "부산" :			// myArea = "부산"인 경우
      areaNum = "051";
      break;
    default :				// 위에 해당되는 지역이 없을 경우
      alert("등록되지 않은 지역입니다");
  }
  document.write(myArea + "의 지역번호는 " + areaNum);
//]]>
</script>

반복문

반복문은 해당 조건식을 만족하는 동안 중괄호({}) 안의 실행문을 반복적으로 수행한다. 만약 1붜 10까지 그냥 출력한다면 출력문(document.write())을 이용해서 1에서 10까지 총 10번이나 작성을 해야겠지만, 반복문을 이용하면 이런 번거로움을 줄일 수 있다.

반복문에는 'while 문'과 'for 문'으로 2가지 종류가 있다. 이 2가지의 문법은 비슷하지만 실무에서는 보통 'while'문 보다 'for'문을 더 많이 사용하는 편이다.

while문

while은 '~하는 동안'이라는 뜻의 접속사다. 즉, 특정 조건식을 만족하는 동안에 지정된 실행문을 반복적으로 수행하게 된다. 그 기본형식은 다음과 같다.

기본형식
num = 3;
var i = 초기값;
while(조건식){
실행문;
증감식;
}
[예]
var i = 1;
while(i<=10){
document.write(i+"<br />");
i++;
}

• [예]에서 변수 i에 지정된 초기값은 1이며 while에서 조건식을 검사한다.
• 'i=1'이라는 초기 변수값 지정은 조건식을 만족하므로 중괄호({})의 실행문을 수행하여 1을 출력하고, <br />로 개행(줄바꿈)이 작동하겠다.
• 그 다음에 기술된 증감식(i++)에 의하여 i값은 1만큼 증가하여 2가 된다.
• 중괄호 ({})의 마지막 실행문을 마친 후에는 다시 while문 조건식 검사를 반복한다. 역시 'i=2'가 된 상태로 조건을 만족하므로 실행문을 수행하면 2가 출력되고, 개행이 된다.
• 그리고 역시 마지막 증감식을 만나면서 i값은 1만큼 증가하여 3이 된다.

이렇게 반복하다 보면 i값이 11이 되어 while 문의 조건식(i <= 10, i가 10 이하)을 만족하지 못하게 되고, while 문은 반복을 멈추게 된다. 다음은 위 <예>의 출력 결과이다.

1
2
3
4
5
6
7
8
9
10

응용문제
10부터 1까지 내림차순으로 2의 배수(짝수)만 출력해 보세요.
10, 8, 6, 4, 2

여기서 반복문의 조건은 '10과 1 사이에 있는 2의 배수들'이므로 초기값은 10이 되겠다. 또한 1까지의 '내림차순'이 필요하므로 조건식은 '1보다 크거나 같다(i>=1)'가 되고 마지막 증감식으로는 1씩 줄어드는 감소 연산자(i--)가 적당하겠다.

한 가지 주의할 점은, '2의 배수만 출력하라'는 조건의 구현인데, 여기서는 출력 시 '2로 나누었을 때 나머지가 0일 경우(i%2==0)'를 if조건문으로 덧붙여주면 되겠다.

//<![CDATA[
  var i = 10;					// 초기값

  while(i>=1){					// 조건식
    if(i%2 == 0) document.write(i+"<br />");	//2의 배수일 경우에만 출력
    i--;
  }
//]]>
</script>

for 문

for 문 역시 while 문과 비슷하지만 간단한 기술 방식으로 사용 빈도가 더 높은 편이다.

기본형식

for(var k=초기값; 조건식; 증감식){
실행문;
}
[예]
for(var k=1; k<=10; k++){
document.write(k+"
");
}

위 [예]의 결과는 다음 순서대로 진행되어 1에서 10까지 순서대로 출력하게 된다.

• k의 초기값 1은 10보다 작으므로 조건식 만족
• 실행문을 수행하여 초기값인 1을 출력
• 증감식으로 1이 증가한 2를 변수 k에 새로 저장
• k값이 여전히 10보다 작으므로 역시 조건식 만족
• 실행문을 수행하여 현재 저장값인 2를 출력
• 증감ㅁ식으로 다시 1이 증가된 3이 k값으로 저장
  이렇게 k값이 증가하다가 11이 되면 조건을 만족하지 않으므로 반복문을 종료하게 됨

응용문제
<HTML 태그 중 일부를 변수로 작동하기>
<h>태그를 사용하여 다음과 같이 출력하시오.

h6 재미있는 자바스크립트

h5 재미있는 자바스크립트

h4 재미있는 자바스크립트

h3 재미있는 자바스크립트

h2 재미있는 자바스크립트

h1 재미있는 자바스크립트

우선 생각해 볼 수 있는 것은 <h*>라는 태그가 작동하게 한 뒤, *에 해당하는 값을 변수로 하여 6에서 1까지 줄어가는 방법일 것이다. 다음 코드를 살펴보자.

<script type="text/javascript">
//<![CDATA[
  for(ver k = 6; k >= 1; k--){
    document.write("<h"+ k + ">h" + k + " 재미있는 자바 스크립트</h" + k + ">");
  }
//]]>
</script>

h6에서 h1까지이므로 변수 k의 초기값은 6이며, k값이 1까지 구현된어야 하므로 조건식은 'k가 1보다 크거나 같다(k >= 1)'가 된다. 또한 감소 연산자를 사용한 증감식이 필요하다.

태그가 들어간 실행문 작성법

• 위 반복문의 실행문이 복잡할 경우, 먼저 다음과 같이 출력해야 할 문장의 원형을 먼저 작성해보자
  document.write("<h6>h6 재미있는 자바스크립트</h6>");
• 그런데 출력 대상인 따옴표("") 안의 내용 중 숫자 6은 반복적으로 감소하는 임의의 변수가 될 부분이므로 '변수와 나머지'로 분리하면 다음과 같다.
  <h || k || >h || k || 재미있는 자바스크립트</h || k || >
• 이제, 따옴표 없이 '변수'로 인식될 k를 제외한 나머지 영역을 각각 문자열("")로 묶어 +(문자 결합) 시켜주면 괄호() 안의 내용은 다음과 같이 정리된다.
  document.write("<h" + k + ">h" + k + " 재미있는 자바스크립트</h" + k + ">");

응용문제
다음과 같이 구구단 중 2단을 출력하시오
2단
2X1=2
2X2=4
...
2X9=18

<script type=""text/javascript">
//<![CDATA[
  var result;
  var dan=2;
  document.write("<h1>"+dan+"단</h1>");
  for(var k=1; k<=9; k++){
    result = k * dan;
    document.write("2X" + k + "=" + result + "<br />");
  }
//]]>

2단

2X1=2
2X2=4
2X3=6
2X4=8
2X5=10
2X6=12
2X7=14
2X8=16
2X9=18

• 구구단 결과값을 저장할 result 변수를 선언했다. 구구단 중 단수를 dan이라는 변수에 저장하였다.
• 단수를 h1태그를 사용하여 출력하였다.
• for 문을 이용하여 k값이 1부터 9까지 증가하도록 하였다.
• 단수(dan)에 k(증가변수)값을 곱한 결과값을 result에 다시 저장한다.
• 출력문을 이용하여 출력하고 <br/>태그를 사용해 개행한다.

2중 for문

응용문제
<구구단을 출력하시오>
prompt 메서드를 활용하여 2단부터 9단까지의 구구단을 순차적으로 출력해 보시오

<script type="text/javascript">
//<![CDATA[
  for(var k = 2; k <= 9; k++){
    document.write("<h1>"+k+"단</h1>");
    for(var m=1; m<=9; m++){
      document.write(k+"X"+m+"="+(k*m)+"<br />");
    }
  }
//]]>
</script>

• 바깥 for 문이 한번 실행할 때 안쪽 for 문은 1부터 9까지 9번 실행한다. 즉, k가 한단을 출력할 때마다 안쪽 for문은 1부터 9까지 곱해주는 역할을 하는 것이다.
• 바깥 for 문에서는 제목(*단)이 출력되고, 안쪽 for문에서는 구구단이 출력된다. 한 단 출력이 모두 끝나면(m이 1에서 9까지 순환하고 나면) 다시 바깥 for 문 증감식으로 가서 k값이 1만큼 증가되고, 그 증가된 k값에 맞는 구구단이 다시 이어질 것이다. 이렇게 반복문이 조건을 만족할 때 까지 계속 실행되면 9단까지 모두 출력된다.

break문

반복문의 실행문들은 수행과정에서 break문을 만나면 해당 반복문을 종료한다. 즉, break문은 반복문을 정지시킬 때에 사용한다.

그럼 다음의 기본예문을 보면서 자세히 알아가보자.

기본예문

<script type="text/javascript">
//<![CDATA[
  for(var i=1; i<=10; i++){
    document.write(i + "<br />");
    if(i==5) break;	// i=5일 때 break문 실행
    }
  }
//]]>
</script>

위 기본 예문은 1부터 10까지 출력하는 반복문이다. 하지만 실행문 마지막을 보면 i값이 5일 때에 break문을 수행하도록 되어 있으므로, 5를 출력한 후 반복문을 마치게 된다.

출력값
1
2
3
4
5

continue문

반복문이 continue문을 만나면, 더 이상의 실행문을 수행하지 않고 바로 증감식으로 돌아가 실행을 반복하게 된다.

기본예문

<script type="text/javascript">
//<![CDATA[
  for(var i=1; i<=10; i++){
    if(i%2==1) continue;	// i값이 홀수(2로 나눈 나머지가 1)일 경우 실행
    document.write(i + "<br />");
    }
  }
//]]>
</script>

if 조건문은 i값을 2로 나눈 나머지가 1인 경우, 즉, i값이 '홀수'일 때에만 continue문을 실행하게 한다.
결국, i값이 홀수라면 continue문에 의해 바로 증감식으로 돌아가게 된다.

실행결과 다음과 같이 짝수만 나오는 결과화면을 볼 수 있다.

출력값
2
4
6
8
10