[Javascript] 03-2 조건문

if 문

1. 조건식에 조건(true, false)가 들어오는 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?", "0");

        if(walkAmount >= 10000) {
            document.write("매우 좋은 습관을 지니고 꼐시는군요!!", "<br>");
        } 
        document.write("================= The End ================");
    </script>
</body>
</html>

2. 조건식에 논리형이 아닌 다른 형이 오는 경우

- 0, null, "", undefined 는 모두 false를 반환한다.

- 그 밖의 값은 true로 인식한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>condition</title>
</head>
<body>
    <script>
        // true, false 연습 예제
        var num = 3; // 0이면 false, 0이 아닌 다른 숫자면 true
        if(num) {
            document.write(num, "<br>");
        }
        document.write("================= The End ================", "<br>");
    </script>
</body>
</html>

else 문

1. If-else문 예제 (+삼항 연산자로도 표현이 가능)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>condition</title>
</head>
<body>
    <script>
        var walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?", "0");
        // 조건문에 포함할 수 있는 형식은 논리식, 변수 값(0, "", null, undefined ==> false)
        // if(0) { -> 항상 false가 동작함
        if(walkAmount >= 10000) {
            document.write("매우 좋은 습관을 지니고 계시는군요!!", "<br>");
        } else {
            document.write("조금 더 노력하세요!!", "<br>");
        } 
        // if-else문 삼항연산자로 변환
        var result = walkAmount >= 10000 ? "매우 좋은 습관을 지니고 계시는군요!!<br>" : "조금 더 노력하세요!!<br>";
        
        document.write(result); 
        document.write("================= The End ================", "<br>");
    </script>
</body>
</html>

2. confirm 메서드 사용한 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>confirm()</title>
</head>
<body>
    <script>
        //confirm 확인 클릭시 true 리턴, 취소 클릭시
        //var result = confirm("정말로 탈퇴하시겠습니까?");

        //if 조건식 안에 confirm() 사용 가능
        if(confirm("정말로 탈퇴하시겠습니까?")) {
            document.write("탈퇴 처리되었습니다.");
        } else { 
            document.write("탈퇴 취소되었습니다.");

        }
    </script>
</body>
</html>

else if 문

1. 계절 출력 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>elseif</title>
</head>
<body>
    <script>
        var mon = prompt("현재는 몇 월입니까?", "0");
        
        // 9 <= mon <= 11 --> 가을
        if(mon >= 9 && mon <= 11) {
            document.write("가을");
        // 6 <= mon <= 8 --> 여름
        } else if(mon >= 6 && mon <= 8) {
            document.write("여름");
        // 3 <= mon <= 5 --> 봄
        } else if(mon >= 3 && mon <= 5) {
            document.write("봄");
        // 1<= mon <= 2 || mon == 12 --> 겨울
        } else if(mon >= 1 && mon <= 2 || mon == 12) {
            document.write("겨울");
        // mon < 1 || mon > 12 --> 현재 창 새로고침
        } else {
            alert("1~12까지의 숫자를 입력해주세요.");
            //현재 창 새로고침 메소드
            location.reload();
        }
    </script>
</body>
</html>

중첩 if 문

1. 아이디, 비밀번호 오류 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inif</title>
</head>
<body>
    <script>
        var id = "easy1004"; 
        var pw = "112233";

        var user_id = prompt("아이디는?","");
        var user_pw = prompt("비밀번호는?", "");

        //입력된 user_id와 id값 비교
        //user_id와 id값이 같으면 pw비교
        if(id==user_id) {
            if(pw == user_pw) {
                document.write(user_id + "님 반갑습니다!");
            } else {
                alert("비밀번호가 일치하지 않습니다.");
                location.reload();
            }
        } else {
            alert("아이디가 일치하지 않습니다.");
            location.reload();
        }
    </script>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'💻 1. 웹개발_Front end > 1-4 Javascript' 카테고리의 다른 글

[Javascript] 03-4 반복문 (0)	2021.09.07
[Javascript] 03-3 선택문 (0)	2021.09.06
[Javascript] 03-1 제어문이란? (0)	2021.09.05
[Javascript] 02-3 연산자 (0)	2021.09.05
[Javascript] 02-2 변수 (0)	2021.09.05