[혼공JS📒] Chapter03. 조건문

Camellia·2022년 1월 23일

[혼공JS] 혼자 공부하는 자바스크립트

목록 보기

3/6

이 짤을 자신 있게 내밀 수 있는 그날을 기약하며..
자바스크립트 2주차 시이이이작!__!

2주차	Chapter	기본 미션	선택 미션
2주차	Chapter03	p.139 확인 문제 3번 풀고 완전한 코드 만들어 비주얼 스튜디오 코드에서 실행결과 인증샷	p.152의 <태어난 연도를 입력받아 띠 출력하기>예제 실행하여 본인의 띠 출력한 화면 캡쳐하기

✅ 기본 미션

p.139 확인 문제 3번 풀고 완전한 코드 만들어 비주얼 스튜디오 코드에서 실행결과 인증샷

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        let x = 15;

        if(x > 10 && x < 20) {
            alert("조건에 맞습니다!!");
        }
    </script>
</head>
<body> 
</body>
</html>

설명
&& : x가 10보다 크고 20보다 작은 두 조건을 모두 만족해야 하기 때문에 양쪽 변 값이 모두 true 일때 true를 결과로 내는 && 연산자 사용

✅ 선택 미션

p.152의 <태어난 연도를 입력받아 띠 출력하기>예제 실행하여 본인의 띠 출력한 화면 캡쳐하기

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script>
        const year = Number(prompt("태어난 해를 입력해주세요!"));
        const e = year % 12
        
        if(e === 0) {result = "원숭이";}
        else if(e === 1) {result = "닭";}
        else if(e === 2) {result = "개";}
        else if(e === 3) {result = "돼지";}
        else if(e === 4) {result = "쥐";}
        else if(e === 5) {result = "소";}
        else if(e === 6) {result = "호랑이";}
        else if(e === 7) {result = "토끼";}
        else if(e === 8) {result = "용";}
        else if(e === 9) {result = "뱀";}
        else if(e === 10) {result = "말";}
        else if(e === 11) {result = "양";}
        alert(`${year}년에 태어났다면 ${result}띠입니다!`);
    </script>
</head>
<body>
    
</body>
</html>

설명
2004년생은 원숭이띠이기 때문에 원숭이띠가 결과로 출력된다!

03-1. if 조건문

if 조건문 : 조건에 따라 코드를 실행하거나 실행하지 않을 때 사용하는 구문
비교 연산자와 논리 연산자를 활용해 조건 만듦

1. if 조건문

불 표현식의 값이 true면 중괄호 안의 문장 실행 false이면 문장 무시
중괄호 안의 실행문이 1줄이면 중괄호를 생략할 수 있지만 여러 문장일 경우 중괄호로 감싸야함
사용방법

if (불 값이 나오는 표현식) {
  불 값이 참일 때 실행할 문장
}

예시

//if 조건문
if(273 < 100) {
  //표식신 273 < 100이 참일 때 실행
  alert('273 < 100 => true');
}

//프로그램 종료
alert('종료');

실행결과 : 종료 => if 조건문의 불 값이 false으므로 중괄호 안의 문장을 실행하지 않고 종료한다.

2. if else 조건문

else 구문은 if 조건문 바로 뒤에 붙여서 사용
if 조건문과 마찬가지로 실행되는 문장이 하나일 때 중괄호 생략 가능, 여러 문장을 경우 중괄호 생략 안됨
사용방법

if (불 값이 나오는 표현식) {
  불 값이 참일 때 실행할 문장
} else {
  불 값이 거짓일 때 실행할 문장
}

예시

//if 조건문
const hour = 13;
if (hour < 12) {
  //표현식 hour < 12가 참일 때 실행
  alert("오전");
} else {
  //표현식 hour < 12가 거짓일 때 실행
  alert("오후");
}

실행결과 : 오후 => if 조건문의 불 값이 false으므로 else문 안의 실행문이 실행된다.

3. 중첩 조건문

중첩 조건문 : 조건 문 안에 조건문을 중첩해 사용하는 것
여러 번 중첩 가능

예시

//if 조건문
if (불 값이 나오는 표현식 1) {
  if (불 값이 나오는 표현식 2) {		    -----
    표현식 2가 참일 때 실행할 문장			|
  } else {					|  ----> 표현식 1이 참이면 실행
    표현식 2가 거짓일 때 실행할 문장	        |
  }					    -----
} else {
  if (불 값이 나오는 표현식 3) {		    -----
    표현식 3일 참일 때 실행할 문장			|
  } else {					|  ----> 표현식 1이 거짓이면 실행
    표현식 3이 거짓일 때 실행할 문장  	        |
  }				   	    -----
}

