1부터 10까지 출력하기(초기값0)

for()문을 이용하여 1부터 10까지 출력하는 예제입니다.

{
        for(let i=0; i<10; i++){
            console.log(i);
        }
}

1. i가 0으로 초기화됩니다. 2. 조건 i < 10을 만족하므로 반복 부분이 실행됩니다.
3. console.log(i);를 통해 현재 i의 값인 0이 콘솔에 출력됩니다.
4. i++에 의해 i는 1로 증가합니다.
5. 조건 i < 10을 다시 확인하고, 조건이 만족하므로 다시 반복 부분이 실행됩니다.
6. 위 과정을 반복하여 i가 9까지 증가하면서 0부터 9까지의 숫자가 순서대로 콘솔에 출력됩니다.
7. i가 10이 되면 조건 i < 10을 만족하지 않으므로 루프가 종료됩니다.

결과 확인하기

02. 1부터 25까지 출력하기(초기값0)

for()문을 이용하여 1부터 25까지 출력하는 예제입니다.

{
        for(let i = 0; i<=24; i++){
            console.log(i+1);
        }
}

1. 'for' 반복문의 구조:
1) for 키워드 다음에 소괄호 ()가 오며, 괄호 안에는 초기화, 조건, 그리고 증감 섹션이 포함됩니다.
2) 반복문은 초기화부터 시작하여 조건이 만족하는 동안 코드 블록을 반복 실행하며, 각 반복이 끝날 때마다 증감 섹션이 실행됩니다.
2. 초기화 섹션: let i = 0;
i라는 변수를 선언하고 초기값 0을 할당합니다. 이 변수는 반복문의 반복 횟수를 추적하는 역할을 합니다.
3. 조건 섹션: i <= 25;
i가 25보다 작거나 같은 동안 반복문이 실행됩니다. 조건이 참(True)인 동안 반복문의 코드 블록이 반복 실행됩니다.
4. 증감 섹션: i++
각 반복이 끝날 때마다 i 값을 1씩 증가시킵니다.
5. 반복 실행 코드 블록: { ... }
중괄호 {} 안에 있는 코드는 반복문이 실행될 때마다 실행됩니다. console.log(i + 1);은 현재 i 값에 1을 더한 결과를 출력합니다.

결과 확인하기

03. 1부터 20까지 출력하기(짝수만)(3가지)

for()문을 이용하여 1부터 20까지 출력하는 예제입니다.

{
        for(let i = 0; i<21; i+=2){
            console.log(i);
        }
        
        let i = 0;
        while(i<21){
            console.log(i);
            i +=2;
        }

        for(let i=0; i<21; i++){
            if(i%2 == 0){
                console.log(i);
            }
        }
}

1. for 반복문을 사용하여 0부터 20까지의 값을 2씩 증가시키며 출력합니다. 반복문은 0부터 시작해서 2씩 증가하면서 20을 포함하여 총 11번 반복됩니다. 결과적으로 0, 2, 4, ..., 20까지의 짝수가 출력됩니다.
2. while 반복문을 사용하여 마찬가지로 0부터 20까지의 값을 2씩 증가시키며 출력합니다. 반복문은 조건인 i < 21이 참인 동안 실행됩니다. 초기값으로 i를 0으로 설정하고, 반복문 내에서 i 값을 2씩 증가시킵니다. 결과는 첫 번째 코드와 동일하게 0, 2, 4, ..., 20까지의 짝수가 출력됩니다.
3. for 반복문을 사용하여 0부터 20까지의 값을 1씩 증가시키며, 만약 i가 짝수인 경우에만 출력합니다. 반복문은 모든 정수를 탐색하면서, if 문을 통해 현재 i 값이 짝수인지 확인합니다. 만약 짝수라면 해당 값을 출력합니다. 결과는 역시 0, 2, 4, ..., 20까지의 짝수만 출력됩니다.

결과 확인하기

04. 1부터 20까지 출력하기(홀수만)(3가지)

for()문을 이용하여 1부터 100까지 출력하는 예제입니다.

{
        for(let i = 1; i<21; i+=2){
            console.log(i);
        }
        
        let i = 1;
        while(i<21){
            console.log(i);
            i +=2;
        }

        for(let i=0; i<21; i++){
            if(i%2 == 1){
                console.log(i);
            }
        }
}

