01. 1부터 100까지 출력하기(초기값0)

for()문을 이용하여 1부터 100까지 출력하는 예제입니다.

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

for: JavaScript에서 반복문을 나타내는 키워드입니다. for()문의 기본 주조는 for(초기값; 조건식; 증감값)입니다. for 뒤에 괄호로 감싼 세 가지 표현식을 사용하여 반복 동작을 정의할 수 있습니다.
2줄: (let i=0; i<10; i++): for 문의 괄호 안에 첫 번째 표현식은 반복의 시작점을 초기화합니다.
2줄: i라는 변수를 0으로 초기화합니다. 두 번째 표현식은 반복이 진행될 조건을 정의합니다. i가 10보다 작을 때까지 반복을 수행하도록 설정되어 있습니다. 세 번째 표현식은 반복이 한 번 실행될 때마다 수행되는 작업을 정의합니다. i를 1씩 증가시키는 i++ 연산이 수행됩니다. 3줄: { ... }: 중괄호 안에 있는 코드 블록은 for 반복문이 실행될 때마다 실행됩니다.
3줄: 이 코드 블록 안에는 console.log(i);가 있습니다. 이 부분은 반복 중에 i 값을 출력하는 역할을 합니다.

결과 확인하기

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

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

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

2줄: for(i=0; i<25; i++): 이 부분은 반복문의 시작을 정의하는 부분입니다. i라는 변수를 0으로 초기화하고, i가 25보다 작을 때까지 반복을 실행하며 i를 1씩 증가시킵니다.
3줄: console.log(i+2);: 이 부분은 반복문의 본문 내용입니다. 여기서는 현재 i에 2를 더한 값을 console.log 함수를 사용하여 출력합니다. 따라서 반복이 진행될 때마다 2씩 증가한 값이 출력됩니다.

결과 확인하기

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

for()문을 이용하여 1부터 20까지 짝수만 출력하는 3가지 방법의 예제입니다.

{
        //if문
        for(let i=2; i<=20; i+=2){
            console.log(i);
        }

        //while문
        let i = 2;
        while(i<=20){
            console.log(i);
            i += 2;
        }

        //if문 for문
        for(let i=1; i<=20; i++){
            if(i % 2 == 0){
                console.log(i);
            }
        }
}

1.if()문
이 코드는 2부터 20까지의 짝수 숫자를 출력하는 반복문입니다. for 반복문을 사용하여 2부터 20까지의 숫자를 2씩 증가시키며, 즉 짝수만을 반복하면서 해당 숫자를 출력합니다.
2.while문
8줄: while 반복문을 사용하여 초기값 i를 2로 설정합니다.
9-11줄: i가 20 이하인 동안에 짝수인 숫자를 출력하고 i를 2씩 증가시킵니다.
3.if문 for문
15줄: 1부터 20까지의 숫자 중에서 짝수인 숫자만 출력하는 반복문과 조건문의 조합입니다.
15줄: for 반복문을 사용하여 1부터 20까지의 숫자를 반복하면서, if 조건문으로 현재 숫자가 짝수인지 검사합니다.
16-17줄: 숫자가 짝수라면 (i % 2 == 0 조건을 만족하면) 해당 숫자를 출력합니다.

결과 확인하기

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

for()문을 이용하여 1부터 20까지 홀수만 출력하는 3가지 방법의 예제입니다

{
        //if문
        for(let i=1; i<=20; i+=2){
            console.log(i);
        }

        //while문
        let i = 1;
        while(i<=20){
            console.log(i);
            i += 2;
        }

        //if문 for문
        for(let i=1; i<=20; i++){
            if(i % 2 !== 0){
                console.log(i);
            }
        }
}

1.if()문
이 코드는 1부터 20까지의 홀수 숫자를 출력하는 반복문입니다. for 반복문을 사용하여 1부터 20까지의 숫자를 2씩 증가시키며, 즉 홀수만을 반복하면서 해당 숫자를 출력합니다.
2.while문
8줄: while 반복문을 사용하여 초기값 i를 1로 설정합니다.
9-11줄: i가 20 이하인 동안에 홀수인 숫자를 출력하고 i를 2씩 증가시킵니다.
3.if문 for문
15줄: for 반복문을 사용하여 1부터 20까지의 숫자를 반복합니다
16-17줄: if 조건문으로 현재 숫자가 홀수인지 검사합니다. 숫자가 홀수라면 (i % 2 !== 0 조건을 만족하면) 해당 숫자를 출력합니다.

