데이터 효과

01. 1부터 10까지(초기값0)

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

{
    for(let i=0; i<10; i++){
        document.write(i+1);
    }
}

1.for 키워드: 'for' 루프의 시작을 나타냅니다.

2.(let i=0; i<10; i++): 세미콜론으로 구분된 세 가지 표현식이 이어져 있습니다.
· let i=0: 루프의 초기화 부분으로, 변수 'i'를 0으로 초기화합니다.
· i<10: 조건식으로, 'i'가 10보다 작을 때까지 루프가 실행됩니다.
· i++: 반복이 한 번 실행된 후 'i'를 1씩 증가시킵니다.

3.중괄호 {}: 'for' 루프의 본문을 감싸는 중괄호입니다. 이 안에 있는 코드 블록이 반복적으로 실행됩니다.

4.document.write(i);: 루프의 본문 내용으로, 현재 'i'의 값을 문자열로 변환한 후에 브라우저의 문서에 출력합니다.

결과 확인하기

1 2 3 4 5 6 7 8 9 10

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

for문을 사용하여 2부터 25까지 출력하는 예제입니다.

{
    for(let i=0; i<24; i++){
        document.write(i + 2);
    }
}

1.for 키워드: 'for' 루프의 시작을 나타냅니다.

2.(let i=0; i<24; i++): 세미콜론으로 구분된 세 가지 표현식이 이어져 있습니다.
· let i=0: 루프의 초기화 부분으로, 변수 'i'를 0으로 초기화합니다.
· i<24: 조건식으로, 'i'가 24보다 작을 때까지 루프가 실행됩니다.
· i++: 반복이 한 번 실행된 후 'i'를 1씩 증가시킵니다.

3.중괄호 {}: 'for' 루프의 본문을 감싸는 중괄호입니다. 이 안에 있는 코드 블록이 반복적으로 실행됩니다.

4.document.write(i+2);: 루프의 본문 내용으로, 현재 'i'의 값을 2를 더한 후에 브라우저의 문서에 출력합니다. 따라서 2부터 시작하여 25까지의 숫자가 출력됩니다.

결과 확인하기

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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

1부터 20까지 짝수만 출력하는 3가지 예제입니다.

{
    // for문을 사용
    for(let i=2; i<=20; i+=2){
        document.write(i);
    }

    // for문과 if문을 사용
    for(let i=1; i<=20; i++){
        if(i % 2 == 0){
            document.write(i);
        }
    }

    // while문 사용
    let i = 2;
    while(i<=20){
        document.write(i);
        i += 2;
    }
}

// for문을 사용
1.for 루프: for 키워드를 사용하여 반복문을 시작합니다. 초기값 i를 2로 설정하고, 조건식 i <= 20이 참인 동안 반복을 실행하며, 반복이 끝날 때마다 i를 2씩 증가시킵니다.
2.document.write(i);: 반복문 내부에서는 현재의 i 값을 document.write() 함수를 사용하여 출력합니다. 이는 브라우저에게 현재 i 값을 화면에 표시하라는 명령입니다.

// for문과 if문을 사용
1.for 키워드: 'for' 루프의 시작을 나타냅니다.
2.(let i=1; i<=20; i++): 세미콜론으로 구분된 세 가지 표현식이 이어져 있습니다.
· let i=1: 루프의 초기화 부분으로, 변수 'i'를 1로 초기화합니다.
· i<=20: 조건식으로, 'i'가 20보다 작거나 같을 때까지 루프가 실행됩니다.
· i++: 반복이 한 번 실행된 후 'i'를 1씩 증가시킵니다.
3.중괄호 {}: 'for' 루프의 본문을 감싸는 중괄호입니다. 이 안에 있는 코드 블록이 반복적으로 실행됩니다.
4.if(i % 2 == 0): 조건문으로, 'i'가 짝수인지 확인합니다. 'i'를 2로 나눈 나머지가 0인 경우는 짝수입니다.
5.document.write(i);: 조건이 참인 경우, 현재 'i'의 값을 브라우저의 문서에 출력합니다. 이로써 짝수만 출력됩니다.

