본문 바로가기
BOOK/자바스크립트

제어문

by "뭉치" 2021. 7. 30.
728x90

프로그램의 흐름을 바꾸거나 반복하게 하는 명령어.

 

 

1) 조건제어문

 

- 비교 조건을 제시하여 프로그램의 흐름을 바꾸기 위해 사용되는 명령어.

- 종류 : if, switch,

 

2) 반복제어문

 

- 특정 영역을 조건을 제시하여 조건에 만족하면 반복하게 하는 명령어.

- 종류 : for, while, do~while

 

 

1. if문

 

 

if문 1형식

 

형 식 예
<script LANGUAGE="JavaScript">
if( 조건 ){
조건이 참이면 실행
}
</script>		 <script LANGUAGE="JavaScript">
a = 10;
b = 5;
c = 0;
if( a>b ){
c=a-b
}
document.write("c=" + c); // 결과 c=5;
</script>

 

 

 

if문 2형식

 

형 식 예
<script LANGUAGE="JavaScript">
if( 조건 ){
조건이 참이면 실행
}else{
조건이 거짓이면 실행
}
</script>		 <script LANGUAGE="JavaScript">
a=10;
b=20;
c=0;
if( a>b ){
c=a-b
}else{
c=a+b
}
document.write("c=" + c);// 결과 c=30;
</script>

 

 

 

3. if문 3형식

 

형 식 예
<script LANGUAGE="JavaScript">
if( 조건1 ){
조건이 참이면 실행
}else if (조건 2){
조건이 거짓이면 실행
}else if (조건 3){
조건이 거짓이면 실행
}
</script>		 <script LANGUAGE="JavaScript">
a=2;
k="";
if( a==1 ){
k="a"
}else if (a==2){
k="b"
}else if (a==3){
k="c"
}
document.write("k=" + k);// 결과 k=b
</script>

 

 

 

2. switch문

 

 

특징

● switch문에선 상수n 부분에 범위를 줄 수가 없다.

● 또한 case문안에서는 받드시 break문을 넣주어야 한다. break문을 넣주지 않으면 다음 case문이 차례대로 처리된다.

 

 

 

 

형 식
<script LANGUAGE="JavaScript">
switch(변수){
case 상수1 : 처리1 ; break;
case 상수2 : 처리2 ; break;
case 상수3 : 처리3 ; break;
case 상수4 : 처리4 ; break;
}
</script>

 

 

 

 

[간단예]

 

<script LANGUAGE="JavaScript">

a=10;

switch (a){

case 8 : document.write("팔");break;

case 9 : document.write("구");break;

case 10 : document.write("십");break;

default : document.write("7이하");

}

</script>

 

 

1. for문

 

 

 

프로그램의 특정 부분을 정해진 횟수만큼 계속해서 반복 처리할 때 사용하는 명령어 이다.

 

 

 

구조
<script LANGUAGE="JavaScript">
for(제어변수 = 초기값 ; 실행조건 ; 제어변수 증감){
반복처리부분
}
</script>

 

 

아래의 그림중 번호가 forr문의 실행 순서이다. 자세히 살펴 보자.

 

 

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:lock aspectratio="t" v:ext="edit"></o:lock>

 

 

(1) 에 의해 제어변수 i에 초기값 1이 지정되고 (2)로 이동한다.

(2) 는 for문을 반복해야 할지 판단하기 위해 조건식을 수행한다. 즉 i가 100보다 작거나 같으면 반복문을 처리하게 되며 조건이 맞으면 (3)으로 이동한다.

(3) 실제로 처리해야할 내용을 기술하여 처리하고 for문의 마지막 블럭 }을 만나면 (4)로 이동된다.

(4) 제어 변수 i의 값을 1 증가 시키고 다시 for문을 처리해야 할지를 판단하기 위해 (5)로 이동한다.

