[자바스크립트] 1. 제어문 조건문 - if 문, if-else 문, switch문

제어문

1. 조건문
프로그램 내에서 주어진 조건문의 결과에 따라 별도의 명령을 별도의 명령을 수행하도록 제어하는 실행문입니다.

 

 - if 문 (두 문장 이상일 때), if-else 문

 - switch 문

---

if 문

1. if 문

if(조건식) {

       조건식의 결과가 참(true)일 때 실행할 문장;

       . . .

}

 

if(조건식)

     조건식의 결과가 참(true)일 때 실행할 문장;

 

나이를 입력받을 수 있게 prompt와, 숫자로 변환 받을 수 있게 Number사용

저장된 age(입력받은 나이)가 19보다 크면 True(참)이므로 '성인입니다'.

false면 중괄로 밖으로 나가 '프로그램을 종료합니다'.

(조건식이 성립하지 않았음)

<script>
        'use strict';
        const age = Number(prompt('나이를 입력하세요'));

        if(age > 19) {
            console.log('성인입니다.');
        }
        console.log('프로그램을 종료합니다');
</script>

 

한 줄 조건문을 만들기는 가능함.

하지만 조건이 성립했을 때 나오는 문장이 한 줄 이상이라면 중괄호를 써주고 하는게 좋다.

<script>
        'use strict';
        const age = Number(prompt('나이를 입력하세요'));
        if(age > 19) console.log('성인입니다');
        console.log('프로그램을 종료합니다');
</script>

---

또 다른 예제를 보자

 

혈액형을 입력받고, RH+와 RH- 둘 중에 하나 입력 받기 하면 참인 결과가 콘솔창에 나타나기 하기.

혈액형A와, RH-을 입력하면 아래 두 줄이 실행된다.

<script>
        'use strict'
        const blood = prompt('혈액형을 입력하시오 : ');   //A, B, O, AB
        const type = prompt('RH+ 또는 RH-를 선택하세요');

        //당신의 혈액형은 A형이며 타입은 RH+입니다.

        if(blood == 'A') {
            console.log('당신의 혈액형은 A형이며 타입은 RH+입니다.');
            console.log('당신의 혈액형은 A형이며 타입은 RH-입니다.');
        }
        if(blood == 'B') {
            console.log('당신의 혈액형은 B형이며 타입은 RH+입니다.');
            console.log('당신의 혈액형은 B형이며 타입은 RH-입니다.');
        }
        if(blood == 'O') {
            console.log('당신의 혈액형은 O형이며 타입은 RH+입니다.');
            console.log('당신의 혈액형은 O형이며 타입은 RH-입니다.');
        }
        if(blood == 'AB') {
            console.log('당신의 혈액형은 AB형이며 타입은 RH+입니다.');
            console.log('당신의 혈액형은 AB형이며 타입은 RH-입니다.');
        }

</script>

 

여기서 const type = prompt('RH+ 또는 RH-를 선택하세요');를 +, -로 입력받게 중괄호 안에서 또 물어보기를 하자.

const blood = prompt('혈액형을 입력하시오 : ');   // A, B, O, AB
const type = prompt('RH+ 또는 RH-를 선택하세요');   // +. -


if(blood == 'A') {
    if(type == '+') {
    	console.log('당신의 혈액형은 A형이며 타입은 RH+입니다.');
    }if(type == '-') {
    	console.log('당신의 혈액형은 A형이며 타입은 RH-입니다.');
    }
}
if(blood == 'B') {
    if(type == '+') {
    	console.log('당신의 혈액형은 B형이며 타입은 RH+입니다.');
    }if(type == '-') {
    	console.log('당신의 혈액형은 B형이며 타입은 RH-입니다.');
    }
}
if(blood == 'O') {
    if(type == '+') {
    	console.log('당신의 혈액형은 O형이며 타입은 RH+입니다.');
    }if(type == '-') {
    	console.log('당신의 혈액형은 O형이며 타입은 RH-입니다.');
    }
}
if(blood == 'AB') {
    if(type == '+') {
    	console.log('당신의 혈액형은 AB형이며 타입은 RH+입니다.');
    }if(type == '-') {
    	console.log('당신의 혈액형은 AB형이며 타입은 RH-입니다.');
    }
}

