Chapter 03

혼공학습단/자바스크립트

Chapter 03

노 코딩 노 라이프 2023. 1. 15. 21:55

03장

03-1 if 조건문 🎈

conditional statement

조건에 따라 코드를 실행하거나 실행하지 않도록 할 때 사용하는 구문.

코드가 실행되는 흐름을 변경하는 것을 조건 분기라고 함

if 조건문 : 괄호 안의 불 표현식 값이 참이면 중괄호 안의 문장을 실행.
거짓이면 문장을 무시

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

if else 조건문 : if 조건문 바로 뒤에 조합하여 사용
+ if 조건문이 거짓일 때 실행

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

중첩 조건문 : 조건문 안에 조건문을 중첩해서 사용

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

if else if 조건문 : 중첩 조건문에서 중괄호를 생략한 형태로, 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용

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

03-1 switch 조건문과 짧은 조건문 🎈

- switch 조건문

값에 따라서 조건 분기를 걸어주는 조건문

switch (자료) {
	case 조건A:
		break;
	case 조건B: 
		break;
	default: //생략할 수 있음
		break;
}

- 조건부 연산자

자바스크립트에서 조건문과 비슷한 역할을 하는 항을 3개 갖는 연산자, 삼항 연산자라고 부르기도 함

불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과

- 짧은 조건문

논리 연산자의 특이한 성질을 사용해서 조건 분기에 활용하는 코드

1. 논리합 연산자

true || ~~~

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

2. 논리곱 연산자

false && ~~~

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

- if 조건문 사용하기

<script>
	//if 조건문
    if (500 < 100) {
    	//표현식 500 < 100 => 참일때 실행함
        alert('500 < 100 => true')
    }
//프로그램 종료
	alert('종료')
</script>

- if else문 사용하기

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

P1. if else문을 사용하여 오전과 오후 구분하기

- 실행화면

- 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <title>현재시간</title>
    <script>
        const date = new Date()
        const hours = date.getHours()

        if(hours < 12){
            alert(`현재 시각 : ${hours} \n오전입니다!`)
        }else{
            alert(`현재 시각 : ${hours} \n오후입니다!`)
        }
        //FullYear : 올해 Month : 월(0~11) Date : 일(1~31) Hours : 시간(0~23)
        //date.getFullYear()
        //date.getMonth()
        //date.getDate
        //date.getHours
        
    </script>
</head>
<body>
    
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <title>현재시간</title>
    <script>
        const date = new Date()
        const hours = date.getHours()

        if(hours < 12){
            alert(`현재 시각 : ${hours} \n오전입니다!`)
        }else{
            alert(`현재 시각 : ${hours} \n오후입니다!`)
        }
        //FullYear : 올해 Month : 월(0~11) Date : 일(1~31) Hours : 시간(0~23)
        //date.getFullYear()
        //date.getMonth()
        //date.getDate
        //date.getHours
        
    </script>
</head>
<body>
    
</body>
</html>

P2. switch문을 사용하여 홀수 짝수 구하기

- 실행화면

- 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <title>홀수 짝수 구하기</title>
    <script>
        //변수 선언
        const input = Number(prompt('숫자를 입력하세요', '숫자'))

        //조건문
        switch (input % 2) { //나머지 연산자를 사용
            case 0:
                alert('짝수')
                break;
            case 1:
                alert('홀수')
                break;
            default:
                alert('숫자가 아닙니다')
                break;
        }
    </script>
</head>
<body>
    
</body>
</html>