Javascript : 제어문 - 선택문(switch문) -반복문(while문, do while문, for문)

선택문

switch문

변수에 저장된 값과 switch문 안의 경우(case)값을 검사해
변수와 일치값 있으면 해당 코드 실행 후 종료
if문과 비슷하나 if는 만족 데이터 여러개일 때 사용하고
switch문은 값중 일치 데이터 찾아 그에 해당하는 코드 실행시킬 때 사용

switch문을 만나면 case 값을 하나씩 검사한다.
변수값과 일치값이 있으면 해당 코드 실행,
break문으로 종료한다. case값과 일치하는 변수값이 없다면
마지막의 default문의 코드를 실행하고 switch문은 종료한다.

<script>
  //사용자에게 자주 이용하는 포털사이트를 묻고 일치하는 케이스 있으면 해당사이트로 이동

  var site = prompt(
    "네이버, 다음 구글, 네이트 중 즐겨 이용하는포털 검색 사이트는?"
  );
  //웹 주소를 담을 변수
  var url;

  switch (site) {
    case "구글":
      url = "http://www.google.com";
      break;
    case "네이버":
      url = "http://www.naver.com";
      break;
    case "네이트":
      url = "http://www.nate.com";
      break;
    case "다음":
      url = "http://www.daum.com";
      break;

    default:
      alert("보기 중에 없는 사이트입니다. 한글로 작성해 주세요.");
  }
  //url에 값이 있다면 location(주소창)의 .href(연결경로)를 url로 이동해라
  if (url) location.href = url;
</script>

반복문

반복문을 이용하면 코드를 원하는 횟수만큼 반복 실행 가능
반복문의 종류로는 while문, do while문, for문이 있다.

while문

while문은 조건식 만족할 때까지 코드 여러번 반복 실행
true에서 false가 될때까지 반복함

while문 실행 순서
1. 조건식 검사 후 만족하면
2.{} 안의 코드와 증감식 실행
3. 다시 조건식 검사
증감식을 반복하다가 조건식이 true에서 false될때까지 반복

[기본형]
var 변수 = 초기값;
while(조건식①,③){
②
코드;
증감식;
}

<script>
  //카운터 변수(iteration의 약자로, 숫자를 카운팅하는 변수)
  var i = 1;

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

  //while문을 이용하여 1부터 30까지의 숫자 중 2배의 배수만 출력하기
  var num = 1;

  while (num <= 30) {
    if (num % 2 == 0) {
      document.write(num, "<br/>");
    }
    num++;
  }

  // while문을 이용하여 1부터 30까지의 숫자 중
  // 2배의 배수이면서 6의 배수인 숫자만 출력하기
  var i = 1;

  while (i <= 30) {
    if (i % 2 == 0) {
      if (i % 6 == 0) {
        document.write(i, "<br/>");
      }
    }
    i++;
  }

  var num2 = 1;

  while (num2 <= 30) {
    if (num2 % 2 == 0 && num2 % 6 == 0) {
      document.write(num2, "<br/>");
    }
    num2++;
  }
</script>

20부터 10까지 숫자 중 짝수면 파랑 홀수면 빨강으로

<style>
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
</style>
 <script>

  var i = 20;

  while (i >= 10) {
    if (i % 2 == 0) {
      document.write("<p class='blue'>" + i + "</p>");
    } else {
      document.write("<p class='red'>" + i + "</p>");
    }
    i--;
  }
</script>

do while문

while문은 조건식 만족 여부를 검사하고 만족시 안의 코드 실행하지만
do while문은 먼저 코드 실행 후 조건식 검사

[기본형]
var 변수 = 초기값;
do{
코드;
증감식;
}while(조건식)

<script>
  var i = 10;

  do {
    document.write("hello");
  } while (i < 5);
</script>

for문

for문도 while문과 마찬가지로 코드를 원하는 만큼 반복
문법이 간결하고 변수가 반복문 안에 있어 더 안전하기 때문에(변수 충돌 이슈 적음)
실무에서 주로 사용한다.

[기본형]
for(초기값; 조건식; 증감식){
코드;
}

[실행순서]
초기값 검사 > 조건식 검사 > 자바스크립트 코드 실행 > 증감식 > 조건식 > 자바스크립트 코드 실행 > 증감식

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

  document.write("--------------------------------", "</br>");

  //for문을 이용해 1~100 숫자 중 5의 배수 빨강 7의 배수 파랑 5와 7의 공배수 핑크

  for (var num = 1; num <= 100; num++) {
    //5의 배수이지만 7의 배수는 아니어야 함
    if (num % 5 == 0 && num % 7 != 0) {
      document.write("<p class='red'>" + num + "</p>");
    } else if (num % 5 != 0 && num % 7 == 0) {
      document.write("<p class='blue'>" + num + "</p>");
    } else if (num % 5 == 0 && num % 7 == 0) {
      document.write("<p class='pink'>" + num + "</p>");
    }
  }
</script>

break문
반복문 종료 역할

[기본형]
1. while문
var 변수 = 초기값;
while(조건식){
break;
코드;
증감식;
}
2.for문
for(초기값; 조건식; 증감식){
break;
코드;
}

continue문

반복문 안에서만 쓸 수 있다.
while문에서 사용할 경우 :
continue문 다음에 오는 코드는 건너뛰고 조건식에서 조건검사를 한다.
for문에서 사용할 경우 :
continue문 다음에 오는 코드는 건너뛰고 증감식에서 증감을 한다.

[기본형]
1. while문
var 변수 = 초기값;
while(조건식){
continue; - 코드와 증감식 무시하고 조건식 검사
코드;
증감식;
}
2.for문for(초기값; 조건식; 증감식){
continue; - 코드 무시하고 증감식 실행
코드;
}

<script>
  //break문
  for (var i = 1; i <= 10; i++) {
    if (i == 6) break; //i가 6 되면 강제종료
    document.write(i, "</br>");
  }

  document.write("--------------------------------", "</br>");

  //continue문
  for (var a = 1; a <= 10; a++) {
    if (a % 2 == 0) continue; //짝수면 건너뛰고 증가함
    document.write(a, "</br>");
  }
</script>

중첩 for문

for문 안의 for문
바깥 for문 실행 후 안쪽 for 만나 안쪽 for문이 true -> false 될때까지 반복 실행
false되면 바깐의 증감식으로 이동해 연산하고 조건검사함.
만족하면 안쪽의 for문에서 초기값 조건식 코드실행 증감식을 다시 false 될때까지 실행
결국 바깥 for이 false가 되면 종료된다

[기본형]
for(초기값; 조건식; 증감식){
for(초기값; 조건식; 증감식){
코드;
}

    <script>
  for (var i = 1; i <= 3; i++) {
    for (var k = 1; k <= 2; K++) {
      document.write(i + "행" + k + "열", "</br>");
    }

    document.write("-----------", "</br>");
  }
</script>