// while문을 사용
1.let i = 2;: 반복문을 제어하는 변수 i를 2로 초기화합니다. 이 변수는 반복문 안에서 사용되며, 시작 값으로 2가 할당됩니다.
2.while(i <= 20) { ... }: i가 20 이하인 동안 반복합니다. 이것은 while 루프의 조건입니다.
3.document.write(i);: 반복문 내부에서는 현재 i 값을 document.write() 함수를 사용하여 출력합니다. 이는 브라우저에게 현재 i 값을 화면에 표시하라는 명령입니다.
4.i += 2;: 반복이 한 번 실행될 때마다 i에 2를 더합니다. 이렇게 함으로써 i는 짝수로만 증가하게 되어 20까지의 짝수를 출력합니다.

결과 확인하기

2 4 6 8 10 12 14 16 18 20

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

1부터 20까지 홀수만 출력하는 3가지 예제입니다.

{
    // for문을 사용
    for(let i=1; i<=20; i+=2){
        document.write(i);
    }

    // for문과 if문을 사용
    for(let i=1; i<=20; i++){
        if(i % 2 == 1){
            document.write(i);
        }
    }

    // while문 사용
    let i = 1;
    while(i<=20){
        document.write(i);
        i += 2;
    }
}

// for문을 사용
1.let i = 1;: 반복문을 제어하는 변수 i를 1로 초기화합니다. 이 변수는 반복문 안에서 사용되며, 시작 값으로 1이 할당됩니다.
2.for(i <= 20) { ... }: i가 20 이하인 동안 반복합니다. 이것은 for 루프의 조건입니다.
3.document.write(i);: 반복문 내부에서는 현재 i 값을 document.write() 함수를 사용하여 출력합니다. 이는 브라우저에게 현재 i 값을 화면에 표시하라는 명령입니다.
4.i += 2;: 반복이 한 번 실행될 때마다 i에 2를 더합니다. 이렇게 함으로써 i는 홀수로만 증가하게 되어 20까지의 홀수를 출력합니다.

// for문과 if문을 사용
1.let i = 1;: 반복문의 제어 변수 i를 1로 초기화합니다.
2.for(i <= 20) { ... }: i가 20 이하인 동안 반복합니다. 이것은 for 루프의 조건입니다.
3.if(i % 2 == 1) { ... }: 현재 숫자 i가 홀수인지 확인하는 조건문입니다. % 연산자는 나머지를 계산하는 연산자이며, i % 2의 결과가 1이면 i는 홀수입니다.
4.document.write(i);: 조건문의 결과가 참이라면, 즉 i가 홀수라면 document.write() 함수를 사용하여 현재 i 값을 출력합니다.

// while문을 사용
1.let i = 1;: 반복문의 제어 변수 i를 1로 초기화합니다.
2.while(i <= 20) { ... }: i가 20 이하인 동안 반복합니다. 이것은 while 루프의 조건입니다.
3.document.write(i);: 반복문 내부에서는 현재 i 값을 document.write() 함수를 사용하여 출력합니다. 이는 브라우저에게 현재 i 값을 화면에 표시하라는 명령입니다.
4.i += 2;: 반복이 한 번 실행될 때마다 i에 2를 더합니다. 이렇게 함으로써 i는 홀수로만 증가하게 되어 20까지의 홀수를 출력합니다.

결과 확인하기

1 3 5 7 9 11 13 15 17 19

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

1부터 100까지 5의 배수만 출력하는 3가지 예제입니다.

{
    // for문을 사용
    for(let i=5; i<=100; i+=5){
        document.write(i);
    }

    // for문과 if문을 사용
    for(let i=1; i<=100; i++){
        if(i % 5 == 0){
            document.write(i);
        }
    }

    // while문 사용
    let i = 5;
    while(i<=100){
        document.write(i);
        i += 5;
    }
}

