[혼공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일

왤케 열심히 해 ㅡ.ㅡ

답글 달기