---

참인 경우와 거짓 두가지를 해보는 if-else

거짓인 경우 else를 쓰기

<script>
      const blood = prompt("혈액형을 입력하시오 : "); // A, B, O, AB
      const type = prompt("RH+ 또는 RH-를 선택하세요"); // +. -

      if (blood == "A") {
        if (type == "+") {
          console.log("당신의 혈액형은 A형이며 타입은 RH+입니다.");
        } else {
          console.log("당신의 혈액형은 A형이며 타입은 RH-입니다.");
        }
      }
      if (blood == "B") {
        if (type == "+") {
          console.log("당신의 혈액형은 B형이며 타입은 RH+입니다.");
        } else {
          console.log("당신의 혈액형은 B형이며 타입은 RH-입니다.");
        }
      }
      if (blood == "O") {
        if (type == "+") {
          console.log("당신의 혈액형은 O형이며 타입은 RH+입니다.");
        } else {
          console.log("당신의 혈액형은 O형이며 타입은 RH-입니다.");
        }
      }
      if (blood == "AB") {
        if (type == "+") {
          console.log("당신의 혈액형은 AB형이며 타입은 RH+입니다.");
        } else {
          console.log("당신의 혈액형은 AB형이며 타입은 RH-입니다.");
        }
      }
    </script>

---

 

- 문제 -

 

성적 관리 프로그램을 HTML문서로 표현해보기
(단, 학점은 평균기준이며 90점이상은 A학점, 80점이상은 B학점, 70점이상은 C학점, 60점이상은 D학점, 그외에는 F학점)

prompt("이름을 입력하세요")
prompt("국어점수를 입력하세요")
prompt("영어점수를 입력하세요")
prompt("수학점수를 입력하세요")

예)
아래 결과로 출력

류정원님의 성적표
국어점수 : 90점
영어점수 : 80점
수학점수 : 70점
총점 : 240점
평균 : 80점
학점 : B학점

 

const name = prompt("이름을 입력하세요");
      const kor = Number(prompt("국어점수를 입력하시오"));
      const eng = Number(prompt("영어점수를 입력하시오"));
      const math = Number(prompt("수학점수를 입력하시오"));
      const total = kor + eng + math;
      const avg = total / 3;
      let hakjum = ""; //A학점, B학점을 여기 변수에 넣어주기

      if (avg >= 90) {
        hakjum = "A학점";
      } else if (avg >= 80) {
        hakjum = "B학점";
      } else if (avg >= 70) {
        hakjum = "C학점";
      } else if (avg >= 60) {
        hakjum = "D학점";
      } else {
        hakjum = "F학점";
      }

      document.write(`<h2>${name}님 성적표</h2>`);
      document.write(`<p>국어점수 : ${kor}점 </p>`);
      document.write(`<p>영어점수 : ${eng}점</p>`);
      document.write(`<p>수학점수 : ${math}점</p>`);
      document.write(`<p>총점 : ${total}점</p>`);
      document.write(`<p>평균 : ${avg}점</p>`);
      document.write(`<p>학점 : ${hakjum}</p>`);

위에서부터 차례데로 해석을 해보자면

1. 명령프롬프트를 이용해서 이름, 국어, 영어, 수학을 입력하라는 메세지를 창을 띄우고

2. 사용자가 입력하면 Number(숫자)로 입력 받아  name, kor, eng, math 에 저장된다.

3. 저장된 점수는 document.write(`<p> ${name}`) 에 들어가서 화면에 출력되서 나오고

4. 국어, 영어, 수학에 들어간 숫자는  

const total = kor + eng + math;   <= 여기로 들어와 숫자가 더해서 total(총점)으로 들어온다
const avg = total / 3;   <= 총 더해진 점수가 나누기 3이 되서 평균 점수로 dociment.write로 출력되서 나옴.

