단비의 코딩 공부 blog

[Vanilla JS]study 3일차 - 반복문 본문

javascript&jquery

[Vanilla JS]study 3일차 - 반복문

황굽달 2022. 11. 24. 09:32

1. 복합 대입 연산자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        //복합대입연산자 : 사칙연산자와 대입연산자를 합해서 만든 연산자
        //** 주의사항 : 연산자 사이를 붙여 써야 인식 (띄어쓰기 X)

        var num = 10;
        console.log(num);
        
        num += 5; // += : 더하기 대입, 기존 변수값을 추가 대입
        console.log(num);

        num -= 5; // -= : 빼기 대입, 기존 변수값에 빼서 대입
        console.log(num);

        num *= 5; // *= : 곱하기 대입, 기존 변수값에 곱해서 대입
        console.log(num);

        num /= 5; // /= : 나누기 대입, 기존 변수값에 나눠서 대입
        console.log(num);

        num %= 3; // /= : 나머지 대입, 기존 변수값을 나머지로 대입
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>

2. 연결 대입 연산자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        //연결대입연산자 : += : 문자열을 추가 대입
        //1월~5월까지 선택상자로 출력

        var output = '<select>';
        
        output += '<option>1월</option>';
        output += '<option>2월</option>';
        output += '<option>3월</option>';
        output += '<option>4월</option>';
        output += '<option>5월</option>';
       
        output += '</select>'
        
        console.log(output);

        document.write(output);
    </script>
</head>
<body>
    
</body>
</html>

3. 증감 연산자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        var num = 10;

        console.log(num);

        num++; //1증가
        console.log(num);

        num--; //1감소
        console.log(num);

        console.log(num++); //코드 다음줄부터 변경

        console.log(num);

        console.log(++num); //해당 줄에서 바로 변경
    </script>
</head>
<body>
    
</body>
</html>

4. while문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        //초기값을 변수로 선언
        var num = 1;

        while(num <= 5){
            alert(num + '번째 반복');
            
            num++;
        }
    </script>
</head>
<body>
    
</body>
</html>

5. do while문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        //초기값을 변수로 선언
        var num = 1;

        do{
            alert(num + '번째 반복');

            num++;
        }while(num <= 5);
        
    </script>
</head>
<body>
    
</body>
</html>

6. do while과 while의 비교

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        //초기값을 변수로 선언
        var num = 10;

        //실행 X
        while(num > 10){ //조건을 틀리게 처리
            alert('while문 실행');
        }

        //조건이 맞지 않아도 한번은 실행하고 싶을 때 사용
        do{
            alert('do while문 실행');
        }while(num > 10); //조건을 틀리게 처리
    </script>
</head>
<body>
    
</body>
</html>

7. for문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        /* var num = 1;

        while(num <= 5){
            alert(num + '번째 반복');
            
            num++;
        } 
        */

        for(var i=1;i<=5;i++){
            alert(i + '번째 반복'); 
        }

        /* 
            for문 : 조건식이 맞는 동안 반복하는 구문

            for(초기식;조건식;증감식){
                //반복할 표현식
            }
        */
    </script>
</head>
<body>
    
</body>
</html>

8. 역 for문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        for(var i=10;i>=0;i--){
            alert(i);
        }
    </script>
</head>
<body>
    
</body>
</html>

9. 복합 대입 연산자 for문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        //1~10사이의 짝수만 반환
        
        for(var i=2;i<=10;i+=2){
            alert(i);
        }
    </script>
</head>
<body>
    
</body>
</html>

10. 월 선택상자 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        var output = '<select>';

        //옵션태그반복
        for(var i=1;i<=12;i++){
            output += '<option>' + i + '월</option>'
        }

        output += '</select>';

        //문서출력
        document.write(output);
    </script>
</head>
<body>
    
</body>
</html>

11. 년도 선택상자 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        var output = '<select>';

        //옵션태그반복
        for(var i=2022;i>=1900;i--){
            output += '<option>' + i + '년</option>'
        }

        output += '</select>';

        //문서출력
        document.write(output);
    </script>
</head>
<body>
    
</body>
</html>

