메인메뉴 바로가기

HOME으로 가기


Javascript

기본문법 | [기초] 9.자바스크립트 제어문

본문

9. 제어문

 
가. 제어문의 종류
 
자바스크립트 제어문에는 크게 조건선택문, 반복문, 보조 제어문 등이 있습니다.
 
조건선택문에는 if 문, if ~ else 문, 다중 if ~ else 문, switch ~ case 문 등이 있고, 반복문에는 for 문, while 문, 그리고 do ~ while 문이 있습니다.
 
보조제어문에는 continue 문과 break 문이 있습니다. 이들을 표로 나타내면 다음과 같습니다.
 
조건선택문
조건을 만족 시킬 때 실행되는 구문과, 그렇지 않을때 실행되는 구문을 지정할 때 사용하는 제어문
if 문
 
if ~ else 문
 
다중 if ~ else 문
 
switch ~ case 문
 
반복문
지정된 범위내에서 반복해서 실행시키는 제어문
for 문
 
while 문
 
do ~ while 문
 
보조제어문
반복문내에서 사용되면 우측 구문을 만나면 건너뛰거나 반복수행을 종료하는 기능을 함
continue 문
 
break 문
 
 
나. if
 
if 조건선택문은 정해진 조건을 만족할 경우에만 특정 구문을 수행하도록 하는 제어문입니다. 자바스크립트를 프로그래밍할 때 아주 많이 사용되는 제어문이니 잘 알아둘 필요가 있습니다
 
일반적인 형식은 다음과 같습니다
 
 
if (조건식) {
 
조건 결과가 참일 때 처리할 구문
 
}
 
 
if문.html
 
1 <scRIPT LANGUAGE="Javascript">
2 <!--
3 answer = prompt("숫자를 입력 해 주세요","");
4 if(answer > 0) {
5 alert("입력하신 숫자는 양수 입니다");
6 }
7 //-->
8 </scRIPT>
 
 
prompt 상자에서 입력된 값(answer)이 0 보다 크면 alert() 함수를 실행 시켜줍니다.
 
 
 
다. if ~ else
 
이 구문은 if 문과 아주 흡사하지만 조건이 참일 때 수행하는 구문과 거짓일 때 수행하는 구문을 별도로 지정해 줄 때 사용하는 조건문입니다.
사용형식은 아래와 같습니다
 
if(조건식){
조건의 결과가 참일 때 수행할 구문
}
else{
조건의 결과가 거짓일 때 처리할 구문
}
 
ifelse1.html
 
1 <scRIPT LANGUAGE="Javascript">
2 <!--
3 answer = prompt("숫자를 입력 해 주세요","");
4 if(answer > 0) {
5 alert("입력하신 숫자는 양수 입니다");
6 }
7 else{
8 alert("입력하신 숫자는 음수 입니다");
9 }
10 //-->
11 </scRIPT>
 
 
입력받은 값이 양수일 경우 "입력하신 숫자는 양수입니다" 라는 경고창을 띄우게 되고, 그렇지 않을 경우에는 "입력하신 숫자는 음수입니다" 라는 경고창을 띄워 줍니다.
 
위의 예문을 조건연산자를 사용해서 표현하면 다음과 같습니다
 
 
ifelse2.html
 
1 <scRIPT LANGUAGE="Javascript">
2 <!--
3 answer = prompt("숫자를 입력 해 주세요","");
4 (answer > 0) ?
5 alert("입력하신 숫자는 양수 입니다") :
6 alert("입력하신 숫자는 음수 입니다");
7 //-->
8 </scRIPT>
 
 
 
라. 다중 if ~ else
 
다중 if ~ else 문은 조건을 하나이상으로 설정할 수 있는 기존의 if ~ else 문에서 진일보한 제어문입니다
 
