JavaScript - 제어문 예제

제어문

• Java와 동일하다
• 조건문
  • 조건의 결과가 참일 때, 거짓일 때 수행되는 문장이 각각 다르다.
  • if
  • if - else
  • if -else if
  • switch

조건문 예시 코드

ifEx1.html

        <script type="text/javascript">
            var max = 0;
            for(var i = 1; i <=3; i++) {
                var input = prompt("숫자" + i + " 입력")
                if(max < input) {
                    max = input;
                }
            }
            document.write("최대값 : " + max)
        </script>

ifEx2.html

        <script type="text/javascript">
            var id = prompt("아이디 입력");
            var pw = prompt("비밀번호 압력");
            var rid = "abcd";
            var rpw = "1234";

            if(id == rid && pw == rpw) {
                document.write("로그인 성공.");
            }
            else{
                alert("아이디 또는 비밀번호가 일치하지 않습니다.");
                document.write("로그인 실패.");
            }
        </script>

ifEx3.html

        <script type="text/javascript">
            var id = prompt("아이디 입력");
            var pw = prompt("비밀번호 압력");
            var rid = "abcd";
            var rpw = "1234";
            var quiz = "서울";
            if(id == rid && pw == rpw) {
                alert(id + "님 반갑습니다");
                var ans = prompt("대한민국의 수도는?");
                if(ans == quiz) {
                    document.write("정답입니다.");
                }
                else {
                    document.write("틀렸습니다. 대한민국의 수도는 서울입니다.")
                }
            }
            else{
                alert("아이디 또는 비밀번호가 일치하지 않습니다.");
                document.write("종료합니다.");
            }
        </script>

ifEx4.html

        <script type="text/javascript">
            var prdNo = prompt("상품번호 입력", "1 또는 2 입력");
            var laptopPrice = 1200000;
            var airJordan = 100000;
            if(prdNo == 1 ) {
                let order = prompt("주문수량 입력");
                let total = laptopPrice * order;
                document.write("상품명 : 노트북<br>");
                document.write("가격 : 1,200,000원<br>");
                document.write("주문수량 : " + order + "개<br>");
                document.write("주문액 : " + total.toLocaleString() + "원<br>");
                document.write("할인액 : " + (total * 0.1).toLocaleString() + "원<br>");
                document.write("총 지불액 : " + (total * 0.9).toLocaleString() + "원<br>");
            }
            else if(prdNo == 2 ) {
                let order = prompt("주문수량 입력");
                let total = airJordan * order;
                document.write("상품명 : 운동화<br>");
                document.write("가격 : 100,000원<br>");
                document.write("주문수량 : " + order.toLocaleString() + "개<br>");
                document.write("주문액 : " + total.toLocaleString() + "원<br>");
                if( total < 500000) {
                    document.write("할인액 : 0 원<br>");
                    document.write("총 지불액 : " + total.toLocaleString() + "원<br>");
                }
                else if ( total >= 500000 && total < 1000000 ) {
                    document.write("할인액 : " + (total * 0.05).toLocaleString() + "원<br>");
                    document.write("총 지불액 : " + (total * 0.95).toLocaleString() + "원<br>");
                }
                else if ( total >= 1000000 ) {
                    document.write("할인액 : " + (total* 0.1).toLocaleString() + "원<br>");
                    document.write("총 지불액 : " + (total * 0.9).toLocaleString() + "원<br>");
                }
            }
            else {
                alert("잘못된 입력");
                document.write("종료합니다");
            }
        </script>

ifEx4-2.html

        <script type="text/javascript">
            let prdNo = prompt("상품번호 입력", "1 또는 2 입력");
            if(prdNo == 1 || prdNo == 2) {
                let prdName, prdPrice, prdQyt, amount, discount, total;
                if(prdNo == 1) {
                    prdName = "노트북";
                    prdPrice = 1200000;
                } else {
                    prdName = "운동화";
                    prdPrice = 100000;
                }
                prdQyt = prompt("주문수량 입력");

                amount = prdPrice * prdQyt;
                if(amount >= 1000000) {
                    discount = amount * 0.1;
                }
                else if (amount >= 500000) {
                    discount = amount * 0.05;
                }
                else {
                    discount = 0;
                }
                total = amount - discount;
                document.write("상품명 : " + prdName + "<br>");
                document.write("가격 : " + prdPrice.toLocaleString() + "원<br>");
                document.write("주문수량 : "  + prdQyt + "개<br>");
                document.write("주문액 : " + amount.toLocaleString() + "원<br>");
                document.write("할인액 : " + discount.toLocaleString() + "원<br>");
                document.write("총 지불액 : " + total.toLocaleString() + "원<br>");
            }
            else {
                alert("잘못된 입력");
                document.write("종료합니다");
            }
        </script>