12. 일 선택상자 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        //사용자에게 월을 입력받아, 해당 일 선택상자를 출력하시오.
        
        /* 내가 만든거
        var month = prompt('월을 입력해주세요' , '1~12사이 정수 입력');

        var output = '<select>';

        //옵션태그반복

        if(month == 1 || month == 3 || month == 5 || month == 7 || month == 9 || month == 11){
            for(var i=1;i<=31;i++){
                output += '<option>' + i + '일</option>'
            }      
        }else if(month == 4 || month == 6 || month == 8 || month == 10 || month == 12){
            for(var i=1;i<=30;i++){
                output += '<option>' + i + '일</option>'
            } 
        }else if(month == 2){
            for(var i=1;i<=28;i++){
                output += '<option>' + i + '일</option>'
            }
        }
        output += '</select>';

        //문서출력
        document.write(output); 
        */

        var m = prompt('월을 입력해주세요' , '1~12사이 정수 입력');
        var lastDay;

        if(m >= 1 && m <= 12){
            if(m == 2){
                lastDay = 28;
            }else if(m == 4 || m == 6 || m == 8 || m == 10 || m == 12){
                lastDay = 30;
            }else{
                lastDay = 31;
            }

            var output = '<select>';

            for(var i=1;i<=lastDay;i++){
                output += '<option>' + i + '일</option>';
            }            

            output += '</select>';

            document.write(output);

        }else{
            alert('1~12사이 정수로 다시입력하세요.');
        }
    </script>
</head>
<body>
    
</body>
</html>

13. break 키워드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        //break : 반복문을 벗어나는 키워드
        
        for(var i=1;true;i++){
            alert(i + '번째 반복');

            var q = confirm('계속하시겠습니까?');

            if(!q){ //취소버튼 눌렀을 때
                break;
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

14. continue 키워드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        //break : 반복문을 벗어나는 키워드
        //continue : 현재 반복을 벗어나는 키워드

        //1~10사이의 숫자 중 3의 배수를 반환하지 않기

        for(var i=1;i<=10;i++){
            if(i % 3 == 0){ //3의 배수라면
                continue;
            }else{
                alert(i);
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

15. 중첩 for문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        /* 
            for(){
                for(){

                }
            }
            **주의사항 : 변수명을 다르게 작성 - i, j, k ...
        */

        /* 
            =====1학년=====
            1학년 1반
            ...
            1학년 10반
            ...
            3학년 10반
        */

        var output = ''; //문자열을 공백으로 처리

        //학년 반복
        for(var i=1;i<=3;i++){
            output += '=====' + i + '학년=====<br>';

            //반 반복
            for(var j=1;j<=10;j++){
                output += i + '학년 ' + j + '반<br>';
            }
        }

        //문서출력
        document.write(output);

    </script>
</head>
<body>
    
</body>
</html>

16. 구구단 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        /* 
            ===== 2단출력 =====
            2 X 1 = 2
            ...
            9 X 9 = 81
        */
       
        var output = ''; //구구단을 담는 변수

        //단 반복
        for(var i=2;i<=9;i++){
            output += '=====' + i + '단=====<br>';

            //곱해지는 수 반복
            for(var j=1;j<=9;j++){
                output += i + ' X ' + j + ' = ' + (i * j) + '<br>';
            }
        }
        //문서출력
        document.write(output);

    </script>
</head>
<body>
    
</body>
</html>

17. 별 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 반복문</title>
    <script>
        /* 
            //높이 (line)가 5
            *
            **
            ***
            ****
            *****
            출력하기
        */
       
        var output = ''; //별을 담는 변수

        //줄바꿈 반복
        for(var i=1;i<=5;i++){
            //별출력 반복

            for(var j=1;j<=i;j++){
                output += '★';
            }
            output += '<br>';
        }

        //문서출력
        document.write(output);
    </script>
</head>
<body>
    
</body>
</html>
저작자표시 (새창열림)

'javascript&jquery' 카테고리의 다른 글

[javascript]TweenMax.js로 마우스 커서 애니메이션 만들기  (0) 2022.11.29
[Vanilla JS]study 4일차 - 배열과 for in문  (0) 2022.11.29
[Vanilla JS]study 2일차 - 조건문  (0) 2022.11.23
[Vanilla JS]study 1일차 - 기본문법과 변수  (0) 2022.11.22
[javascript]플러그인 없이 슬롯 머신 만들기  (0) 2022.10.20
'javascript&jquery' Related Articles more