형식은 다음과 같습니다
 
 
if(조건-1){
조건-1 의 결과가 참일 때 수행할 문장
}
else if(조건-2){
조건-2 의 결과가 참일 때 수행할 문장
}
else {
조건-1과 조건-2 의 결과 모두 만족하지 못할때 수행할 문장
}
 
 
 
 
조건이 많을 때 유연하게 사용할 수 있습니다.
 
 
 
 
msifelse.html
 
1 <scRIPT LANGUAGE="Javascript">
2 <!--
3 answer = prompt("숫자를 입력 해 주세요","");
4 if(answer < 0) {
5 alert("입력하신 숫자는 음수 입니다")
6 }
7 else if(0 < answer < 10) {
8 alert("입력하신 숫자는 1 보다 크고 10보다 적은 숫자 입니다");
9 }
10 else {
11 alert("입력하신 숫자는 1에서 10 사이의 숫자 입니다")
12 }
13 //-->
14 </scRIPT>
 
 
마. 다중선택 switch ~ case
 
이 조건문은 다중 if ~ else 문을 좀 더 간편하게 하기 위한 명령어로 다중 if ~ else 문과 마찬가지로 조건이 여러개 일 때 유용하게 사용할 수 있습니다.
 
형식은 다음과 같습니다
 
switch(수식) {
 
case 값1 : 구문-1; break;
 
case 값2 : 구문-2; break;
 
case 값3 : 구문-3; break;
 
:
 
:
 
default : 구문-n;
 
}
 
 
여기에서 break 는 생략이 가능하며, default 문은 case 값에 해당하지 않을 때 수행할 구문입니다.
 
예문에서는 오늘의 요일값을 구해서 요일에 해당하는 메시지를 출력해 주는 스크립트에 switch case 문을 사용한 것을 보여주고 있습니다
 
 
switch.html
 
1 <scRIPT LANGUAGE="Javascript">
 
2 <!--
 
3 today = new Date(); // 오늘의 날짜값을 구해옵니다
 
4 weekday = today.getDay(); // 요일값을 구해서 weekday 변수에 담습니다
 
