01. 데이터 이펙트 : 1부터 100까지 출력하기

for문을 이용해서 1~100까지 출력하는 예제입니다.

for(let i=1; i<=100; i++){ 
        console.log(i)
}
결과 확인하기
1, 2, 3, 4 ····· 100

반복문 - for문

초깃값을 1로 설정.

i의 값이 100과 같아질 때까지 반복되며, '~까지'를 출력할 때에는 <=를 사용함.

또한 VS code에서는 "<"를 태그로 인식하기 때문에 " & l t ;" (공백 없어야 함)로 적어주어야 함.

02. 데이터 이펙트 : 0부터 50까지 출력하기

for문을 이용해서 0~50까지 출력하는 예제입니다.

for(let i=; i<=50; i++) {
        console.log(i)
    }
결과 확인하기
0, 1, 2, 3, 4 ····· 50

반복문 - for문

초깃값을 0으로 설정, 1씩 증가 시키는 것을 50번 반복.

i 값이 계속 변하기 때문에 const(상수)가 아닌 let(변수)으로 선언해주어야 함.

03. 데이터 이펙트 : 1부터 100까지 짝수만 출력

for문과 증감 연산자와 나누기 연산자를 이용하여 짝수만 출력하는 예제입니다.

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

2. 
    for (let i=1; i<=100; i++){
        if(i % 2 == 0) { 
            console.log(i)
        } 
    }
결과 확인하기
0, 2, 4, 6, 8 ····· 100

2, 4, 6, 8, 10 ····· 100

짝수를 출력하는 2가지 예제

1. 'n'만큼의 수가 값에 더해짐. "+="는 값 = 값+2와 같은 식이다.

2. % 연산자를 사용하여 2로 나누었을 때 나머지가 남지 않는 짝수들만 출력할 수 있다.

04. 데이터 이펙트 : 1부터 100까지의 수 중에 5의 배수만 출력

조건문인 if문과 연산자를 이용하여 5의 배수만 출력하는 예제입니다.

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

2. 
    for (let i=1; i<=100; i++){
        if(i % 5 == 0) { 
            console.log(i)
        } 
    }
결과 확인하기
0, 5, 10, 15, 20 ····· 100

5, 10, 15, 20, 25 ····· 100

5의 배수만 출력하는 2가지 예제

if문 (조건문)과 %(나머지) 연산자

if문은 조건문으로, 값이 거짓이 될 때까지 반복하여 연산함.

%(나머지) 연산자를 사용하여 5의 배수를 출력해냄.(5의 배수는 5로 나누었을 때 나머지가 없기 때문)

05. 데이터 이펙트 : 1부터 100까지 짝수(파란색) 홀수(빨간색) 출력하기

반복문(for)과 조건문(if)을 이용한 짝수, 홀수 색이 다르게 출력하는 방법.

for(let i=1; i<=100; i++) {
        if(i % 2 == 0) {
            document.write("<span style='color:blue'>"+i+"</span>");
        }
        if(i % 2 == 1) {
            document.write("<span style='color:red'>"+i+"</span>");
        }
}
결과 확인하기
2, 4, 6, 8, 10 ····· 100

1, 3, 5, 7, 9 ····· 99

짝수와 홀수의 색을 다르게 출력하는 예제

조건문(if)를 두 번 사용하였으며 결과값이 짝수일 경우에는 1번 조건문이, 홀수일 경우에는 2번 조건문이 실행됨.

for은 100까지의 수를 세어주는 반복문이고 if는 for의 변수 값에 따라 조건이 달라지는 조건문임.

두 조건문은 형제 관계이니 정렬에 주의해야 함.

또한 큰 따옴표(" ") 안에는 큰 따옴표가 올 수 없기 때문에 작은 따옴표(' ')를 사용해야함.

06. 데이터 이펙트 : 1부터 100까지의 합 구하기

for문을 사용하여 1부터 100까지의 합 구하기

 
    let sum = 0;
    for(i=1; i<=100; i++) {
        sum = i + sum;
        }
    document.write(sum)
