JavaScript

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

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

for(let i=1; i<=100; i++){    //반복문 for문
    console.log(i)
}

결과 확인하기

1
2
3
4
~~
100

let i=1; 변수 i를 1로 할당한다.
i<=100; i가 100보다 같거나 작을때까지
console.log(i) 출력한다.
i++ 1씩 올린다.
반복

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

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

for(let i=0; i<=50; i++){
    console.log(i);     //초기값을 0으로 설정하고 1씩 증가시켜서 50번 반복함
}

결과 확인하기

1
2
3
4
~~
50

변수 i를 0부터 시작하여 50보다 작거나 같을 때까지 1씩 증가시키며 반복하면서, 각 반복마다 i 값을 출력하는 코드입니다.

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

for문을 이용해서 짝수를 출력하는 예제입니다.

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

결과 확인하기

2
4
6
8
10
~~ 100

증감 연산자를 이용하였습니다.
i += 2는 i = i + 2와 같습니다. (2씩 증가합니다.)
마찬가지로 1 += 3 이면 (3씩 증가합니다.)

04-1.데이터 이펙트 : 1부터 100까지 5의 배수 출력하기(증감연산자)

증감연산자를 사용하여 같은 결과값을 출력하는 예제입니다.

// 증감 연산자를 이용한 방법
for(let i=0; i<=100; i+=5){
    console.log(i)
}

결과 확인하기

5
10
15
20
25
~~ 100

변수 i를 0부터 시작하여 100보다 작거나 같을 때까지 5씩 증가시키며 반복하면서, 각 반복마다 i 값을 출력하는 코드입니다.

04-2.데이터 이펙트 : 1부터 100까지 5의 배수 출력하기(if문)

if문을 사용하여 같은결과값을 출력하는 예제입니다.

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

결과 확인하기

5
10
15
20
25
~~ 100

반복문을 사용하여 변수 i를 1부터 100까지 1씩 증가시키면서, 각 i 값에 대해 if문을 사용하여 i가 5의 배수인지 검사합니다. i를 5로 나눈 나머지가 0이면 i는 5의 배수이므로, 이때 console.log 함수를 사용하여 i 값을 출력합니다.

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

if문 을 이용하여 1부터 100까지 짝수는 출력하기

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

결과 확인하기

1
2
3
4
5
6
7
8
9
~~
100

if문을 사용하여 i를 2로 나눈 나머지가 0인지 검사합니다. i가 짝수일 경우, document.write() 함수를 사용하여 해당 i 값을 출력하는데, 이때 출력되는 텍스트의 색상을 파란색으로 설정합니다.

05-2. 데이터 이펙트 : 1부터 100까지 홀수(빨간색)으로 출력하기

for문을 이용하여 1부터 100까지 홀수는 빨간색으로 출력하기

for( let i=1; i<100; i++ ){
if(i % 2 == 1){
    document.write("<span style='color:red'>"+i+"</span>");
}

결과 확인하기

1
2
3
4
5
6
7
8
9
10
~~
100

if문을 사용하여 i를 2로 나눈 나머지가 1인지 검사합니다. i가 홀수일 경우, document.write() 함수를 사용하여 해당 i 값을 출력하는데, 이때 출력되는 텍스트의 색상을 빨간색으로 설정합니다.

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

1부터 100까지 합을구하는 방법입니다.

let sum = 0;

for(let i=1; i<=100; i++){
    sum += i;
}

document.write(sum);

결과 확인하기

5050

복습전

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

중첩 for()문을 이용한 테이블 만들기 예제입니다.

let table = "<table border=1>";

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

    table += "</tr>";
}
    
table += "</table>";

document.write(table);

결과 확인하기