// for문을 사용
1.let i = 5;: 반복문의 제어 변수 i를 5로 초기화합니다.
2.for(i <= 100) { ... }: i가 100 이하인 동안 반복합니다. 이것은 for 루프의 조건입니다.
3.document.write(i);: 반복문 내부에서는 현재 i 값을 document.write() 함수를 사용하여 출력합니다. 이는 브라우저에게 현재 i 값을 화면에 표시하라는 명령입니다.
4.i += 5;: 반복이 한 번 실행될 때마다 i에 5를 더합니다. 이렇게 함으로써 i는 5씩 증가하며, 5의 배수를 출력하게 됩니다.

// for문과 if문을 사용
1.let i = 1;: 반복문의 제어 변수 i를 1로 초기화합니다.
2.for(i <= 100) { ... }: i가 100 이하인 동안 반복합니다. 이것은 for 루프의 조건입니다.
3.if(i % 5 == 0) { ... }: 현재 숫자 i가 5의 배수인지 확인하는 조건문입니다. % 연산자는 나머지를 계산하는 연산자이며, i % 5의 결과가 0이면 i는 5의 배수입니다.
4.document.write(i);: 조건문의 결과가 참이라면, 즉 i가 5의 배수라면 document.write() 함수를 사용하여 현재 i 값을 출력합니다.

// while문을 사용
1.let i = 5;: 반복문의 제어 변수 i를 5로 초기화합니다.
2.while(i <= 100) { ... }: i가 100 이하인 동안 반복합니다. 이것은 while 루프의 조건입니다.
3.document.write(i);: 반복문 내부에서는 현재 i 값을 document.write() 함수를 사용하여 출력합니다. 이는 브라우저에게 현재 i 값을 화면에 표시하라는 명령입니다.
4.i += 5;: 반복이 한 번 실행될 때마다 i에 5를 더합니다. 이렇게 함으로써 i는 5씩 증가하며, 5의 배수를 출력하게 됩니다.

결과 확인하기

5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100

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

1부터 20까지 짝수는 빨간색, 홀수는 파란색으로 출력하는 예제입니다.

{
    for(let i=1; i<=20; i++){
        if(i % 2 == 1){
            document.write(""+i+"");
        } else {
            document.write(""+i+"");
        }
    }
}

1.for(let i=1; i<=20; i++) { ... }: i가 1부터 20까지 반복됩니다. 이것은 for 루프의 조건입니다.

2.if(i % 2 == 1) { ... }: 현재 숫자 i가 홀수인지 확인하는 조건문입니다. % 연산자는 나머지를 계산하는 연산자이며, i % 2의 결과가 1이면 i는 홀수입니다.

3.<span style='color: blue;'>: 조건문의 결과가 참이라면, 즉 i가 홀수라면 파란색으로 스타일을 설정한 <span> 태그가 시작됩니다.

4.+i+: 현재 숫자 i를 문자열에 포함시키기 위해 + 연산자를 사용합니다.

5.</span>: 파란색으로 스타일을 설정한 <span> 태그를 닫습니다.

6.else { ... }: 조건문의 결과가 거짓인 경우, 즉 i가 짝수라면 빨간색으로 스타일을 설정한 <span> 태그가 시작됩니다.

7.+i+: 현재 숫자 i를 문자열에 포함시키기 위해 + 연산자를 사용합니다.

8.</span>: 빨간색으로 스타일을 설정한 <span> 태그를 닫습니다.

결과 확인하기

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

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

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

    for (let i=0; i<=9; i++){
        document.write(arr[i]);
    }
}

1.const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];: 배열 arr을 생성하고 정수 1부터 10까지의 요소를 포함하도록 초기화합니다.

2.for (let i=0; i<=9; i++) { ... }: 0부터 9까지의 인덱스를 가지고 반복합니다. 배열의 인덱스는 0부터 시작하므로 배열의 길이가 10인 경우, 인덱스 0부터 9까지 총 10개의 요소를 가집니다.

3.document.write(arr[i]);: arr 배열의 i번째 요소를 출력합니다. i는 0부터 9까지 변화하며, 각 순회마다 배열의 해당 인덱스에 있는 값을 출력합니다.

결과 확인하기

1 2 3 4 5 6 7 8 9 10

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

구구단 8단을 출력하는 예제입니다.

