03. 제어문

* 제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장

 

조건문

- 조건에 따라 특정 코드를 실행시킬 수 있음.

- if문 / else문 / else if 문

 

선택문

- 일치하는 경우의 값이 있을 경우에만 특정 코드를 실행시킬 수 있음.

- switch문

 

반복문

- 코드를 지정한 횟수만큼 반복해서 실행시킬 수 있음.

- while문 / for문 / do ~ while문

---

01. 조건문

if문

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

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

- 조건식에 논리형 데이터가 아닌 다른형의 데이터가 입력되었을 때 반환되는 결과 예제.

  * 0, null, ""(빈문자), undefined

* 출력되는 경우

var num = 3; 
 
if(num){ // 3은 true 입니다.
    document.write(num);
}
 

* 출력되지 않는 경우

var num = 0; 
 
if(num){ // 0은 false 입니다.
    document.write(num);
}

---

else문

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

- else문 기본형

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

예제) confirm 객체를 사용하여 웹 페이지에 회원 탈퇴 여부를 확인/취소 창이 나타나게 하여 각 확인, 취소 버튼을 클릭 시 결과 화면이 다르게 나타나도록 만들기

- confirm("message"); <- 기본형

- confirm() 메서드는 확인 버튼을 누르면 true를 반환하고 취소 버튼을 누르면 false 값을 반환하여 변수 result에 저장

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

---

else if문

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

- else if문의 기본형

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

---

중첩 if문

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

- 바깥쪽에 있는 조건문인 조건식1을 만족해야만 안쪽에 있는 조건문인 조건식 2를 검사한다.

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

---

02. 선택문

switch문

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

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

- switch문 기본형

var 변수 = 초기값;

switch(변수){
	case 값1 : 코드1;
    break;
    case 값2 : 코드2;
    break;
    case 값3 : 코드3;
    break;
    
    default : 코드4;
}    

변수에 저장된 값은 switch문을 만나면 case의 값을 하나씩 검사하여 일차하는 데이터가 있으면 실행하고 그에 해당하는 코드를 실행, break문을 만나 switch문을 종료

case의 값 중에 일치하는 데이터가 없으면 마지막 default에 있는 코드를 실행하고 switch문을 종료

---

03. 반복문

while문

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

- while문 기본형

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


ex)
var i = 1;
while(i<=10){
	document.write("안녕하세요" + i + "<br/>");
    i++;
}

document.write("====The End===");

---

do while문

- while문의 경우에는 조건식의 만족 여부를 먼저 검사한 후 코드의 실행 여부를 결정했지만, do while문은 반드시 한번은 코드를 실행하고 조건식을 검사한다.

- do while문 기본형

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

ex)
var i = 10;
do{
	document.write("hello");
}while(i<3);

- 예제에서 한 번은 꼭 실행하고 i<3을 검사하고, 변수 i에는 10이 저장되어 있으므로 두 수를 비교한 결과 false를 반환하여 do while문이 종료된다.

---

for문

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

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

---

break문

- 반복문인 while문 또는 for문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료한다.

- 반복문을 강제로 종료할 때 사용.

for(초깃값; 조건식; 증감식){
	break; //반복문을 강제로 종료
    자바스크립트 코드;
}

//==============================================

var 변수 = 초기값;
while(조건식){
	break; //반복문을 강제로 종료
    자바스크립트 코드;
    증감식;
}

---

continue문

- continue 문은 반복문에서만 사용가능

- while문에 사용할 경우 continue문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 한다.

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

//===========================

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

---

- 예제) for문을 이용해 1부터 10까지 i가 2의 배수일 경우에만 continue문을 실행하여 홀수만 출력

<script>
 
    for(var i= 1; i<=10; i++){
        if(i%2 == 0){
            continue; 
            // contine문은 반복문 이후의 코드 실행을 건너뛰고 다시 반복문의 증감식을 수행한다. 
        }
 
        document.write(i,"<br/>");
    }
 
    document.write("=== The End ===");
 
</script>

* 결과

---

중첩 for문

- for문 안에 for문을 사용한 것을 중첩 for문이라고 한다.

기본형

for(초기값; 조건식; 증감식){ //바깥쪽 for문
	for(초기값; 조건식; 증감식){ //안쪽 for문
    	자바스크립트 코드;
    }
}

//========================================================

중첩 for문을 사용하여 '1행 1열' 부터 '3행 2열'까지 출력

for(var i=1; i<=3; i++){
	for(var k=1; k<=2; k++){ // 바깥쪽의 반복문이 1회 실행되면 안쪽의 반복문은 2회 실행됨
    	document.write(i+"행" + k '열', "<br/>");
    }
}