javascript

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

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

( ++ ) 연산자의 위치를 잘 확인합니다

{
    for ( let i=0;  i<=50;  i++){   // i = i + 1
    console.log(i);     // i 초기값을 0을 주어서 결과값이 0부터 시작합니다.
    }
}

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

for문을 이용해서 0부터 100까지의 짝수만 출력하는 예제입니다.

i=0 초기값이 몇인지 잘 확인하여야 합니다.

{
    for ( let i=0;  i<=100;  i+=2){     // i = i + 2 ,
    console.log(i);     // i에 2를 더해 2의 배수가 결과값에 나오도록 출력합니다.
    }
}
// 0을 빼고 2부터 시작하는 결과값을 갖고싶다면 초기값 i에 2에 주면됩니다.
// for ( let i=2;  i<=100;  i+=2)

04. 데이터 이펙트 : 1부터 100까지 특정 수 출력하기

for문을 이용해서 0부터 100까지의 5의배수,짝수만 출력하는 예제입니다.

if문을 활용하여 특정 수만 출력할 수 있습니다.

//예시 1번
{

    for ( let i=0; i<=100; i+=5 ){     //i = i + 5
        console.log(i);              //i에 5를 계속 더해 5배수만 나오도록 출력합니다.
    }
}
//예시2번
{
    for ( let i=1; i<=100; i++ ){    
        if(i % 2 == 0){             // if(조건문) ( i 나누기 2 = 몫이 0일시 출력 )
            console.log(i); 
        }
    }
}

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

for문과 if문을 이용해서 짝수와 홀수에 색을 넣어 줍니다.

{
    for(let i=1; i<100; i++) {
        if(i % 2 == 0) {    //2로 나누고 몫이 0일시 짝수
            document.write("<sapn style='color:blue'>" + i + "</sapn>")
        }                       //span style 을 이용해 변수에 색을 부여합니다.
        if(i % 2 == 1) {    //2로 나누고 몫이 1일시 홀수
            document.write("<sapn style='color:red'>" + i + "</sapn>")
        }
}

06. 데이터 이펙트 : for문을 1부터 100 합 구하기

for()문을 이용한 1~100 합 만들기 예제입니다.

{
    let num = 0;    //계속 더해줄 변수를 만들어줍니다.
            
    for(let i = 1; i<=100; i++){
        num += i;   //i가 1부터 100까지 올라가며 num에게 숫자를 더해줍니다.
    }
    document.write(num);
}

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

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

{
    let table = "<table border='1'>"; //테이블 경계입니다.

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

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

for문과 if문을 이용해서 구구단을 예제입니다.

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

        for(let j=1; j>=9; j++){               //이중 for문 시작점입니다.
            document.write(i + "*" + j + "=" + i*j);    //연산자를 계산을 할건지 문자열로 보여줄것인지 잘 구별해야 합니다.
            document.write("<br>");      //<br>를 사용해 구구단 계산할때마다 아랫줄로 내려 가독성을 높입니다.
        }
        document.write("<br>");
    }
}

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

다중 for문을 이용한 테이블 만들기 입니다.

{
    let table = "<table border='1'>";
        let num = 1;
        for(let i=0; i<5; i++){
            table += "<tr>";
            for(let j=1; j<=5; j++){
                if (num % 2 == 0) //2로 나눴을시 나머지가 0일때
                table += "<td>"+"<span style='color:blue'>"+num+"</span>"+"</td>"; //나머지가 0일때 파랑으로 출력
                else
                table += "<td>"+"<span style='color:red'>"+num+"</span>"+"</td>";  //그 외는 빨간색으로 출력
                num++
            }
        table += "</tr>";
        }
    table += "</table>";

    document.write(table);
}

10. 데이터 이펙트 : 테이블 25칸(3의 배수는 파란색, 5의 배수는 빨간색)

다중 for문을 이용한 테이블 만들기 입니다.

{
    let table = "<table border='1'>";
    let num = 3;    //3의 배수 출력이므로 3으로 시작
    for(let i=0; i<5; i++){
        table += "<tr>";
        for(let j=1; j<=5; j++){
            if (num % 5 == 0) //5로 나눴을시 나머지가 0일때
            table += "<td>"+"<span style='color:red'>"+num+"</span>"+"</td>";
            else
            table += "<td>"+"<span style='color:blue'>"+num+"</span>"+"</td>";
            num+=3; //3의 배수이므로 +=3을 해줍니다.
        }
        table += "</tr>";
    }
    table += "</table>";

    document.write(table);
}

11. 데이터 이펙트 : 배열 데이터에서 10보다 큰 숫자 찾아내기

다중 for문을 이용한 테이블 만들기 입니다.

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

    document.write("<span style='font-size: 35px; font-weight:bold'>"+"10보다 큰 숫자 찾기"+"</span>"+"<br>");
    document.write("주어진 배열: "+"[" + arr + "]" + "<br><br>");
    document.write("결과 :");

    for(let i=0; i<=arr.length; i++){   //arr.length란 arr배열의 요소 갯수를 뜻합니다.
        if(arr[i] > 10){
            document.write(arr[i] + " ");
        }
    }
}