{
    for(let i=8; i<=8; i++){
        document.write(i+"단<br>");
        for(let j=1; j<=9; j++){
            document.write(i+ "*" +j+ "=" + i * j+ "<br>");
        }
    }
}

1.for(let i=8; i<=8; i++) { ... }: i가 8부터 8까지 반복됩니다. 이것은 8단만 출력하기 위한 반복문입니다.

2.document.write(i+"단<br>");: 현재 단인 i의 값을 출력하고 줄 바꿈(<br>)을 추가하여 구구단의 제목을 출력합니다.

3.for(let j=1; j<=9; j++) { ... }: j가 1부터 9까지 반복됩니다. 이것은 각 단의 곱셈을 출력하기 위한 중첩된 반복문입니다.

4.document.write(i+ "*" +j+ "=" + i * j+ "<br>");: 현재 i와 j의 값을 사용하여 구구단의 곱셈식과 결과를 출력하고 줄 바꿈(<br>)을 추가합니다.

결과 확인하기

8단
8*1=8
8*2=16
8*3=24
8*4=32
8*5=40
8*6=48
8*7=56
8*8=64
8*9=72

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

테이블 5*5를 출력하는 예제입니다.

{
    let t = "<table class='table'>";
    let num = 1;
    for(let i=1; i<=5; i++){
        t += "<tr>";
        for(let k=1; k<=5; k++){
            t += "<td>" + num++ +"</td>";
        }
        t += "</tr>";
    }
    t += "</table>";

    document.write(t);
}

1. t 변수는 HTML 테이블을 문자열 형태로 저장하는 역할을 합니다. 초기에는 <table class='table'>로 시작합니다.

2. num 변수는 1로 초기화되며, 테이블 내의 각 셀에 들어갈 숫자를 나타냅니다.

3. 바깥쪽 for 루프(for(let i=1; i<=5; i++))는 5번 반복하며, 테이블에 5개의 행(<tr>)을 추가합니다.

4. 내부 for 루프(for(let k=1; k<=5; k++))는 각 행당 5번 반복하며, 각 행에 5개의 열()을 추가합니다.

5. <td> 태그 안에는 num 변수의 현재 값이 들어가고, 그 후에 num을 1씩 증가시킵니다. 따라서 테이블 내의 각 셀에는 1부터 25까지의 숫자가 차례로 들어가게 됩니다.

6. 각 행(<tr>)이 추가되고, 그 다음에는 각 행이 닫히는 태그(</tr>)가 추가됩니다.

7. 바깥쪽 for 루프가 모든 행을 생성하면, 테이블의 마지막 태그인 </table>이 추가됩니다.

8. 마지막으로, document.write(t)를 사용하여 문자열 변수 t에 저장된 HTML 코드를 웹 페이지에 출력합니다.

결과 확인하기

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20
21	22	23	24	25

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

테이블 5*5를 출력하면서 짝수만 나오게 출력하는 예제입니다.

{
    let t = "<table class='table'>";
    let num = 2;
    for(let i=1; i<=10; i++){
        t += "<tr>";
        for(let k=1; k<=5; k++){
            t += "<td>"+ num +"</td>";
            num +=2
        }
        t += "</tr>";
    }
    t += "</table>";

    document.write(t);
}

1. t 변수는 HTML 테이블을 문자열 형태로 저장하는 역할을 합니다. 초기에는 <table class='table'>로 시작합니다.

2. num 변수는 2로 초기화되며, 테이블 내의 각 셀에 들어갈 짝수 숫자를 나타냅니다.

3. 바깥쪽 for 루프(for(let i=1; i<=10; i++))는 10번 반복하며, 테이블에 10개의 행(<tr>)을 추가합니다.

4. 내부 for 루프(for(let k=1; k<=5; k++))는 각 행당 5번 반복하며, 각 행에 5개의 열(<td>)을 추가합니다.

5. <td> 태그 안에는 num 변수의 현재 값이 들어가고, 그 후에 num을 2씩 증가시킵니다. 따라서 테이블 내의 각 셀에는 2부터 시작하여 20까지의 짝수 숫자가 차례로 들어가게 됩니다.