switchEx1.html

        <script type="text/javascript">
            let value = prompt("1 ~ 3 까지 숫자를 입력.");
        switch(value) {
            case "1" : document.write("<img src=\"image/lizard.png\">");
            break;
            case "2" : document.write("<img src=\"image/lizardon.png\">");
            break;
            case "3" : document.write("<img src=\"image/megalizardon.png\">");
            break;
            default : alert("잘못 입력");
        }
        </script>

• 반복문
  • 반복문에 있는 조건에 따라 반복 횟수가 결정되고 반복 횟수만큼 반복
  • for
  • for in
  • while
  • do - while
  • forEach()
    • 배열.forEach()
    • 배열.forEach(function() { 실행문장 });
    • function()의 인수 3개가 지정되어 있는데, 사용하지 않아도 되지만 사용하는 경우 순서를 잘 지켜야 한다.
      • 첫 번째 인수 : 배열의 항목
      • 두 번째 인수 : 배열의 인덱스
      • 세 번째 인수 : 배열 그 자체
      • function(배열의 항목, 배열의 인덱스, 배열 그 자체)

반복문 예시 코드

forEx1.html

        <script type="text/javascript">
            var sum = 0;
            for(var i = 1; i <= 10; i++) {
                document.write("i = " + i + "<br>");
                sum += i;
            }
            document.write("sum = " + sum);
        </script>

forEx2.html

        <script type="text/javascript">
            document.write("<ul><li>태그 반복 출력</li><ul><br>");
             for(var i = 1; i <= 10; i++) {
                document.write("<li type = \"square\" >" +  "i = " + i + "</li>");
            }
            document.write("</li></ul></ul>");
        </script>

forEx3.html

    <style>
        th {background: yellow;}
        td {width: 80px; text-align: center;}
    </style>
        <script type="text/javascript">
            var sum = 0;
            document.write("<table border=\"1\" ><tr><th>i</th><th>sum</th></tr>")
                for(var i = 1; i <= 10; i++) {
                    sum += i;
                document.write("<tr><td>" + i + "</td><td>" + sum + "</td></tr>");
            }
            document.write("</table>");
        </script>

forinEx1.html

        <script type="text/javascript">
            var fruits = ["사과", "포도", "복숭아"];
            for(var i in fruits) {
                document.write("fruits[" + i + "]" + " = " + fruits[i] + "<br>");
            }
        </script>

forEach.html

        <script type="text/javascript">
                        var fruits = ["사과", "포도", "복숭아"];
                        fruits.forEach(function(item) {
                            document.write(item + "<br>");
                            // 사과
                            // 포도
                            // 복숭아 출력
                        });
                        document.write("<hr>")
                        fruits.forEach(function(item, index) {
                            document.write(item + " " + index + "<br>");
                            // 사과
                            // 포도
                            // 복숭아 출력
                        });
                        document.write("<hr>")
                        fruits.forEach(function(item, index, fruits) {
                            document.write(item + " " + index + " " + fruits + "<br>");
                            // 사과 0 사과,포도,복숭아
                            // 포도 1 사과,포도,복숭아
                            // 복숭아 2 사과,포도,복숭아 출력
                        });

        </script>

nestedForEx.html

        <script type="text/javascript">
            for(var i = 0; i < 4; i++) {
                for(var j = 0; j < 7; j++) {
                    document.write("<img src=\"image/apple.png\">");
                }
                document.write("<br>")
            }
            document.write("<hr>")
            for(var i = 1; i <= 4; i++) {
                for(var j = 1; j <= 7; j++) {
                    if( j%2 == 0 ) {
                        document.write("<img src=\"image/bomb.png\">");
                    }else {
                    document.write("<img src=\"image/apple.png\">");
                    }
                }
                document.write("<br>")
            }
        </script>

whileEx.html

        <script type="text/javascript">
            var input = prompt("숫자 입력");
            var i = 0;
            document.write("<h1>총 " + input + "개의 이미지 출력</h1>")
            while( i < parseInt(input) ) {
                if( i%3 == 0){
                document.write("<img src=\"image/cherry.png\">");
                }
                else if ( i%3 == 1) {
                document.write("<img src=\"image/bomb.png\">");
                }
                else{
                document.write("<img src=\"image/apple.png\">");
                }
                i++;
            }
        </script>

doWhileEx.html

        <script type="text/javascript">
            var count = 0;
            do {
                var check = confirm("계속 경고창을 보시겠습니까?");
                if(check == true) {
                    count++;
                    alert("경고 " + count);
                }
            }
            while(check == true) 
            document.write("경고창 출력 횟수 : " + count);
        </script>