각진 세상에 둥근 춤을 추자

[JavaScript] 조건문 본문

JavaScript

[JavaScript] 조건문

circle.j 2022. 10. 7. 01:34

 

제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말한다.

제어문에는 조건 만족 여부에 따라 코드를 제어하는 조건문, 변수 일치에 따라 코드를 제어하는 선택문 그리고 특정 코드를 여러 번 반복해서 실행하는 반복문이 있다. 

 

조건문에는 if문, else문, else if문이 있고, 선택문에는 switch문, 반복문에는 while문과 for문이 있다. 

 

 

 

   if문   

 

if문은 조건식을 만족(true)할 경우에만 코드를 실행한다.

 

if(조건식){
	자바스크립트 코드;
}

 

(예제1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if 조건문</title>
</head>
<body>
    <script>
        let walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?","0");

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

 

 

(예제2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if 조건문</title>
</head>
<body>
    <script>
        let userName = prompt("방문자의 이름은 무엇입니까?", "0");

        if(userName){
            document.write(userName + "님, 반갑습니다!");
        }
    </script>
</body>
</html>

 

 

 

    if-else문    

 

 

조건식을 만족할 경우와 만족하지 않을 경우에 따라 실행되는 코드가 다르다. 

 

if(조건식){
	자바스크립트 코드1;
}else {
 	자바스크립트 코드2;
}

 

(예제1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if~else 조건문</title>
</head>
<body>
    <script>
        let num = prompt("당신이 좋아하는 숫자는 무엇입니까?", "0");

        if (num %2 == 0) {
            document.write("당신이 좋아하는 숫자는 짝수이군요.");
        } else {
            document.write("당신이 좋아하는 숫자는 홀수이군요.");
        }
    </script>
</body>
</html>

 

 

 

(참고) confirm() 메서드

confirm() 메서드로 생성된 창에서 [확인] 버튼을 누르면 true로, [취소] 버튼을 누르면 false로 반환된다.

 

(예제2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if-else 조건문</title>
</head>
<body>
    <script>
        let result = confirm("정말로 회원을 탈퇴하시겠습니까?");

        if(result) {
            document.write("탈퇴 처리되었습니다.");
        }   else{
            document.write("탈퇴 취소되었습니다.");
        }
    </script>
</body>
</html>

 

 

 

 

   if~else if~else문   

 

if(조건식){
 코드1;
}else if(조건식2){
 코드2;
}else if(조건식3){
 코드3;
}else {
 코드4;
}

 

(예제1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if~else if~else</title>
</head>
<body>
    <script>
        let month = prompt("지금은 몇 월입니까?","0");

        if(month >=3 && month <= 5){
            document.write("햇살 가득한 푸른 봄이네요.")
        }else if(month >= 6 && month <= 8){
            document.write("따사로운 볕이 가득한 여름이네요.")
        }else if(month >= 9 && month <= 11){
            document.write("가을 하늘은 높고 말은 살이 찌고 있어요.");
        }else {
            document.write("하얀 눈사람을 기다리는 겨울이네요.")
        }
    </script>
</body>
</html>

 

 

   중첩 if문   

 

if(조건식1){
	if(조건식2){
    	자바스크립트 코드;
    }
}

 

중첩 if문은 바깥쪽에 있는 조건문인 조건식 1을 만족해야 안쪽 조건문인 조건식 2를 검사한다. 

만약 안쪽 조건식 2를 만족하지 않으면 바깥쪽 조건문인 조건식 1의 코드만 실행하고 종료된다.

 

(예제1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>중첩 if문</title>
</head>
<body>
    <script>
        let id = "circle.j";
        let pw = "221007"

        let user_id = prompt("아이디를 입력해 주세요.");
        let user_pw = prompt("비밀번호를 입력해 주세요.");

        if(id == user_id){
            if(pw == user_pw){
                document.write(user_id + "님, 반갑습니다.");
            } else {
                document.write("비밀번호가 일치하지 않습니다.");
            }
        }else {
            document.write("아이디가 일치하지 않습니다.");
            location.reload(); // 브라우저 새로고침
        }
    </script>
</body>
</html>

 

 

 

 

'JavaScript' 카테고리의 다른 글

[JavaScript] 반복문  (0) 2022.10.08
[JavaScript] 선택문  (0) 2022.10.08
[JavaScript] 연산자 - 적정 체중 구하는 테스트기  (0) 2022.10.06
[JavaScript] 연산자  (0) 2022.10.06
[JavaScript] 변수  (0) 2022.10.06
'JavaScript' Related Articles more