6. 각 행(<tr>)이 추가되고, 그 다음에는 각 행이 닫히는 태그(</tr>)가 추가됩니다.

7. 바깥쪽 for 루프가 모든 행을 생성하면, 테이블의 마지막 태그인 </table>이 추가됩니다.

8. 마지막으로, document.write(t)를 사용하여 문자열 변수 t에 저장된 HTML 코드를 웹 페이지에 출력합니다.

결과 확인하기

2	4	6	8	10
12	14	16	18	20
22	24	26	28	30
32	34	36	38	40
42	44	46	48	50
52	54	56	58	60
62	64	66	68	70
72	74	76	78	80
82	84	86	88	90
92	94	96	98	100

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

테이블 11*11를 출력하면서 짝수는 빨간색, 홀수는 파락색으로 출력하는 예제입니다.

{
    let t = "<table class='table'>";
    let num = 1;
    for(let i=1; i<=10; i++){
        t += "<tr>";
        for(let k=1; k<=5; k++){
            (num % 2 == 0) ? t += "<td style='color:red'>" + num + "</td>" : t += "<td style='color:blue'>" + num + "</td>";
            num++;
        }
        t += "</tr>";
    }
    t += "</table>";

    document.write(t);
}

1. t 변수는 HTML 테이블을 문자열 형태로 저장하는 역할을 합니다. 초기에는 <table class='table'>로 시작합니다.

2. num 변수는 1로 초기화되며, 테이블 내의 각 셀에 들어갈 숫자를 나타냅니다.

3. 바깥쪽 for 루프(for(let i=1; i<=10; i++))는 10번 반복하며, 테이블에 10개의 행(<tr>)을 추가합니다.

4. 내부 for 루프(for(let k=1; k<=5; k++))는 각 행당 5번 반복하며, 각 행에 5개의 열(<td>)을 추가합니다.

5. <td> 태그 안에는 num 변수의 현재 값이 들어가고, 아래의 삼항 연산자를 사용하여 숫자가 짝수이면 빨간색 텍스트로, 홀수이면 파란색 텍스트로 지정됩니다.
· (num % 2 == 0) ? t += "<td style='color:red'>" + num + "</td>" : t += "<td style='color:blue'>" + num + "</td>";

6. 각 행(<tr>)이 추가되고, 그 다음에는 각 행이 닫히는 태그(</tr>)가 추가됩니다.

7. 바깥쪽 for 루프가 모든 행을 생성하면, 테이블의 마지막 태그인 </table>이 추가됩니다.

8. 마지막으로, document.write(t)를 사용하여 문자열 변수 t에 저장된 HTML 코드를 웹 페이지에 출력합니다.

결과 확인하기

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20
21	22	23	24	25
26	27	28	29	30
31	32	33	34	35
36	37	38	39	40
41	42	43	44	45
46	47	48	49	50

2	4	6	8	10
12	14	16	18	20
22	24	26	28	30
32	34	36	38	40
42	44	46	48	50
52	54	56	58	60
62	64	66	68	70
72	74	76	78	80
82	84	86	88	90
92	94	96	98	100

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20
21	22	23	24	25
26	27	28	29	30
31	32	33	34	35
36	37	38	39	40
41	42	43	44	45
46	47	48	49	50

2	4	6	8	10
12	14	16	18	20
22	24	26	28	30
32	34	36	38	40
42	44	46	48	50
52	54	56	58	60
62	64	66	68	70
72	74	76	78	80
82	84	86	88	90
92	94	96	98	100

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20
21	22	23	24	25
26	27	28	29	30
31	32	33	34	35
36	37	38	39	40
41	42	43	44	45
46	47	48	49	50

2	4	6	8	10
12	14	16	18	20
22	24	26	28	30
32	34	36	38	40
42	44	46	48	50
52	54	56	58	60
62	64	66	68	70
72	74	76	78	80
82	84	86	88	90
92	94	96	98	100

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20
21	22	23	24	25
26	27	28	29	30
31	32	33	34	35
36	37	38	39	40
41	42	43	44	45
46	47	48	49	50