1. for 반복문을 사용하여 1부터 21까지의 값을 2씩 증가시키며 출력합니다. 반복문은 1부터 시작해서 2씩 증가하면서 21을 포함하지 않는 범위에서 총 11번 반복됩니다. 결과적으로 1, 3, 5, ..., 19까지의 홀수가 출력됩니다.
2. while 반복문을 사용하여 마찬가지로 1부터 21까지의 값을 2씩 증가시키며 출력합니다. 반복문은 조건인 i < 21이 참인 동안 실행됩니다. 초기값으로 i를 1로 설정하고, 반복문 내에서 i 값을 2씩 증가시킵니다. 결과는 첫 번째 코드와 동일하게 1, 3, 5, ..., 19까지의 홀수가 출력됩니다.
3. for 반복문을 사용하여 0부터 20까지의 값을 1씩 증가시키며, 만약 i가 홀수인 경우에만 출력합니다. 반복문은 모든 정수를 탐색하면서, if 문을 통해 현재 i 값이 홀수인지 확인합니다. 만약 홀수라면 해당 값을 출력합니다. 결과는 역시 1, 3, 5, ..., 19까지의 홀수만 출력됩니다.

결과 확인하기

05. 1부터 100까지 출력하기(5의 배수)(3가지)

for()문을 이용하여 1부터 100까지 출력하는 예제입니다.

{
        for(let i = 5; i<101; i+=5){
            console.log(i);
        }
        
        let i = 1;
        while(i<101){
            console.log(i);
            i +=5;
        }

        for(let i=0; i<100; i++){
            if(i%5 == 0){
                console.log(i);
            }
        }
}

1. for 반복문을 사용하여 5부터 100까지의 값을 5씩 증가시키며 출력합니다. 반복문은 5부터 시작해서 5씩 증가하면서 100을 포함하지 않는 범위에서 총 20번 반복됩니다. 결과적으로 5, 10, 15, ..., 95, 100까지의 5의 배수가 출력됩니다.
2. while 반복문을 사용하여 마찬가지로 5부터 100까지의 값을 5씩 증가시키며 출력합니다. 반복문은 조건인 i < 101이 참인 동안 실행됩니다. 초기값으로 i를 5로 설정하고, 반복문 내에서 i 값을 5씩 증가시킵니다. 결과는 첫 번째 코드와 동일하게 5, 10, 15, ..., 95, 100까지의 5의 배수가 출력됩니다.
3. for 반복문을 사용하여 0부터 99까지의 값을 1씩 증가시키며, 만약 i가 5의 배수인 경우에만 출력합니다. 반복문은 모든 정수를 탐색하면서, if 문을 통해 현재 i 값이 5의 배수인지 확인합니다. 만약 5의 배수라면 해당 값을 출력합니다. 결과는 역시 5, 10, 15, ..., 95의 5의 배수가 출력됩니다.

결과 확인하기

06. 1부터 20까지 출력하기(짝수는 빨간색, 홀수는 파란색)

for()문을 이용하여 1부터 100까지 출력하는 예제입니다.

{
        for (let i = 1; i < 21; i++) {
            if (i % 2 === 0) {
                document.write("< span style='color: red;'>" + i + "< /span >","< br >");
            } else {
                document.write("< span style='color: blue;'>" + i + "< /span >","< br >");
            }
        }
}

1. for 반복문의 구조:
1) for 키워드 다음에 소괄호 ()가 오며, 괄호 안에는 초기화, 조건, 그리고 증감 섹션이 포함됩니다.
2) 반복문은 초기화부터 시작하여 조건이 만족하는 동안 코드 블록을 반복 실행하며, 각 반복이 끝날 때마다 증감 섹션이 실행됩니다.
2. 초기화 섹션: let i = 1;
i라는 변수를 선언하고 초기값 1을 할당합니다. 이 변수는 반복문의 반복 횟수를 추적하는 역할을 합니다.
3. 조건 섹션: i < 21;
i가 20보다 작은 동안 반복문이 실행됩니다. 조건이 참(True)인 동안 반복문의 코드 블록이 반복 실행됩니다.
4. 증감 섹션: i++
각 반복이 끝날 때마다 i 값을 1씩 증가시킵니다.
5. 반복 실행 코드 블록: { ... }
1) 중괄호 {} 안에 있는 코드는 반복문이 실행될 때마다 실행됩니다.
2) if 문을 사용하여 i 값이 짝수인지 홀수인지 확인합니다.
3) 만약 i가 짝수라면, 빨간색으로 텍스트를 출력하고, 그렇지 않으면 파란색으로 텍스트를 출력합니다.
4) document.write 함수를 사용하여 출력되는 텍스트를 HTML 문서에 추가합니다. span 태그와 style 속성을 사용하여 텍스트의 색상을 지정합니다.
5) "< br >"은 줄바꿈 태그로, 각 숫자가 새로운 줄에 출력되도록 합니다.