결과 확인하기

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

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

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

        //while문
        let i = 5
        while(i<=100){
            console.log(i);
            i += 5;
        }

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

1.for문
이 코드는 5부터 100까지의 숫자 중 5의 배수를 출력하는 반복문입니다. for 반복문을 사용하여 5부터 100까지의 숫자를 5씩 증가시키며, 즉 5의 배수에 해당하는 숫자를 출력합니다.
2.while문
8줄:while 반복문을 사용하여 초기값 i를 5로 설정합니다.
9-11줄: i가 100 이하인 동안에 5의 배수인 숫자를 출력합니다.
3.if문 for문
15줄: 이 코드 역시 5부터 100까지의 숫자 중 5의 배수를 출력하는 반복문입니다
15줄: for 반복문을 사용하여 1부터 100까지의 숫자를 반복하면서, if 조건문으로 현재 숫자가 5의 배수인지 검사합니다
16-17줄: 숫자가 5의 배수라면 (i % 5 == 0 조건을 만족하면) 해당 숫자를 출력합니다.

결과 확인하기

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

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

{
        for(let i=1; i<=20; i++){
            if(i % 2 !== 0){
                console.log("<span style='color:red'>"+ i + "<br></span>");
            } else {
                console.log("<span style='color:blue'>" + i + "<br></span>");
            }
        }
}

2줄: 반복문의 시작을 정의하는 부분입니다. 여기서는 변수 i를 1로 초기화하고, i가 20 이하일 동안에 반복을 실행하며 i를 1씩 증가시킵니다. 이 부분은 아래의 코드 블록을 20번 반복하게 됩니다.
3줄: 반복문 내부에서 현재 숫자인 i가 홀수인지 짝수인지를 판별하는 조건문입니다. i % 2 !== 0은 홀수인지를 체크하는 조건입니다. 홀수인 경우 빨간색 스타일을 적용하고, 짝수인 경우 파란색 스타일을 적용합니다.
4-6줄: <span> 태그: 텍스트에 스타일을 적용하기 위해 사용되는 HTML 태그입니다. 여기서는 빨간색 또는 파란색 스타일을 적용하기 위해 사용됩니다.
4-6줄: style="color:red" 또는 style="color:blue": <span> 태그 내에 스타일을 지정하는 부분입니다. color 속성을 이용하여 글자색을 지정합니다.
4-6줄: i 현재 숫자 i를 출력합니다. <br></span>": 줄바꿈(<br>) 태그와 <span> 태그를 닫아주는 부분입니다.

결과 확인하기

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

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

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

        for(let i=0; i<ar.length; i++){
            console.log(arr[i]);
        }
}

2줄: arr이라는 이름의 상수 배열을 생성하고 초기화합니다. 배열 내부에 1부터 10까지의 정수가 들어있습니다.
4줄: 반복문이 시작을 정의하는 부분입니다. 변수 i를 0으로 초기화하고, i가 arr 배열의 길이보다 작을 동안에 반복을 실행하며 i를 1씩 증가시킵니다.
5줄: arr 배열의 인덱스 i에 해당하는 원소를 출력합니다.

결과 확인하기

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

중첩 for문을 이용하여 구구단 8단을 출력하는 예제입니다.

{
        for(i=8; i<9; i++){
            console.log(i + "단<br>")
            for(j=1; j<=10; j++){
                console.log(i + " * " + j + " = " + i*j + "<br>")
            }
        }
}

2줄: for 반복문 (바깥쪽 반복문)의 시작을 정의하는 부분입니다.
2줄: 변수 i를 8로 초기화하고, i가 9보다 작을 동안에 반복을 실행하며 i를 1씩 증가시킵니다.
3줄: 바깥쪽 반복문의 각 반복마다 i 단의 제목을 출력합니다. 여기서 "<br>"은 줄바꿈을 나타냅니다.
4줄: for 반복문 (안쪽 반복문)의 시작을 정의하는 부분입니다.
4줄: 변수 j를 1로 초기화하고, j가 10보다 작거나 같을 동안에 반복을 실행하며 j를 1씩 증가시킵니다.
4줄: 이 부분은 바깥쪽 반복문이 실행될 때마다 내부에서 10번 반복하게 됩니다.
5줄: i와 j를 사용하여 곱셈식과 결과를 문자열로 만들어 출력합니다. "<br>"은 줄바꿈을 나타냅니다.

