프론트엔드/JavaScript

[혼공학습단 10기 - 자바스크립트] 2주차 / Chapter 03. 조건문

Damgome 2023. 7. 15. 23:02

03-1. if 조건문

제어문(control statement) : 코드의 실행 흐름과 직접적인 관련이 있는 문장

if 조건문

형태 ⇒

if(불 표현식){
	문장
	문장
}

→ 불 표현식이 true이면 괄호 안 문장 실행, false이면 실행 X

<script>
    if (27 < 10) {
      alert('27 < 10 은 true이다.')
    }
    alert('종료')
  </script>

⇒ 종료만 출력됨

날짜와 시간 구하기

const date = new Date()
date.getFullYear() //올해 
date.getMonth() //월 (0~11) -> 1월이 0으로 나타난다
date.getDate() //일 (1~31)
date.getHours() //시간 (0~23)

오전 오후 구분하는 코드 짜보기!

<script>
    const date = new Date()
    const hours = date.getHours()

    if(hours < 12){
      alert('오전입니다')
    }
    if(hours >= 12){
      alert('오후입니다')
    }

  </script>

ctrl + F : 전체 수정 기능 제공!

if else 조건문

if(불_표현식){
      //불 표현식이 true 일 때 실행하는 문장
} else{
      //불 표현식이 false 일 때 실행하는 문장
}

시간 별로 식사 알림 코드 짜보기

오전 10시 이전 → 아침밥 먹을 시간입니다
오전 10시 ~ 오후 4시 → 점심밥 먹을 시간입니다
오후 4시 이후 → 저녁밥 먹을 시간입니다

<script>
    const hours = (new Date()).getHours()
    if(hours < 10){
      alert('아침밥 시간입니다')
    }
    if(10 <= hours && hours < 16){
      alert('점심밥 시간입니다')
    }
    if(16<= hours){
      alert('저녁밥 시간입니다')
    }
  </script>

⏬⏬⏬⏬⏬⏬⏬⏬ 중첩 조건문으로 고쳐보기

<script>
    const hours = (new Date()).getHours()
    if(hours < 10){
      alert('아침밥 시간입니다')
    }else{
      if(10 <= hours && hours < 16){
      alert('점심밥 시간입니다')
      }
      else{
      alert('저녁밥 시간입니다')
      }
    }
  </script>

<script>
    const hours = (new Date()).getHours()
    if(hours < 10){
      alert('아침밥 시간입니다')
    } else if(10 <= hours && hours < 16){
      alert('점심밥 시간입니다')
    } else{
      alert('저녁밥 시간입니다')
    }    
  </script>

확인문제1 / 3번

확인문제2 / Number , Number, a > b, a===b

확인문제3 / &&

확인문제4

<script>
    const a = Number(prompt('숫자를 입력해주세요.','')) 

    if(a > 0){
      alert('양수입니다.')
    }else if(a === 0){
      alert('0입니다.')
    }else{
      alert('음수입니다.')
    }
  </script>

확인문제5

<script>
    const a = Number(prompt('숫자를 입력해주세요.','')) 

    if(a % 2 == 0){
      alert('입력한 숫자는 짝수입니다.')
    }else{
      alert('입력한 숫자는 홀수입니다.')
    }
  </script>

확인문제6

<script>
    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 if((a === 12) || (a >= 1 && a <= 2)){
      alert('겨울이네.....')
    }
</script>

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

switch 조건문

<script>
    const a = Number(prompt('1에서 3사이의 숫자를 입력해주세요.','')) 

    switch(a){
      case 1:
        alert('1을 입력하심')
        break
      case 2:
        alert('2를 입력하심')
        break
      case 3:
        alert('3을 입력하심')
        break
      default:
        alert('잘못 입력하심')
    }
</script>

조건부 연산자 (삼항 연산자)

<aside> 💡 불_표현식 ? 참일_때의_결과 : 거짓_일때의_결과

</aside>

<script>
    const a = Number(prompt('숫자를 입력해주세요.','')) 

    alert((a >= 0) ? '0 이상의 숫자입니다.' : '0보다 작은 숫자입니다.')
</script>

짧은 조건문

대충 이런 것이 있구나 하고 눈도장만 찍어도 ok

논리합 연산자를 사용한 짧은 조건문

불 표현식 || 불 표현식이 거짓일 때 실행할 문장

논리합 연산자(||) 특징 : 둘 중 하나만 true 여도 결과값 true!
자바스크립트는 참이 확실할 때 추가 연산을 진행하지 X. 즉 좌변이 참이면 우변 실행 안 함!

논리곱 연산자를 사용한 짧은 조건문

결과가 거짓인 불 표현식 && 불 표현식이 참일 때 실행할 문장

논리곱 연산자(&&) 특징 : 양변이 모두 참이여야 결과값 true!
좌변이 거짓이면 우변을 실행하지 X

누적 예제

짝수와 홀수 구분하기

<script>
    const a = Number(prompt('숫자를 입력해주세요', ''))

    if(a % 2 === 0){
      alert(`입력하신 ${a}은(는) 짝수입니다`)
    }else{
      alert(`입력하신 ${a}은(는) 홀수입니다`)
    }
  </script>

학점 기반 별명 붙여주기

<script>
    const a = Number(prompt('학점을 입력해주세요.(4.5만점 기준)', '학점'))

    if(a === 4.5){
      alert('신')
    } else if(a >= 4.2){
      alert('교수님의 사랑')
    } else if(a >= 3.5){
      alert('현 체제의 수호자')
    } else if(a >= 2.8){
      alert('일반인')
    } else if(a >= 2.3){
      alert('일탈을 꿈꾸는 소시민')
    } else if(a >= 1.75){
      alert('오락문화의 선구자')
    } else if(a >= 1.0){
      alert('불가촉천민')
    } else if(a >= 0.5){
      alert('자벌레')
    } else if(a === 0){
      alert('시대를 앞서가는 혁명의 씨앗')
    }
</script>

태어난 연도 입력받아 띠 출력하기⇒ 비효율적, 너무 긴 코드!

<script>
    const year = Number(prompt('태어난 해를 입력해주세요.',''))

    let result 

    switch(year % 12){
      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>

<script>
    const year = Number(prompt('태어난 해를 입력해주세요.',''))

    const tti = '원숭이,닭,개,돼지,쥐,소,호랑이,토끼,용,뱀,말,양'.split(',')

    alert(`${year}년생은 ${tti[year%12]}띠 입니다.`)
</script>

효율적으로 → split() 사용!

마무리

확인문제 1/

버튼을 클릭해주세요
확인 누르면 → true
취소 누르면 → false

확인문제 2/

이미 위에서 if 말고 switch 조건문으로 작성함..ㅋㅋㅋ

확인문제 3/

<script>
    const year = Number(prompt('태어난 해를 입력해주세요.',''))

    let 간
    switch(year % 10){
      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 띠
    switch(year % 12){
      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>

확인문제4 : 4번

확인문제5 : 3번