변수 table에 초기값 "<table border='1'>"을 할당합니다.
그리고 i를 1부터 10까지 1씩 증가시키면서, table 변수에 "<tr>" 문자열을 추가합니다.
내부 반복문에서는 j를 1부터 10까지 1씩 증가시키면서, table 변수에 "<td>"+ j +"</td>" 문자열을 추가합니다.
이렇게 생성된 각 열은 j의 값에 따라서 1부터 10까지의 숫자를 가집니다.
내부 반복문이 종료되면, 외부 반복문에서는 "</tr>" 문자열을 table 변수에 추가합니다.
이렇게 생성된 각 행은 i의 값에 따라서 1부터 10까지의 숫자를 가지는 10개의 열을 가지고 있습니다.
외부 반복문이 종료되면, "</table>" 문자열을 table 변수에 추가합니다.
이렇게 생성된 테이블은 table 변수의 값을 document.write() 함수를 사용하여 출력합니다.</h4>

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

for문과 if문을 이용한 짝수 홀수 출력하는 방법입니다.

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

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

결과 확인하기

2단
2*1=2
2*2=4
2*3=6
2*4=8
2*5=10
2*6=12
2*7=14
2*8=16
2*9=18
~
9단
9*1=9
9*2=18
9*3=27
9*4=36
9*5=45
9*6=54
9*7=63
9*8=72
9*9=81

먼저, for 반복문을 이용하여 2부터 9까지의 숫자를 반복합니다.
반복문의 실행 내용은 다음과 같습니다.
document.write(i + "단","<br>"); : i값과 "단" 문자열을 결합하여 출력하고, 줄바꿈(<br>) 태그를 추가합니다.
내부에 또 다른 for 반복문을 이용하여 1부터 9까지의 숫자를 반복합니다.
document.write(i + "" + j + "=" + ij); : **i값과 j값, 그리고 구구단 결과인 i*j값을 결합하여 출력**합니다.
document.write("<br>"); : 줄바꿈(<br>) 태그를 추가합니다.
외부 for 반복문이 끝나면 다시 줄바꿈(<br>) 태그를 추가합니다.
document.write("<br><br>"); : 빈 줄을 추가하여 구구단 사이에 간격을 두고 출력합니다.

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

for문으로 총25칸의 테이블을 만들고 홀수엔 파란색 짝수에는 빨간색을 출력하는 코드입니다.

let table = "<table border='1'>";
let num = 0;
    
for(let i=0; i<5; i++){
    table += "<tr>";
    for(let j=0; j<5; j++){
        num++;
        if(num % 2 == 0){
            table += "<td style='color:red'>" + num + "</td>";
        } else {
            table += "<td style='color:blue'>" + num + "</td>";
        }
    };
    table += "</tr>";
}

table += "</table>";

document.write(table);

결과 확인하기

위 코드는 JavaScript를 사용하여 HTML 테이블을 생성하는 코드입니다.
테이블을 생성하고자 하는 HTML 페이지에서 위의 코드를 사용하면, 5x5 크기의 테이블이 생성됩니다.
각 셀은 번갈아가면서 파란색과 빨간색으로 색칠되며, 셀 안에는 1부터 25까지의 숫자가 들어갑니다.
JavaScript 코드를 이용하여 HTML 요소를 생성할 수 있기 때문에, 동적인 웹 페이지를 만드는 데 유용합니다. 이 코드에서는 for 루프를 사용하여 테이블과 테이블 셀을 생성하고,
조건문을 사용하여 색상을 결정하는 등 JavaScript의 기본 문법을 활용하고 있습니다.

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

25칸 테이블을 3의배수만 출력하고 그중 5의 배수는 빨간색으로 표현하는 방법입니다.

{
    let table = "<table border='1'>";
    let num = 0;
    for(let i=0; i<5; i++){
        table += "<tr>";
        for(let j=0; j<5; j++){
            num += 3;
            if(num % 3 == 0 && num % 5 == 0){
                table += "<td style='color:red'>" + num + "</td>";
            } else {
                table += "<td>" + num + "</td>";
            };
        };
        table += "</tr>";
    };
    table += "</table>";
    document.write(table);
}

결과 확인하기

결과 확인합시다.

복습전

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

배열 데이터에서 10보다 큰 수 찾기 예제입니다.

const arr = [1, 3, 5, 7, 9, 10, 11, 13, 15, 17, 19]

for(let i=0; i<arr.length; i++){
    if(arr[i]>10){
        document.write(arr[i]);
    }
}