결과 확인하기
5050

for문을 사용하여 1부터 100까지의 합을 출력하는 예제

for문을 사용하여 1부터 100가지의 모든 정수를 반복하면서

각 정수를 이전에 합에 더한 것을 'sum' 변수에 누적하여 저장한다.

그리고 마지막으로 sum 변수에 저장된 값을 출력한다.

sum 변수 안에 정수의 합이 계속 더해질 수 있도록 반복문 안에 sum+i를 작성하고, 그 값을 다시 sum 변수에 저장해야 하며,

document 함수는 반드시 반복문 밖에 작성하여 모든 수가 계속해서 더해지는 것이 아니라 모든 수의 합만 출력될 수 있도록 해야한다.

07. 데이터 이펙트 : for문을 이용해서 100칸 테이블 만들기

반복문(for)과 조건문(if)을 이용하여 100칸 테이블을 출력 시키는 방법.

let table = "<table border='1'>";
for(let i=1; i<=10, i++){
    table += "<tr>";
    for(let j=1; i<=10; j++) {
        table += "<td>"+j+"</td>";  
    }
    table += "</tr>"
}
table += "</table>"
document.write(table);
결과 확인하기

for문 만을 사용하여 100칸 테이블을 출력하는 예제

tr이 한 번 반복되는 동안 td는 10번 반복되는 구조로,

이번 예제는 5번 예제와 다르게 2번 for문이 1번 for문의 자녀가 됨.

데이터 저장하기에서 배웠듯이 변수는 값을 변경할 수 있기 때문에

1번과 2번 for문에 각각 다른 i와 j처럼 다른 변수를 선언해 주어야 함.

08. 데이터 이펙트 : 중첩 for문을 이용해서 구구단 만들기

반복문(for)를 중첩해서 이용하여 구구단 만드는 방법.

for(let i=2; i<=9; i++){
    document.write(i + "단","<br>");

    for(let j=1; j<=9; j++){
        document.write(i + "X" + j + "=" + i*j);    //i(곱해지는 수) * j (곱하는 수)
        document.write("<br>");               //가독성을 위하여 줄바꿈 태그를 추가함.
    }
document.write("<br><br>");         //각 숫자의 단이 깔끔하게 정리되기 위하여 줄바꿈 태그를 추가함.
}
결과 확인하기
2단
2X1=2
2X2=4
2X3=6
2X4=8
2X5=10
2X6=12
2X7=14
2X8=16
2X9=18
·····
9단
9X1=9
9X2=18
9X3=27
9X4=36
9X5=45
9X6=54
9X7=63
9X8=72
9X9=81

중첩 for문으로 구구단 만들기 예제

반복문(for문)을 두 번 사용하였으며, 6번 예제체럼 1번 for문이 1번 반복될동안 2번 for문은 여러번 반복되는 구조.

1번 for문은 큰 단락으로 구구단으로 쳤을 때 'n단'에 해당되는 반복문임. (곱해지는 수)

i의 값을 변경하면 구구단으로 출력할 수 있는 단의 수가 늘어남. ex) 9단까지 -> 13단까지

2번 for문은 단락 안의 내용으로 'n단'에 곱해지는 '1~9'까지의 수. (즉, 곱하는 수)

j의 값을 변경하면 i(곱해지는 수)에 곱하는 수가 늘어남. ex)nX9 -> nX13

*는 곱하기 연산자이며, 연산자를 바꾸면 다른 연산도 가능함. ex) * (곱하기 연산) -> / (나누기 연산)

09. 데이터 이펙트 : 테이블 25칸 (짝수:빨간색, 홀수:파란색)

중첩 for문과 증감 연산자와 나누기 연산자를 이용하여 짝수와 홀수의 색을 다르게 하여 테이블 안에 출력하는 예제입니다.

let table = "<table border='1'>";
let count = 0;