👍 마무리

1. '참입니다'를 출력하는 것은?

①

const x = 1;
if(x > 4) {
   console.log("참입니다");
}

②

const x = 0;
if(x > 4) {
   console.log("참입니다");
}

③

const x = 10;
if(x > 4) {
   console.log("참입니다");
}

답
3 : 10은 4보다 크다는 표현식에 true이기 때문에 실행문 실행

2. 사용자로부터 숫자 2개를 입력받아 첫 번째 입력받은 숫자가 큰지, 두 번째 입력받은 숫자가 큰지를 구하는 프로그램 빈 칸 채우기

const a = Number(prompt('첫 번째 숫자', ' '));
const b = Number(prompt('두 번째 숫자', ' '));

if(a > b) {
  alert("첫 번째로 입력한 숫자가 더 큽니다.")
} else if(a == b) {
  alert("두 숫자가 같습니다");
} else {
  alert("두 번째로 입력한 숫자가 더 큽니다");
}

3. 빈칸에 어떤 논리 연산자?

기본 미션 확인!!

4. 사용자에게 숫자를 입력받아 양수, 0, 음수를 구분하는 프로그램 작성

const a  = Number(prompt("숫자를 입력해주세요!", ' '));

if(a > 0)
  alert("양수입니다!");
else if(a == 0) 
  alert("0입니다!");
else
  alert("음수입니다!");

5. 사용자에게 숫자를 입력받아 홀수와 짝수 구분하는 프로그램 작성

const a  = Number(prompt("숫자를 입력해주세요!", ' '));

if(a % 2 == 0) {
  alert("짝수입니다!");
} else {
  alert("홀수입니다!");
}

6. 현재가 몇 월인지 확인하고, 계절 구분하는 프로그램 작성

const a = Number(prompt("월을 입력해주세요!", ' '));

if(a >= 3 && a <= 5) {
  alert("봄입니다!");
} else if(a >= 6 && a <= 8) {
  alert("여름입니다!");
} else if(a >= 9 && a <= 11) {
  alert("가을입니다!");
} else {
  alert("겨울입니다!");
}

03-2. switch 조건문과 짧은 조건문

default 키워드는 생략 가능
break : switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드
switch 조건문 : 괄호 안에는 비교할 값 입력, 입력한 값을 기준으로 특정 코드를 실행
case : case 키워드 옆의 표현식이 같다면 case 키워드 바로 다음에 오는 문장 실행
기본 형태

switch(자료) { ---> 자료 : 비교할 값
  case 조건A : 
    break;
  case 조건B :
    break;
  default :  ---> 생략 가능
    break;
}

1. 조건부 연산자

기본 형태
불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과
자바스크립트에서 항을 3개 갖는 연산자는 조건부 연산자가 유일해서 삼항 연산자라고 부르기도 함

예시

			(number >= 0)이 true면 이 값이 할당
const number = 19;             _________|_________
const result = (number >= 0) ? '0 이상의 숫자입니다.' : '0보다 작은 숫자입니다.';	
						      ____________________
                              					|
                             		      (number >= 0)이 false면 이 값이 할당

alert(result);

2. 짧은 조건문

논리합 연산자를 사용한 짧은 조건문
-논리합 연산자를 사용한 표현식은 뒤에 어떠한 값이 들어가도 항상 참
-논리합 연산자의 좌변이 참이면 우변을 실행하지 않음
-기본 형태
true || OOO
-짧은 정리
불 표현식 || 불 표현식이 거짓일 때 실행할 문장

예시

> true || console.log("실행될까요?"); --> 좌변이 참이기 때문에 우변이 실행되지 않는다.
true

> false || console.log("실행될까요?"); --> 좌변이 참이 아니기 때문에 우변인 실행될까요?가 실행된다.
실행될까요?
undefined

논리곱 연산자 연산자를 사용한 짧은 조건문
-논리곱 연산자는 양변이 모두 참일 때만 참이기 때문에 다음 표현식은 항상 거짓
-논리곱 연산자는 좌변이 거짓이면 우변을 실행하지않음
-기본 형태
false && OOO
-짧은 정리
결과가 거짓인 불 표현식 || 불 표현식이 참일 때 실행할 문장

예시

> false && true; --> 좌변이 참이 아니기 때문에 우변을 실행하지 않고 false가 된다.
false

> false && false;  --> 좌변이 참이 아니기 때문에 우변을 실행하지 않고 false가 된다.
false

👍 마무리

1. 다음 코드 예측

<script>
  const result = (100 > 200) ? prompt('값을 입력해주세요', ' '); : confirm('버튼을 클릭해주세요');