결과 확인하기

07. 배열 데이터 1부터 10까지 출력하기

for()문을 이용하여 1부터 100까지 출력하는 예제입니다.

{
        const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

        for(let i = 0; i < arr.length; i++){
            if(arr[i] % 2 == 0){
                console.log(arr[i]);
            }
        }
}

1. 배열 arr에 1부터 10까지의 정수가 할당되었습니다.
2. for 키워드 다음에 소괄호 ()가 오며, 괄호 안에는 초기화, 조건, 그리고 증감 섹션이 포함됩니다. 반복문은 초기화부터 시작하여 조건이 만족하는 동안 코드 블록을 반복 실행하며, 각 반복이 끝날 때마다 증감 섹션이 실행됩니다.
3. i라는 변수를 선언하고 초기값 0을 할당합니다. 이 변수는 배열의 인덱스를 추적하는 역할을 합니다.
4. i가 배열 arr의 길이보다 작은 동안 반복문이 실행됩니다. 조건이 참(True)인 동안 반복문의 코드 블록이 반복 실행됩니다.
5. 각 반복이 끝날 때마다 i 값을 1씩 증가시킵니다.
6. if 문을 사용하여 배열 arr에서 현재 인덱스 i에 해당하는 값이 짝수인지 확인합니다.

결과 확인하기

08. 구구단 출력하기(8단 출력하기)

for()문을 이용하여 1부터 100까지 출력하는 예제입니다.

{
        for(let i=8; i==8; i++){
            console.log("8단")
            for(let j=1; j<10; j++){
                console.log(i + "*" + j + "=" + i*j);
            }
        }
}

1. 첫 번째 for 반복문은 i의 초기값을 8로 설정하고, 조건이 i == 8인 동안 반복문이 실행됩니다. 이 조건은 단 한 번만 반복문을 실행하도록 합니다.
2. i라는 변수를 선언하고 초기값 8을 할당합니다. 이 변수는 구구단의 단을 나타내는 역할을 합니다.
3. i가 8과 같은 동안만 반복문이 실행됩니다. 이 조건이 참(True)인 경우에만 첫 번째 for 반복문의 코드 블록이 실행됩니다. 조건이 처음부터 참이기 때문에 반복문은 한 번만 실행됩니다.
4. 반복문이 한 번 실행된 후 i 값을 1씩 증가시키는 부분입니다. 이 증감 섹션은 첫 번째 for 반복문의 마지막에서 실행되며, 이후에 조건이 다시 평가됩니다.
5. 중괄호 {} 안에 있는 코드는 첫 번째 for 반복문이 실행될 때 실행됩니다.
6. j의 초기값은 1로 설정되고, j가 9보다 작을 동안만 실행됩니다.
7. j라는 변수를 선언하고 초기값 1을 할당합니다. 이 변수는 곱해지는 수를 나타내는 역할을 합니다.
8. j가 9보다 작은 동안만 반복문이 실행됩니다. 조건이 참(True)인 경우에만 두 번째 for 반복문의 코드 블록이 실행됩니다.
9. 반복문이 한 번 실행된 후 j 값을 1씩 증가시키는 부분입니다.
10. 중괄호 {} 안에 있는 코드는 두 번째 for 반복문이 실행될 때 실행됩니다.

결과 확인하기

09. 테이블 출력하기(5*5)

총 25칸의 테이블을 만드는 작업입니다.

{
        let table = "<table class='table'>";
        let num = 1;

        for(let i=1; i<=5; i++){
            table += "<tr>";
            for(let j=1; j<=5; j++){
                table += "<td>"+num+"</td>";
                num ++;
            }
            table += "</tr>";
        }
        table += "</table>";
        
        document.write(table);
}

1. "<table class='table'>";: table이라는 문자열 변수를 선언하고, 테이블을 시작하는 HTML 코드를 초기화합니다. 테이블에는 "table" 클래스가 적용됩니다.
2. num이라는 변수를 선언하고, 테이블 셀에 들어갈 숫자를 나타내기 위해 1로 초기화합니다.
3. 외부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 행(row)을 생성합니다.
4. 각 행을 시작하는 <tr> 태그를 table 문자열에 추가합니다.
5. 내부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 셀(cell)을 생성합니다.
6. 각 셀에 현재의 num 값을 포함한 <td> 태그를 table 문자열에 추가합니다. num은 1부터 시작하여 25까지 증가됩니다.
7. num 변수를 1씩 증가시킵니다.
8. 각 행의 끝을 표시하는 </tr> 태그를 table 문자열에 추가합니다.
9. 외부 루프가 다음 행을 생성하기 위해 다시 시작됩니다.
10. 테이블을 닫는 </table> 태그를 table 문자열에 추가합니다.
11. 최종적으로 완성된 table 문자열을 문서에 출력합니다.