5 switch(weekday) {
 
6 case 0 : document.write("오늘은 일요일 입니다<br>좋은 휴일 보내세요");
 
7 break;
 
8 case 1 : document.write("오늘은 월요일 입니다<br>월요병 주의보 발령!!");
 
9 break;
 
10 case 2 : document.write("오늘은 화요일 입니다"); break;
 
11 case 3 : document.write("오늘은 수요일 입니다"); break;
 
12 case 4 : document.write("오늘은 목요일 입니다"); break;
 
13 case 5 : document.write("오늘은 금요일 입니다<br>내일은 토요일 이군요");
 
14 break;
 
15 default : document.write("오늘은 즐거운 토요일 입니다<br>좋은 계획 있으세
 
요?");
 
16 }
 
17 //-->
 
18 </scRIPT>
 
 
위의 예문에서 나온 new Date() 함수는 현재의 날짜값을 구해오는 내장함수입니다. 자세한 것은 뒷부분에서 배워 보기로 하고 오늘은 switch case 문이 어떻게 사용되었나만 살펴보기로 합니다.
 
요일값은 0부터 6까지의 숫자로 반환이 됩니다. 0 이면 일요일, 1 이면 월요일, .... 6이면 토요일이 됩니다.
 
각각의 숫자에 해당하는 구문을 6번째 줄부터 표시하도록 하였습니다.
 
마지막 15번 라인에 default 구문을 사용한 것은 case 6 : document.write("오늘은 즐거운 토요일 입니다<br>좋은 계획 있으세요?"); 처럼 사용할 수도 있지만, switch case 문의 설명을 위해서 default를 사용했습니다.
 
 
 
 
 
 
 
 
 
 
바. for
 
for 문은 주로 반복횟수가 지정된 경우에 많이 사용되며, 제어변수에 의해 반복을 할 것인지 아닌지를 결정하여 지정된 반복횟수만큼 반복되게 됩니다. 이 구문은 앞으로 자주 보게 될 것이므로 잘 알아두면 좋습니다.
 
while 문은 조건을 주어 결과가 참(true)이면 반복을 하고 거짓(false)이면 반복문을 벗어나서 반복수행을 멈추게 됩니다.
 
먼저 for 문부터 알아보도록 하겠습니다.
 
 
 
 
for(초기값; 조건; 증감식) {
 
반복처리할 구문
 
}
 
 
 
 
for.html
 
1 <scRIPT LANGUAGE="Javascript">
 
2 <!--
 
3 for(i = 0; i <= 100; i++) {
 
4 document.write(i + "<br>");
 
5 }
 
6 //-->
 
7 </scRIPT>
 
 
 
 
위의 예제는 0부터 100 까지의 숫자를 줄을 바꿔가면서 출력하도록 하는 스크립트입니다
 
i = 0; 임의의 변수 I 의 초기값은 0입니다.
 
i <= 100; i 는 100보다 같거나 작습니다(조건). 즉 변수 i 의 값은 0부터 100 사이에 있습니다.
 
i++ 는 증감연산자입니다. i 의 값이 100 이 될 때까지 계속해서 1씩 증가시켜 줍니다.
 
document.write(i + "<br>") 이 구문은 위의 for 구문의 조건이 충족될 때까지(즉, i 가 100이 될 때까지) 줄을 바꿔가면서 계속해서 i 를 출력 해 줍니다.
 
이렇게 하면 화면에는 0<br>1<br>2<br>....100 처럼 일일이 태그를 직접 사용해 입력한 것과 같은 결과가 출력 되게 됩니다.
 
이 for 문은 자바스크립트 뿐만 아니라 다른 언어에서도 많이 사용되는 아주 유용한 구문입니다.
 
 
 
 
사. while
 
while 문은 조건식이 참일 때까지는 계속해서 수행하고 거짓이 되면 반복문을 벗어나게 됩니다. 뒤에 나오는 do while 문과 다른점은 조건이 거짓일 경우 한번도 구문을 수행하지 않을 수도 있다는 점입니다. 그리고 for 문과 다른점은 초기값을 제어문 안에 설정 할 수 없다는 것입니다.
 
 
 
 
while(조건) {
 
반복처리할 구문
 
}
 
 
 
 
while.html
 
1 <scRIPT LANGUAGE="Javascript">
 
2 <!--
 
3 a = 100;
 
4 while (a <= 110) {
 
5 document.write(a + "\t");
 
6 a++
 
7 }
 
8 //-->
 
9 </scRIPT>
 
 
 
 
이 예문은 100에서 110 까지의 숫자를 탭키를 이용해 분리를 하여 출력하도록 해 줍니다
 
3 : a 의 초기값은 100입니다
 
4 : a 는 110 보다 같거나 작습니다 (조건)
 
5 : a를 출력하고 탭(\t)을 넣어준 뒤
 
6 : a 의 값을 1 증가시키고 다시 4번 라인으로 가서 조건에 맞게 출력되었나 봅니다. 조건을 충족하지 않았으면 계속해서 5번 라인부터 반복 합니다.
 
 
 
 
아. do ~ while
 
이 구문 역시 반복 제어문입니다. 앞의 while 문과 다른점은 while 문은 조건에 맞지 않으면 한번도 수행하지 않을 수 있지만 do while 문에서는 조건에 맞지 않더라도 적어도 한번은 수행을 하도록 되어 있습니다.
 
 
 
 
형식은 아래와 같습니다
 
do {
 
반복구문
 
}
 
While(조건)
 
 
 
 
dowhile.html
 
<scRIPT LANGUAGE="Javascript">
<!--
 
a = 100;
 
do {
document.write(a + "\t");
a++
}
while( a <= 110);
 
//-->
</scRIPT>
 
 
자. break
 
for 나 while 등과 같은 반복문을 강제로 중단

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기