alert(result);
</script>

답
"버튼을 클릭해주세요"라는 확인과 취소 버튼을 클릭할 수 있는 창이 나오고 확인을 클릭하면 true, 취소 버튼을 클릭하면 false출력

2. [누적예제 : 태어난 연도를 입력받아 띠 출력하기]에서 if조건문을 switch 조건문으로 변경해서 구현

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script>
        const year = Number(prompt("태어난 해를 입력해주세요!"));
        const e = year % 12
        
        let result
        switch(e) {
            case 0 : result = "원숭이"; break;
            case 1 : result = "닭"; break;
            case 2 : result = "개"; break;
            case 3 : result = "돼지"; break;
            case 4 : result = "쥐"; break;
            case 5 : result = "소"; break;
            case 6 : result = "호랑이"; break;
            case 7 : result = "토끼"; break;
            case 8 : result = "용"; break;
            case 9 : result = "뱀"; break;
            case 10 : result = "말"; break;
            case 11 : result = "양"; break;
        }
        alert(`${year}년에 태어났다면 ${result}띠입니다!`);
    </script>
</head>
<body>  
</body>
</html>

3. '태어난 연도를 입력받아 띠 출력하기'에서 동물 이름을 쥐부터 '자, 축, 인, 묘, 진, 사, 오, ㅁ, 신, 유, 술, 해'로 별경하고, 입력한 연도의 '갑, 을, 병, 정, 무, 기, 경, 신, 임, 계'를 계산 이 둘을 합쳐 출력하는 프로그램 작성

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        const year = Number(prompt("태어난 해를 입력해주세요!", ' '));

        let 간;
        let e = year % 10;
        switch(e) {
            case 0 : 간 = "경"; break;
            case 1 : 간 = "신"; break;
            case 2 : 간 = "임"; break;
            case 3 : 간 = "계"; break;
            case 4 : 간 = "갑"; break;
            case 5 : 간 = "을"; break;
            case 6 : 간 = "병"; break;
            case 7 : 간 = "정"; break;
            case 8 : 간 = "무"; break;
            case 9 : 간 = "기"; break;
        }

        let 띠;
        let tti = year % 12;
        switch(tti) {
            case 0 : 띠 = "신"; break;
            case 1 : 띠 = "유"; break;
            case 2 : 띠 = "술"; break;
            case 3 : 띠 = "해"; break;
            case 4 : 띠 = "자"; break;
            case 5 : 띠 = "축"; break;
            case 6 : 띠 = "인"; break;
            case 7 : 띠 = "묘"; break;
            case 8 : 띠 = "진"; break;
            case 9 : 띠 = "사"; break;
            case 10 : 띠 = "오"; break;
            case 11 : 띠 = "미"; break;
        }

        alert(`${year}년은 ${간}${띠} 년입니다!`);
    </script>
</head>
<body>
    
</body>
</html>

4. switch 조건문과 직접적인 관련이 없는 키워드는?

① switch
② break
③ default
④ else

답
④ else : else는 switch조건문과 관련이 있는 것이 아니라 if 조건문과 관련이 있는것이다.

5. 다른 실행 결과를 내는 코드는?

① true ? alert('출력A') : alert('출력B')
② false ? alsert('출력B') : alert('출력A')
③ true || alert('출력A')
④ true && alert('출력A')

답
④ true && alert('출력A') : 1번은 참이기 때문에 "출력A"출력, 2번은 거짓이기 때문에 "출력A"출력, 3번은 좌변이 true이기 때문에 true출력, 4번은 양변이 true이므로 오른쪽 값인 "출력A"출력 그러므로 다른 실행 결과를 내는 것은 3번이다.

'아 내가 솦과구나..', '아 내가 개발이란 걸 하구 있구나..'라는 생각을 처음으로 들게 해준 조건문.. 짧게 만든 조건문 코드 하나에 감격스러워 날뛰던 때가 생각이 났다. 위의 짤처럼 조금이라도 긴 조건문이 나오면 눈을 질끈 감고 생각하기를 포기했던 때가 있었는데 다시 한번 자바스크립트를 복습해 보니 많이 성장한 것 같아 뿌듯하다. 앞으로 4주 정도 남았는데 더 열심히 공부해야겠다는 생각이 든다. 빠샤!

Camellia

빠샤!

이전 포스트

[혼공JS📒] Chapter02. 자료와 변수

다음 포스트

[혼공JS📒] Chapter04. 반복문

1개의 댓글

codms

2022년 1월 23일

왤케 열심히 해 ㅡ.ㅡ

답글 달기