---

 switch 문

 

switch (key) {

      case value:

 

             break;

 

      default:

             break;

}

 

문제로 예시를 들어 보자~!

 

1. let을 준 이유는 값이 바뀔 수 있기 때문, 프롬프트 안에 사용자의 입력 값이 들어가면 input안으로 저장이 되고

2. (input) 속에 값이 들어가서 일치하면 case에 걸려 

3. "아동" += (연결 연산자) " : 입장료 무료"가 input으로 들어오고(아동 : 입장료 무료 문장이 input으로 들어 온다는 말임=데이터 저장) 

4. break 에 걸리고

5. (input)콘솔에 찍힘

6. 잘못 입력했다면 default에 걸려 alert("입력값을 확인하세요")

 

(여기서 알아야 할 점 : break는 키워드이고 switch문 또는 반복문의 불록을 빠져나감)

(만약 break가 없으면 case에 걸리는 시점부터 계속 내려와, "입력값을 확인하세요."가 출력되서 나온다. 중요)

let input = prompt("아동, 청소년, 성인 중 선택하세요"); //아동, 청소년, 성인

      switch (input) {
        case "아동":
          input += " : 입장료 무료";
          break;
        case "청소년":
          input += " : 입장료 2000원";
          break;
        case "성인":
          input += " : 입장료 5000원";
          break;
        default:
          alert("입력값을 확인하세요");
          input = "입력값을 확인하세요";
      }
      console.log(input);

 

또 하나 예시를 들어보자~if else의 성적 프로그램을 switch문으로 바꿔서 해보기.

const name = prompt("이름을 입력하세요");
      const kor = Number(prompt("국어점수를 입력하시오"));
      const eng = Number(prompt("영어점수를 입력하시오"));
      const math = Number(prompt("수학점수를 입력하시오"));
      const total = kor + eng + math;
      const avg = total / 3;
      let hakjum = ""; //A학점, B학점을 여기 변수에 넣어주기

      switch (parseInt(avg / 10)) {
        case 10:
          hakjum = "A학점";
          break;
        case 9:
          hakjum = "B학점";
          break;
        case 8:
          hakjum = "C학점";
          break;
        case 7:
          hakjum = "D학점";
          break;
        case 6:
          hakjum = "E학점";
          break;
        default:
          hakjum = "F학점";
      }
      document.write(`<h2>${name}님 성적표</h2>`);
      document.write(`<p>국어점수 : ${kor}점 </p>`);
      document.write(`<p>영어점수 : ${eng}점</p>`);
      document.write(`<p>수학점수 : ${math}점</p>`);
      document.write(`<p>총점 : ${total}점</p>`);
      document.write(`<p>평균 : ${avg}점</p>`);
      document.write(`<p>학점 : ${hakjum}</p>`);

 

여기서 10은 break가 안 걸려 있기 때문에 9까지 내려가서 A학점을 변수에 넣어 출력. 어차피 같이 쓰기 때문에

10에 걸려도 A학점, 9에 걸려도 A학점 둘이 공유해서 쓰기.

switch (parseInt(avg / 10)) {
        case 10:
        case 9:
          hakjum = "A학점";
          break;
        case 8:
          hakjum = "B학점";
          break;
        case 7:
          hakjum = "C학점";
          break;
        case 6:
          hakjum = "D학점";
          break;
        default:
          hakjum = "F학점";
      }

 

또 다른 예시 보기

const name = 'IE';	// name에 IE를 넣고

switch (name) {	// 스위치 안에 있는 name의 값이 minju면? 콘솔을 실행하고 멈추기
  case 'minju':
   console.log('go away');
   break;
  case 'huhee':
   console.log('go away');
   break;
  case 'suke':
   console.log('go away');
   break;
  default:
   consol.log('same all')
   break;
}

if문은 범위가 있을때(어디서 부터 어디까지)

switch문은 딱 떨어지는 케이스가 있을 때(값과 일치하는)