Javascript

00. POINT

for문을 사용하기 위해 반드시 알아야하는 것!
예제 2번 let은 변수이자 초기값이며 i=1은 시작점 (배열의 [0,1,2]등등)i<는 조건, i++는 증감식이다.
그 후의 if와 alert는 조건으로 값이 50이 될때 (if 50) 경고창을 띄워라. (alert)라는 의미이다.

★ 기본문법 ★
    
    for(초기값;   조건식;   증감식){
        실행문
    }

//예시1
            const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900]

            for (let i = 0; i<9; i++){
                console.log(arr[i])
            }
let은 변수 i=0은 배열의 시작점이며 i< 9는 조건이다. i++은 증가인데 조건이 맞기 때문에 변수에 +1추가. True 이기 때문에 다음 변수를 본다.
9의 경우 조건 9<9에 부합하지 않기 때문에 결과값이 나오지 않는다.

//예시2
    for(let i=1; i<=100; i++){
        if(i == 50){
        alert("50")

        console.log(i)
    }

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

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

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

// 1, 2, 3, 4, 5, 6 ~ 100

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

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

{
    for(let i = 0; i< 51; i++){  //i = i + 1 약식
         console.log(i)
    }

    //다른 방식 
    //for(let i=0; i<=50; i++){
        //console.log(i);

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

짝수만 출력하는 예시로 다양한 방식이 있습니다.

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

04. 데이터 이펙트 : 1부터 100까지 5의 배수 출력하기

for문을 이용해서 5의 배수를 출력하는 예제입니다. 조건문 if문과 증감연산자를 이용한 방법입니다.

// 증감 연산자를 이용한 방법
    { for(let i = 0; i< 100; i+=5){
        console.log(i)
}
//if문을 이용한 방법
for(let i=1; i<=100; i++)
    if(i%2 == 0){ // % 연산자를 이용하여 나머지가 0이면 짝수를 의미한다.
        console.log(i)
    }
}

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

if문을 사용하여 짝수와 홀수를 구분하고, 그 안에 색을 입혀 출력하는 방식입니다.
큰따옴표 안에는 큰따옴표를 쓸 수 없기 때문에 작은 따옴표를 사용하고 문자열과 숫자를 결합하기 위해 + 사용합니다.
div가 아닌 span을 사용하는 이유는 줄 바꿈에 있습니다. span은 문장 단위로 지정됩니다.

{
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 > ");
        }
    }
}

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

중첩 for문을 이용한 테이블 만들기 예제입니다. *기본 : table +="<td>1</td>;* 이 형식을 반복하는 과정을 줄이기 위한 코드입니다.

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

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

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

table +="</tr>";

table += "</table>";

document.write(table);

//결과값
//행, 열 10칸에 테두리가 있는 표가 나온다.

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

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>");
    }