for(let i=0; i<5; i++) {
    table += "<tr>";
    for(let j=0; j<5; j++) {
        count++
        if(count % 2 == 0){
            table += "<td style='color:red'>"+count+"</td>";
        } else {
            table += "<td style='color:blue'>"+count+"</td>";
        }
    }
    table += "</tr>";
}
table += "</table>";
document.write(table);
결과 확인하기

홀짝의 색을 다르게 하여 출력하는 예제

중첩 for문을 사용하여 tr이 한 번 출력되는 동안 td가 5번씩 출력되게 함.

테이블 안에 카운팅 되는 숫자를 세기 위하여 5번만 반복되는 tr이 아니라 25번 반복되는 td가 있는 for문에 count 변수를 넣었음.

홀수와 짝수를 구분하여 출력하기 위하여 if문의 조건으로 나누기 연산자를 사용하였고,

짝수를 참으로 둔 else if문을 사용하여 false인 홀수가 파란색으로 출력되도록 함.

10. 데이터 이펙트 : 테이블 25칸 (3의 배수만 출력(5의 배수는 빨간색으로 출력))

중첩 for문과 else if문, 증감연산자를 사용하여 테이블 안에 3의 배수만 출력되게 하고 그 중에 5의 배수는 빨간색으로 출력되게 하는 예제입니다.

let table = "<table border='1'>";
let count = 0;                                                                  //1

for(let i=0; i<5; i++) {
    table += "<tr>";
    for(let j=0; j<5; j++) {
        count +=3                                                               //2
        if(count % 5 == 0){                                                     //3
            table += "<td style='color:red'>"+count+"</td>";        //4
        } else {
            table +="<td>"+count+"</td>"                            //5
        }
    }
    table += "</tr>";
}
table += "</table>";
document.write(table)
결과 확인하기

중첩 for문, 증감연산자, else if문을 사용하여 테이블 안에 3의 배수를 출력하고 그 수 중에 5의 배수는 빨간색으로 출력되게 하는 예제

1. 테이블 안에 들어갈 변수를 위해 let count=0;을 선언함.

2. 변수 count는 5번만 반복될 것이 아니라 테이블이 25칸 출력되는 동안 반복되어야 하므로 tr 안에 있는 for문에 넣어주었음.

3. 테이블 안에는 3의 배수만 출력되어야 하므로 증감연산자를 사용하여 3씩 더해지도록 했음.

4. 출력되는 수 중에 5의 배수와 겹치는 수가 있으면 빨간색으로 출력해야 하므로 if 조건문을 사용하여

변수 count를 5로 나누었고, 나머지가 0이 되는 수가 빨간색으로 출력되도록 style 속성을 주었음.

5. 5의 배수가 아닌 수는 빠져나와 출력될 수 있도록 else를 작성함.

11. 데이터 이펙트 : 배열 데이터에서 10보다 큰 수 찾기

for문과 if문을 사용하여 배열 안의 값에서 조건에 맞는 값을 찾아낼 수 있습니다.

const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
for(let i=0; i<=arr.length; i++) {                   //1
    if(arr[i]>=10) {                                   //2
        document.write(arr[i],"
");                      //3
    }
}
결과 확인하기
11, 13, 15, 17, 19

배열 데이터에서 10보다 큰 수 찾기

1. 배열의 키가 0부터 시작하므로 i는 0이 되며, 배열의 안 값의 갯수만큼 반복하기 위해 정수 대신 arr.length를 작성한다.

2. 배열 안 값들 중에 10보다 큰 값을 찾기 위해 if 조건문을 사용하였고, i가 10보다 크거나 작다는 뜻의 >= 비교 연산자를 넣어준다.

3. 콘솔이 아닌 화면에 출력하기 위해 document 함수를 사용하였고, 키가 아니라 값을 출력해야하기 때문에 arr[i]를 작성한다.

배열의 키와 같은 수만큼 식을 반복하게 되면 마지막에는 undefiend(값이 설정되지 않음)이 출력될 수 있기 때문에

배열보다 적게 반복 시키기 위해 =(등호)를 제외하고 작성해 주는 것이 좋다.