결과 확인하기

10. 테이블 출력하기(5*5 짝수만 나오게 출력하기)

25칸의 테이블에 짝수만 나오도록 출력한 것입니다.

{
        let table = "<table class='table'>";
        let num = 1;
        
        for(let i=0; i<=5; i++){
            if(num%2==0){
                table += "<tr>";

                for(let j=1; j<=5; j++){
                    if(num%2 == 0 && num <51){
                    table += "<td>"+num+"</td>";
                    num +=2;
                    } 
                }
            } else {
                num++;
            };
            
            table += "</tr>";
        };
        
        table += "</table>";
        
        document.write(table);
}

1. table이라는 문자열 변수를 선언하고, 테이블을 시작하는 HTML 코드를 초기화합니다. 테이블에는 "table" 클래스가 적용됩니다.
2. num 변수를 선언하고, 테이블 셀에 들어갈 숫자를 나타내기 위해 1로 초기화합니다.
3. 외부 루프로 6번 반복됩니다. 이 루프는 테이블의 각 행(row)을 생성합니다.
4. 현재 num이 짝수인지 확인합니다.
5. 각 행을 시작하는 <tr> 태그를 table 문자열에 추가합니다.
6. 내부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 셀(cell)을 생성합니다.
7. 현재 num이 짝수이고 125보다 작은지 확인합니다.
8. 각 셀에 현재의 num 값을 포함한 <td> 태그를 table 문자열에 추가합니다.
9. num 변수를 2씩 증가시킵니다. 이렇게 하면 다음 짝수로 이동합니다.
10. 내부 루프의 if 블록을 종료합니다.
11. 만약 num이 짝수가 아니라면, num을 1만큼 증가시킵니다.
12. 각 행의 끝을 표시하는 </tr> 태그를 table 문자열에 추가합니다.
13. 외부 루프가 다음 행을 생성하기 위해 다시 시작됩니다.
14. 테이블을 닫는 태그를 table 문자열에 추가합니다.
15. 최종적으로 완성된 table 문자열을 문서에 출력합니다.

결과 확인하기

11. 테이블 출력하기(10*10 짝수는 빨간색, 홀수는 파란색 출력하기)

25칸의 테이블에 짝수는 빨간색, 홀수는 파란색으로 나오도록 출력한 것입니다.

{
        let table = "<table class='table'>";
        let num = 1;
        
        for(let i=1; i<=10; i++){
            if(num%2==0){
                table += "<tr>";

                for(let j=1; j<=5; j++){
                    table += "<td><span style='color: red;'>" +num+ "</span ></td>";
                    num++;
                }
            } else {
                table += "<tr>";

                for(let j=1; j<=5; j++){
                    table += "<td><span style='color: blue;'>" +num+ "</span ></td>";
                    num++;
                }
            };
            
            table += "</tr>";
        };
        
        table += "</table>";
        
        document.write(table);
}

* 예제 10번과 같은 부분은 생략합니다.
1. 외부 루프로 10번 반복됩니다. 이 루프는 테이블의 각 행(row)을 생성합니다.
2. 현재 num이 짝수인지 확인합니다.
3. 각 행을 시작하는 <tr> 태그를 table 문자열에 추가합니다.
4. 내부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 셀(cell)을 생성합니다.
5. 각 셀에 현재의 num 값을 포함한 <td> 태그를 추가하고, 텍스트의 색상을 빨간색으로 설정합니다.
6. num 변수를 1씩 증가시킵니다.<br> 7. 현재 num이 홀수인 경우를 처리하기 위한 else 블록을 시작합니다.
8. 각 홀수 행을 시작하는 <tr> 태그를 table 문자열에 추가합니다.
9. 내부 루프로 5번 반복됩니다. 이 루프는 테이블의 각 셀(cell)을 생성합니다.
10. 각 셀에 현재의 num 값을 포함한 <td> 태그를 추가하고, 텍스트의 색상을 파란색으로 설정합니다.
11. num 변수를 1씩 증가시킵니다.

결과 확인하기