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

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

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

1. i가 0으로 초기화됩니다.
2. 반복문이 실행되고, i가 10보다 작기 때문에 루프 내부의 코드 블록이 실행됩니다.
3. console.log(i+1);에 의해 현재 i의 값인 0에 1을 더한 값인 1이 콘솔에 출력됩니다.
4. i가 1 증가하여 1이 됩니다.
5. 다시 반복문의 조건을 확인하고, i가 10보다 작기 때문에 코드 블록이 실행됩니다.
6. console.log(i+1);에 의해 현재 i의 값인 1에 1을 더한 값인 2가 콘솔에 출력됩니다.
7. 이와 같은 과정이 반복되어 9까지의 숫자에 각각 1을 더한 값이 순차적으로 출력됩니다.
따라서, 결과적으로 콘솔에는 1부터 10까지의 숫자가 한 줄씩 출력됩니다.

결과 확인하기

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

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

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

1. i 변수를 0으로 초기화하고 시작합니다.
2. 조건을 확인하여 i가 25보다 작을 동안 반복합니다.
3. 반복이 끝날 때마다 i 값을 1씩 증가시킵니다.
4. console.log(i + 1);
5. 현재 i의 값에 1을 더한 결과를 콘솔에 출력합니다.
6. 이 줄은 각 반복에서 실행되며, i 값에 1을 더한 값을 출력합니다.

결과 확인하기

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

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