결과 확인하기

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

자바스크립트 for()문을 이용하여 테이블을 출력하는 예제입니다.

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

        table += "</table>";

        document.write(table);
}

2줄: num이라는 변수를 선언하고 1로 초기화합니다.
3줄: table이라는 문자열 변수를 선언하고, HTML <table> 요소를 시작하는 문자열을 할당합니다. 이때 테이블에 class 속성이 'table'로 지정되어 있습니다.
5줄: i 변수를 사용한 반복문을 시작합니다. i는 1부터 5까지 증가합니다. 이 반복문은 행을 생성합니다.
6줄: 각 행을 나타내는 <tr> 요소를 table 문자열에 추가합니다
8줄: j 변수를 사용한 또 다른 반복문을 시작합니다. j는 1부터 5까지 증가합니다. 이 반복문은 각 행 안에 셀을 생성합니다.
9줄: 각 셀을 나타내는 <td> 요소를 table 문자열에 추가합니다. 이때 num 변수의 값을 사용하여 각 셀에 숫자를 표시합니다.
10줄: num 값을 1씩 증가시킵니다.
12줄: 각 행의 생성이 끝나면 </tr>을 추가하여 행을 닫습니다.
15줄: 위의 두 반복문이 모두 종료되면 table += "</table>";를 사용하여 테이블을 닫습니다

결과 확인하기

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

자바스크립트 for()문을 이용하여 짝수만 테이블에 출력하는 예제입니다.

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

        table += "</table>";

        document.write(table);      
}

2줄: num이라는 변수를 선언하고 2로 초기화합니다.
3줄: table이라는 문자열 변수를 선언하고, HTML <table> 요소를 시작하는 문자열을 할당합니다. 이때 테이블에 class 속성이 'table'로 지정되어 있습니다.
5줄: i 변수를 사용한 반복문을 시작합니다. i는 1부터 5까지 증가합니다. 이 반복문은 행을 생성합니다.
6줄: 각 행을 나타내는 <tr> 요소를 table 문자열에 추가합니다
8줄: j 변수를 사용한 또 다른 반복문을 시작합니다. j는 1부터 5까지 증가합니다. 이 반복문은 각 행 안에 셀을 생성합니다.
9줄: 각 셀을 나타내는 <td> 요소를 table 문자열에 추가합니다. 이때 num 변수의 값을 사용하여 각 셀에 숫자를 표시합니다.
10줄: num 값을 2씩 증가시킵니다.
12줄: 각 행의 생성이 끝나면 </tr>을 추가하여 행을 닫습니다.
15줄: 위의 두 반복문이 모두 종료되면 table += "</table>";를 사용하여 테이블을 닫습니다

결과 확인하기

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

자바스크립트 for()문과 if()을 이용하여 짝수는 빨간색으로 홀수는 파란색으로 테이블에 출력하는 예제입니다.

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

        table += "</table>";

        document.write(table);
}

2줄: num이라는 변수를 선언하고 1로 초기화합니다.
3줄: table이라는 문자열 변수를 선언하고, HTML <table> 요소를 시작하는 문자열을 할당합니다. 이때 테이블에 class 속성이 'table'로 지정되어 있습니다.
5줄: i 변수를 사용한 반복문을 시작합니다. i는 1부터 5까지 증가합니다. 이 반복문은 행을 생성합니다.
6줄: 각 행을 나타내는 <tr> 요소를 table 문자열에 추가합니다
8줄: j 변수를 사용한 또 다른 반복문을 시작합니다. j는 1부터 5까지 증가합니다. 이 반복문은 각 행 안에 셀을 생성합니다.
9줄: num 변수를 2로 나눈 나머지가 0인지 확인하여 숫자가 홀수인지 짝수인지 판별합니다.
10줄: 만약 숫자가 짝수라면, <td> 요소 안에 <span> 요소를 추가하고 텍스트를 빨간색으로 지정하여 셀 내용을 표시합니다.
12줄: 홀수인 경우, <td> 요소 안에 <span> 요소를 추가하고 텍스트를 파란색으로 지정하여 셀 내용을 표시합니다.
14줄: num 변수를 1씩 증가시킵니다.
16줄: 각 행의 생성이 끝나면 </tr>을 추가하여 행을 닫습니다.
19줄: 위의 두 반복문이 모두 종료되면 table += "</table>";를 사용하여 테이블을 닫습니다.

결과 확인하기