JavaScript/Vanila JS

JavaScript 기초(2)- 제어문 If, Switch

두설날 2024. 4. 15. 17:14

*이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*

조건문

1. if 문

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

    if(조건식){
        조건식의 결과가 true일 때 실행할 문장;
    }else{
        조건식의 결과가 false일 때 실행할 문장;
    }

    if(조건식1){
        조건식1의 결과가 true일 때 실행할 문장;
    }else if(조건식2){
        조건식2의 결과가 true일 때 실행할 문장;
    }else{
        모든 조건식의 결과가 false일 때 실행할 문장;
    }

참고: Python에서 elif의 사용목적은 javascript에서 else if와 동일합니다. elif = else if의 준말

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if 문</title>
</head>
<body>
    <h2>if 문</h2>
    <script>
        const age = Number(prompt('나이를 입력하세요'));

        if(age>19){
            console.log('성인입니다');
        }else if(age > 14){
            console.log('청소년입니다');
        }else if(age > 6){
            console.log('어린이입니다');
        }else{
            console.log('유아입니다');
        }
    </script>
</body>
</html>

2. switch 문

 switch(변수 또는 값){
        case 값1:
            변수와 값1이 같은 경우 실행할 문장;
            break;
        case 값2:
            변수와 값2가 같은 경우 실행할 문장;
            break;
        default:
            변수와 모든 값이 다를 경우 실행할 문장;
    }

    num = 10
    swtich(num) {
        case 5:
            console.log('num은 5입니다');
            break;
        case 10:
            console.log('num은 10입니다');
            break;
        default:
            console.log('원하는 값이 없습니다');
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch 문 1</title>
</head>
<body>
    <h2>switch 문 1</h2>
    <script>
        let input= prompt('아동, 청소년, 성인 중 하나를 고르세요');

        switch(input) {
            case '아동':
                input += ': 입장료 무료'; // "아동: 입장료 무료"
                break;
            case '청소년':
                input += ': 입장료 5,000원';
                break;
            case '성인':
                input += ': 입장료 10,000원';
                break;
            default:
                alert('입력값을 확인하세요!');
                input = '입력값 확인';
        }
        console.log(input);
    </script>
</body>
</html>

 

switch문 활용하기: 달(month)을 입력받아 해당 달의 마지막 일이 몇일인지 출력하는 프로그램 제작

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch문 2</title>
</head>
<body>
    <h2>swotch문 2</h2>
    <script>
        const month = Number(prompt('달을 입력하세요'));

        switch(month){
            case 1: case 3: case 5: case 7: case 8: case 10: case 12:
                console.log(`${month}월의 마지막 일자는 31일입니다`);
                break;
            case 4: case 6: case 9: case 11:
                console.log(`${month}월의 마지막 일자는 30일입니다`);
                break;
            case 2:
                console.log(`${month}월의 마지막 일자는 29일입니다`);
                break;
        }
    </script>
</body>
</html>