{
    for(let i=2; i<=20; i+=2){
        console.log(i);
    }

    let i = 2;
    while(i<=20){
        console.log(i);
        i += 2;
    }

    for(let i=1; i<=20; 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부터 20까지 홀수만 출력하는 예제입니다.

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

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

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

1. 첫 번째 코드 블록은 for 루프를 사용하여 1부터 19까지의 홀수를 출력합니다. i 변수는 1에서 시작하고, 2씩 증가하면서 19까지 반복합니다. 출력 결과는 아래와 같습니다
2. 두 번째 코드 블록은 while 루프를 사용하여 같은 결과를 얻습니다. 초기에 i 변수를 1로 설정하고, i가 19 이하인 동안에 i를 출력하고 2씩 증가시킵니다:
3. 세 번째 코드 블록은 for 루프를 사용하여 1부터 20까지의 모든 숫자 중 홀수를 출력합니다. if 문을 사용하여 i가 홀수일 때만 출력합니다:

결과 확인하기

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

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

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

    let i = 5;
    while(i<=100){
        console.log(i);
        i += 5;
    }

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

1.for문
이 코드는 5부터 100까지의 숫자 중 5의 배수를 출력하는 반복문입니다. for 반복문을 사용하여 5부터 100까지의 숫자를 5씩 증가시키며, 즉 5의 배수에 해당하는 숫자를 출력합니다.
2.while문
8줄:while 반복문을 사용하여 초기값 i를 5로 설정합니다.
9-11줄: i가 100 이하인 동안에 5의 배수인 숫자를 출력합니다.
3.if문 for문
15줄: 이 코드 역시 5부터 100까지의 숫자 중 5의 배수를 출력하는 반복문입니다
15줄: for 반복문을 사용하여 1부터 100까지의 숫자를 반복하면서, if 조건문으로 현재 숫자가 5의 배수인지 검사합니다
16-17줄: 숫자가 5의 배수라면 (i % 5 == 0 조건을 만족하면) 해당 숫자를 출력합니다.

결과 확인하기

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

for()문을 이용하여 1부터 20까지 짝수는 빨간색, 홀수는 파란색을 출력하는 예제입니다.

{
    for(let i=1; i<=20; i++){
        if(i % 2 ! == 0){
            console.log("<span style='color:red'>" + i + "<br></span>");
        }else {
            console.log("<span style='color:blue'>" + i + "<br></span>");
        }
    }
}

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까지 출력하기

배열 데이터 1부터 10까지 출력하는 예제입니다.

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

    for(let i=0; i<arr.length; i++){
        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문을 이용하여 구구단 8단을 출력하는 예제입니다.

{
    for(let i=1; i<=9; i++){
        for(let j = 1; j <= 1; j++){
            document.write("8x" + i + "=" + i*8 + "<br />");
        }
        console.log("8 x" + i + "=" + result);
    }
}

1. 바깥쪽 루프 (for (let i = 1; i <= 9; i++)): 이 루프는 변수 i를 1부터 9까지 증가시키면서 반복합니다. 이것은 1부터 9까지의 숫자를 의미하며, 8단의 구구단을 출력하는데 사용됩니다.
2. 안쪽 루프 (for (let j = 1; j <= 1; j++)): 이 루프는 변수 j를 1부터 1까지 증가시키면서 반복합니다. 이 루프는 중첩된 루프로서, 각 i 값(1부터 9까지의 숫자)에 대해 8단 곱셈을 계산하고 그 결과를 출력합니다.

결과 확인하기

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

테이블을 출력하는 예제입니다.

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

    for(let i=1; i<=5; i++){
        table += "<td>";

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

    table += "</table>";

    document.write(table);
}

1.let num = 1;: num이라는 변수를 선언하고 값을 1로 초기화합니다. 이 변수는 테이블 셀 안에 들어갈 내용을 나타냅니다.
2.let table = "<table class='table'>";: table이라는 변수를 선언하고 초기 문자열로 HTML <table> 요소를 시작하는 문자열을 할당합니다. 이 문자열에는 class 속성이 "table"로 설정되어 있습니다.
i++;: 이 부분은 루프에서 사용하는 i 변수를 1씩 증가시킵니다. 이렇게 하면 다음 단계에서 다음 숫자에 대한 구구단 값을 계산하게 됩니다.
3.for(let i=1; i<=5; i++){: i 변수를 사용하여 외부 루프를 시작합니다. 이 루프는 테이블의 행을 나타냅니다. i는 1부터 5까지 반복됩니다.
4.table += "<td>";: 현재 행에 대한 <td> 열을 시작하는 문자열을 table 변수에 추가합니다.
5.for(let j=1; j<=5; j++){: j 변수를 사용하여 내부 루프를 시작합니다. 이 루프는 각 행 안에 있는 각 셀을 나타냅니다. j는 1부터 5까지 반복됩니다.
6.table += "<td>" + num + "</td>";: 현재 셀에 num 값을 포함하는 <td> 열을 추가합니다. 이렇게 하면 테이블 셀 안에 숫자가 채워집니다. 그런 다음 num 값을 1 증가시켜 다음 셀에 다음 숫자를 넣을 준비를 합니다.
7.table += "</tr>": 현재 행을 닫는 </tr> 문자열을 table 변수에 추가합니다.
8.외부 루프가 다음 행으로 이동하고 내부 루프가 다시 실행되어 해당 행의 모든 셀이 생성됩니다.
9.table += "</table>";: 외부 루프가 모든 행을 생성하고 테이블을 마무리한 후, 전체 <table> 요소를 닫는 문자열을 table 변수에 추가합니다.
10.document.write(table);: 마지막으로, 생성된 HTML 문자열을 웹 페이지에 쓰기 위해 document.write() 함수를 사용합니다. 이로써 동적으로 생성된 테이블이 웹 페이지에 표시됩니다.

결과 확인하기

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

for문을 활용하여 짝수만 출력하는 예제입니다.

{
    let num = 1;
    let table = "<table class='table'>";
        
    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.반복문을 사용하여 5x5 크기의 HTML 테이블을 동적으로 생성하고, 각 셀에 1부터 25까지의 숫자를 순서대로 채웁니다.
2.생성된 HTML 테이블을 문자열 형태로 변수 table에 저장합니다.
3.document.write() 함수를 사용하여 변수 table에 저장된 HTML 문자열을 현재 웹 페이지에 출력하고 테이블을 렌더링합니다.

결과 확인하기

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

for문을 활용하여 10*10표를 만들고 짝수는 빨간색, 홀수는 파란색으로 출력하는 예제입니다.

{
    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++;
            }
        };
            
        able += "</tr>";
    };
        
    table += "</table>";
        
    document.write(table);
}

1.이 코드는 10x5 크기의 테이블을 생성하고, 각 셀에는 1부터 50까지의 숫자를 채워넣습니다. 짝수 행과 홀수 행의 텍스트 색상을 각각 빨간색과 파란색으로 설정합니다.
2.table 변수에 HTML 테이블을 문자열 형태로 저장하고, num 변수를 사용하여 각 셀에 들어갈 숫자를 관리합니다.
3.마지막으로, document.write() 함수를 사용하여 table 변수에 저장된 HTML 문자열을 웹 페이지에 출력하여 동적으로 생성된 테이블을 표시합니다.

결과 확인하기