본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] for문

for문

for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다.


for문

for(초깃값; 조건식; 증감값){
    //반복 코드
}

for(var i=0; i<100; i++){
     //반복 코드
}
초기값 설정 : var i=0 초기 시작 값을 0으로 설정하고, 초기값은 오직 한 번만 실행되면 이후로는 실행되지 않습니다.
조건식 설정 : i<100 조건에 맞으면 실행됩니다.
증감 설정 : 조건에 맞으면 1씩 증가됩니다.

0~100까지 실행하는 반복문입니다.

Sample1

for문을 이용한 예제입니다.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script>
        //화면에 1~10까지 출력해주세요!~
        document.write(1);
        document.write(2);
        document.write(3);
        document.write(4);
        document.write(5);
        document.write(6);
        document.write(7);
        document.write(8);
        document.write(9);
        document.write(10);
        document.write("<br><br>");

        //for문을 이용해서 0부터 100까지 출력하세요~
        for( var i=0; i<=100; i++){
            document.write(i);
        }
        document.write("<br><br>");

        //for문을 이용해서 1부터 100까지 출력하세요~
        for( var i=1; i<=100; i++ ){
            document.write(i);
        }
        document.write("<br><br>");

        //for문을 이용해서 1~100 숫자 중에서 짝수만 출력하세요~
        for( var i=2; i<=100; i+=2){
            document.write(i);
        }
        document.write("<br><br>");

        //for문을 이용해서 1~100 숫자 중에서 5의 배수는 파란색으로 7의 배수는 빨간색으로 출력하세요~
        for( var i=1; i<=100; i++){
            if( i % 5 == 0){
                document.write("<span style='color:blue'>"+ i +"</span>")
            } 
            if( i % 7 == 0){
                document.write("<span style='color:red'>"+ i +"</span>")
            } 
        }
        document.write("<br><br>");

        //for문을 이용해서 1~100 숫자 중에서
        //5의 배수는 파란색 7의 배수는 빨간색 공통 배수는 검은색

        //배열과 반복문
        let arr1 = new Array(100,200,300,400,500);

        //배열의 갯수 구하기
        document.write(arr1.length,"<br>");

        //배열의 데이터 구하기
        for(var i=0; i<arr1.length; i++){
            document.write(arr1[i],"<br>");
        }

        //배열 데이터의 합 구하기
        let sum = 0;
        for(var i=0; i<arr1.length; i++){
            // i = 0, 1, 2, 3, 4
            // arr1[0], arr1[1], arr1[2], arr1[3], arr1[4]
            // 100, 200, 300, 400, 500
            // sum = sum + arr1[i]
            //   0   =   0  + 100
            // 100  = 100 + 200
            // 300  = 300 + 300
            // 600  = 600 + 400
            // 1000 = 1000 + 500
            // 1500
            sum = sum + arr1[i];
        }
        document.write(sum);
    </script>
</head>
<body>
    
</body>
</html>  

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기