(5) 또다시 처리 조건에 대한 부분을 연산하게되며 조건이 맞으면 다시 (6)으로 이동되어 처리되고

 

(4)~(6)까지가 변수 i가 101이 될때까지 반복처리 될것이다.

 

 

 

 

[간단예] 1~10까지의 합 출력

 

<script LANGUAGE="JavaScript">
sum=0;
for(i=1 ; i<=10 ; ++i){
sum = sum + i
}
document.write("sum=" + sum);// 결과 sum=55
</script>

 

 

 

 

 

 

 

2. while

 

 

● 정해진 조건에 따라 while 문이 한번도 실행되지 않을 수 있다.

● 블록안에서 반복 조건에 대한 가변을 해 주어야 한다.

 

 

 

 

구조
while ( 반복 조건){
조건이 만족하면 실행되는 문장.
}

 

 

 

[간단예] 10까지의 합을 계산하여 그 결과를 출력.

 

<script LANGUAGE="JavaScript">

i=1;

sum=0;

while ( i <=10){

sum = sum + i;

i=i+1;

}

document.write(sum);

</script>

 

 

 

3. do ~ while

 

 

● 어떤 경우든 do~while안의 문장이 한번은 실행된다.

 

구조
do{
조건이 만족하면 실행되는 문장.
}while(조건);

 

 

 

 

[간단예]

 

<script LANGUAGE="JavaScript">

i=1;

sum=0;

do{

sum = sum + i;

i=i+1;

}while( i<=10);

document.write(sum);

</script>

 

 

 

4. for~in

 

 

요소 내부의 내용을 처음부터 차례대로 찾아 나갈 수 있는 반복 제어문이다. 관련 요소가 몇 개가 있으며 어떤 내용이 있는지 알 수 없을 때 매우 유용하게 사용할 수 있다.

 

 

구조

 

for(var 변수 in 객체){
...
}

 

 

 

간단예

 

<HTML>
<HEAD>
<TITLE>객체속성보기(for~in) </TITLE>


<SCRIPT LANGUAGE="JavaScript">
function func(obj){
var str = "<table border=1>버튼 요소들 <br>";
str += "<tr bgcolor='#CCCCFF'><td>Attribute<td>Value";
for(var x in obj){
str += "<tr><td>" + x + "<td>&nbsp;" + obj[x];
}


result.innerHTML = str;
}


</SCRIPT>
</HEAD>


<BODY>
<input type="button" value="VIEW" onclick="func(this)">
<div id="result" style="border:#FF6600 1 solid"></div>
</BODY>
</HTML>

 

 

 

[결과]

 

<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock>

 

 

 

[간단예2]

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">


<TITLE>객체속성보기2(for~in) </TITLE>


<SCRIPT LANGUAGE="JavaScript">
function func(){
var src = document.getElementById("tag").value;
var obj =document.createElement(src);
var str = "<table border=1>버튼 요소들 <br>";
str += "<tr bgcolor='#CCCCFF'><td>Attribute<td>Value";
for(var x in obj){
str += "<tr><td>" + x + "<td>&nbsp;" + obj[x];
}
result.innerHTML = str;
}
</SCRIPT>
</HEAD>
<BODY>
<p>입력한 태그 속성 보기</p>
<input type="text" name="tag" id="tag" value="<br>">
<input type="button" value="VIEW" onclick="func()">
<div id="result" style="border:#FF6600 1 solid"></div>
</BODY>
</HTML>

 

 

 

[결과] <br>에 관한 속성들을 표시한다.

 

<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock>

728x90
저작자표시 비영리 변경금지

'BOOK > 자바스크립트' 카테고리의 다른 글

배열(Array)  (0) 2021.07.30
함수개요  (0) 2021.07.30
자료의 유형과 연산자  (0) 2021.07.30
자바 스크립트 작성 방법  (0) 2021.07.30
자바 스크립트 개요  (0) 2021.07.30

관련글

댓글

티스토리툴바

티스토리툴바