반응형
제어문이란?

 

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

제어문에는 조건을 만족하는지의 여부에 따라 코드를 제어할 수 있는 조건문과

변수에 일치하는 경우의 값에 따라 코드를 제어할 수 있는 선택문

그리고 특정 코드를 여러 번 반복해서 실행할 수 있도록 하는 반복문이 있다.

 

조건문

 

조건문은 조건식의 값이 참(true) 혹은 거짓(false)인지에 따라 자바스크립트 코드를 제어합니다.

조건문의 종류로는 if문, else문, 그리고 else if문이 있습니다.

 

if 문

 

조건식을 만족할 경우에만 코드를 실행합니다.

Boolean() 내장 메서드와 마찬가지로 그 어떤 데이터를 입력해도 true 또는 false를 반환합니다.

 

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

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제어문</title>
</head>
<body>
    <h3>제어문 : if문</h3>
    <script>
        // 값을 입력하고 확인을 클릭하면, 입력한 값이 변수에 저장된다.
        // 취소를 클릭하면, 변수에 null이 저장된다.
        var walkAmount = prompt("오늘 하루 걸음수", "0"); //대화상자

        alert(walkAmount); // walkAmount 변수의 값을 출력하는 대화상자.

        if(walkAmount >= 10000){
            document.write("좋은 습관입니다.<br>");
        }else{
            document.write("좀 더 열심히 걸으세요.<br>");
        }
        document.write("프로그램 종료");
    </script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>제어문 : if문</h3>
    <script>

        // 조건식에 논리형 데이터가 아닌 다른 자료형이 오면 true로 인식된다.
        // 0, null, "" (빈문자), undifined

        var min = prompt("당신의 통화량은 얼마입니까?", "0");
        if(min >= 60) {
            document.write("많이 사용하는 편이네요.<br>");
        }

        document.write("프로그램 종료");
    </script>
</body>
</html>

 

 

이름을 입력하고 값이 있으면 이름을 출력하고 없으면 출력하지 않는 예제 실습 - if_3.html
<!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>
    <h3>제어문 - if문</h3>
    <script>
        var name = prompt("당신의 이름은 무엇입니까?", "");

        if(name){
            document.write(name);
        }
    </script>
</body>
</html>

 

else 문

 

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

두 가지 결과를 가질 때, else문은 앞의 if문이 만족하지 않았을 때 실행합니다.

 

 

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

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제어문 : if ~ else문</title>
</head>
<body>
    <h3>제어문 : if ~ else문</h3>
    <script>
        var num = prompt("좋아하는 숫자는?", "0");

        /*
        if(num % 2 == 0){
            document.write("짝수입니다.");
        }else{
            document.write("홀수입니다.");
        }
        */
        if(num % 3 == 0){
            document.write("3의 배수이다.");
        }else{
            document.write("3의 배수가 아니다.");
        }
    </script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제어문 : if ~ else문</title>
</head>
<body>
    <h3>제어문 : if ~ else문</h3>
    <script>
        var result = confirm("회원 삭제를 하겠습니까?"); // 확인/취소 대화상자 -> 확인 버튼 true / 취소 버튼 false

        if(result){
            document.write("회원을 삭제하였습니다.");
        }else{
            document.write("회원을 삭제를 취소하였습니다.");
        }
    </script>
</body>
</html>

 

else if 문 

 

두 가지 이상의 조건식과 정해놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어져 있습니다.

 

 

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

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제어문 : if ~ else if문</title>
</head>
<body>
    <h3>제어문 : if ~ else if문</h3>
    <script>
        var jumsu = prompt("당신의 점수를 입력하세요");

        if(jumsu >= 90){
            document.write("학점이 A입니다");
        }else if(jumsu >= 80){
            document.write("학점이 B입니다");
        }else if(jumsu >= 70){
            document.write("학점이 C입니다");
        }else{
            document.write("학점이 D입니다");
        }
        document.write("<br>프로그램 종료");
    </script>
</body>
</html>

 

 

중첩 if 문

 

조건문 안에 조건문이 있으면 중첩 if문이라고 한다.

 

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

 

반응형
저작자표시 비영리 변경금지

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

[JavaScript] 제어문 (3) - 반복문 while문, do while문, for문, 중첩 for문, break문, continue문  (0) 2024.01.28
[JavaScript] 제어문 (2) - 선택문 switch문  (0) 2024.01.28
[JavaScript] JavaScript 시작하기 (4) - 연산자  (0) 2024.01.17
[JavaScript] JavaScript 시작하기 (3) - 변수  (0) 2024.01.17
[JavaScript] JavaScript 시작하기 (2) - 선언문과 주석 처리  (0) 2024.01.17

티스토리툴바